Download as PDF, PPTX
![add as requirement… angular.module('myApp', ['ngAria'])... Marcy Sutton: http://dir.kg/using.ngaria …and gain lots of instant A11y goodness](https://image.slidesharecdn.com/2015-02-28-angularjs-accessibilty-150222160221-conversion-gate02/75/Making-your-Angular-js-Application-accessible-24-2048.jpg)
Uploaded byDirk Ginader
Making your Angular.js Application accessible
1. Angular.js has a reputation for being inaccessible, but with the right techniques it can be made accessible. 2. Key techniques include using plain semantic HTML, ARIA roles and properties, keyboard support, and the ngAria module. 3. Angular Material and accessibility testing tools like the Chrome Accessibility Developer Tools and accessibility testing in Protractor can help make Angular applications more accessible.
Making your Angular.js Application accessible
- 1. Making your Angular.js Applicationaccessible 2nd Accessibility Camp Bay Area - Dirk Ginader http://dir.kg @ginader
- 2.
- 3. Angular.js • JavaScript Framework •allows you to extend HTML • has powerful Data Binding • is inaccessible
- 4. inaccessible? NAH — ofcourse not or this talk would be over…
- 5. Angular has abad reputation in terms of accessibility
- 6. Bad Examples Ian Pouncey:http://dir.kg/setting.an.example
- 7. <!-- A commonform 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
- 8. <li ng-repeat="item initems" 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
- 9.
- 10. 1. POSH Plain OldSemantic HTML
- 11. POSH • If it’san action element that triggers a navigation to another page or another section on the same page —> it’s a Link! <a href=“somewhere-else”>
- 12. POSH • Any otheraction —> it’s a Button! <button>Action!</button>
- 13.
- 14. 2. ARIA Accessible RichInternet Applications
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. 3. Keyboard Support Withouthelp only Form Elements and Links are reachable with Keyboard only
- 21.
- 22. Keyboard support function 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
- 23. 4. ngAria “The goalof 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.”
- 24. add as requirement… angular.module('myApp',['ngAria'])... Marcy Sutton: http://dir.kg/using.ngaria …and gain lots of instant A11y goodness
- 25. <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-validng-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>
- 26. <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-validng-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>
- 27. <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-validng-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>
- 28. <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-validng-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>
- 29. <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-validng-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>
- 30. <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-validng-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>
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. Accessibility Warnings! No Engineerwill be happy as long as warnings littering the console…
- 37.
- 38.
- 39.
- 40.
- 41. Chrome Accessibility Developer Tools Andthe best part: They’re becoming integral part of the Chrome Developer tool! YAAAAY!
- 42.
- 43.
- 44. Accessibility testing for Protractorwith Tenon!
- 45. Thank you! Slides athttp://dir.kg/angular.a11y http://dir.kg | @ginader