Dan Mouyard
Senior Interface Engineer
Accessibility Stack
WAI-ARIA
AngularJS
Accessibility Stack
HTML CSS JS
Monitor
Mouse
Keyboard
Speakers
Accessibility API
WAI-ARIA
Accesible Rich Internet Applications
Technical specification to make websites and applications more accessible, especially with dynamic content and advanced user interface controls.
HTML Attributes
Roles
Landmarks
- role="main"
- role="banner"
- role="navigation"
- role="search"
- role="complementary"
Structure
- role="article"
- role="heading"
- role="listitem"
- role="document"
- role="presentation"
Widgets
- role="alert"
- role="button"
- role="tooltip"
- role="progressbar"
- role="timer"
Properties
Properties
- aria-required="true|false"
- aria-label="string"
- aria-controls="id"
- aria-haspopup="true|false"
- aria-live="polite|assertive|off"
States
States
- aria-busy="true|false"
- aria-checked="true|false"
- aria-disabled="true|false"
- aria-expanded="true|false|undefined"
- aria-invalid="true|false"
Rules for Using ARIA
#1 Use native elements first.
#2 Don't override native semantics.
AngularJS
<h1>Todo List</h1>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input type="submit" value="add">
</form>
<h1>Todo List</h1>
<h1>To-do List</h1>
<span>{{remaining()}} of {{todos.length}} remaining</span><span aria-live="polite">{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
[ <button class="button-link" ng-click="archive()">archive</button> ]
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span><input id="todo-{{$index}}" type="checkbox" ng-model="todo.done">
<label for="todo-{{$index}}" class="done-{{todo.done}}">{{todo.text}}</label>
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here"><label for="add-todo" class="element-invisible">New to-do item</label>
<input id="add-todo" type="text" ng-model="todoText"
placeholder="add new to-do here" size="30">
Resources
Thank You!
Any Questions?