Your browser doesn’t support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Accessibile AngularJS

dcmouyard.github.io/accessible-angular

Dan Mouyard

Senior Interface Engineer

dmouyard@forumone.com
@dcmouyard

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

Structure

Widgets

Properties

Properties

States

States

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?