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
• JavaScript Framework
• allows you to extend HTML
• has powerful Data Binding
• is inaccessible
<!-- 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
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”>
<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 Button
https://material.angularjs.org/#/demo/material.components.button
Angular Material Checkbox
https://material.angularjs.org/#/demo/material.components.checkbox
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!
Thank you!
Slides at http://dir.kg/angular.a11y http://dir.kg | @ginader