making your angular.js application accessible
TRANSCRIPT
Making your Angular.js Application accessible
2nd Accessibility Camp Bay Area - Dirk Ginader http://dir.kg @ginader
Angular.js?
Angular.js
• JavaScript Framework
• allows you to extend HTML
• has powerful Data Binding
• is inaccessible
inaccessible?NAH — of course not or this talk would be over…
Angular has a bad reputation in terms of
accessibility
<!-- A common form that includes input tags --> <form action="getform.php" method="get"> First name: <input type="text" name="first_name" /><br /> Last name: <input type="text" name="last_name" /><br /> E-mail: <input type="email" name="user_email" /><br /> <input type="submit" value="Submit" /> </form>
http://dir.kg/setting.an.example
<li ng-repeat="item in items" ng-click="showItem(item)"> <h3>{{item.title}}</h3> <button ng-click="remove(item)">Remove</button> </li>
straight from stackoverflow: http://dir.kg/bad.angular.example
A solid Foundation
1. POSHPlain Old Semantic HTML
POSH
• If it’s an action element that triggers a navigation to another page or another section on the same page —> it’s a Link! <a href=“somewhere-else”>
POSH
• Any other action—> it’s a Button! <button>Action!</button>
When HTML isn’t enough
2. ARIAAccessible Rich Internet Applications
Meaningless
<div class="checkbox"></div>
Roles
<div role="checkbox"></div>
<div role="checkbox" ></div>
Roles
<div role="checkbox" aria-checked="true" ></div>
States
Properties
<div role="checkbox" aria-checked="true" aria-label="ARIA is Awesome" ></div>
3. Keyboard SupportWithout help only Form Elements and Links are
reachable with Keyboard only
<div role="checkbox" aria-checked="true" aria-label="ARIA is Awesome" tabindex="0" ></div>
Keyboard support
Keyboard supportfunction a11yClick(event){ if(event.type === 'click'){ return true; } else if(event.type === 'keypress'){ var code = event.charCode || event.keyCode; if((code === 32)|| (code === 13)){ return true; } } else{ return false; } } $('#fake-button').on('click keypress', function(event){ if(a11yClick(event) === true){ // do stuff } });
Karl Groves: http://dir.kg/a11yClick
4. ngAria“The goal of ngAria is to improve Angular's default accessibility by enabling
common ARIA attributes that convey state or semantic information for assistive technologies used by persons with disabilities.”
add as requirement…
angular.module('myApp', ['ngAria'])...
Marcy Sutton: http://dir.kg/using.ngaria
…and gain lots of instant A11y goodness
<your-awesome—checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}" ng-disabled="isDisabled" aria-disabled="false" ng-click="toggleCheckbox()" ng-keypress="toggleCheckbox()" class="ng-pristine ng-valid ng-touched active" aria-label="Custom Checkbox" aria-checked="true" aria-invalid=“false" tabindex="0" > <span class="icon" aria-hidden="true"></span> Custom Checkbox </your-awesome—checkbox>
<your-awesome—checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}" ng-disabled="isDisabled" aria-disabled="false" ng-click="toggleCheckbox()" ng-keypress="toggleCheckbox()" class="ng-pristine ng-valid ng-touched active" aria-label="Custom Checkbox" aria-checked="true" aria-invalid=“false" tabindex="0" > <span class="icon" aria-hidden="true"></span> Custom Checkbox </your-awesome—checkbox>
<your-awesome—checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}" ng-disabled="isDisabled" aria-disabled="false" ng-click="toggleCheckbox()" ng-keypress="toggleCheckbox()" class="ng-pristine ng-valid ng-touched active" aria-label="Custom Checkbox" aria-checked="true" aria-invalid=“false" tabindex="0" > <span class="icon" aria-hidden="true"></span> Custom Checkbox </your-awesome—checkbox>
<your-awesome—checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}" ng-disabled="isDisabled" aria-disabled="false" ng-click="toggleCheckbox()" ng-keypress="toggleCheckbox()" class="ng-pristine ng-valid ng-touched active" aria-label="Custom Checkbox" aria-checked="true" aria-invalid=“false" tabindex="0" > <span class="icon" aria-hidden="true"></span> Custom Checkbox </your-awesome—checkbox>
<your-awesome—checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}" ng-disabled="isDisabled" aria-disabled="false" ng-click="toggleCheckbox()" ng-keypress="toggleCheckbox()" class="ng-pristine ng-valid ng-touched active" aria-label="Custom Checkbox" aria-checked="true" aria-invalid=“false" tabindex="0" > <span class="icon" aria-hidden="true"></span> Custom Checkbox </your-awesome—checkbox>
<your-awesome—checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}" ng-disabled="isDisabled" aria-disabled="false" ng-click="toggleCheckbox()" ng-keypress="toggleCheckbox()" class="ng-pristine ng-valid ng-touched active" aria-label="Custom Checkbox" aria-checked="true" aria-invalid=“false" tabindex="0" > <span class="icon" aria-hidden="true"></span> Custom Checkbox </your-awesome—checkbox>
Angular Material
Material Design?
Angular Material Button
https://material.angularjs.org/#/demo/material.components.button
Angular Material Checkbox
https://material.angularjs.org/#/demo/material.components.checkbox
Accessibility Warnings!
No Engineer will be happy as long as warnings littering the console…
Chrome Accessibility Developer Tools
http://dir.kg/chrome.a11y.tools
Chrome Accessibility Developer Tools
http://dir.kg/chrome.a11y.tools
Chrome Accessibility Developer Tools
http://dir.kg/chrome.a11y.tools
Chrome Accessibility Developer Tools
http://dir.kg/chrome.a11y.tools
Chrome Accessibility Developer Tools
And the best part: They’re becoming integral part of the Chrome Developer tool!
YAAAAY!
Bonus YAY:
Accessibility testing for Protractor!
Accessibility testing for Protractor with Tenon!
Thank you!
Slides at http://dir.kg/angular.a11y http://dir.kg | @ginader