Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making your Angular.js Application accessible

10,039 views

Published on

How to make sure that your Angular.js Application is usable for everybody

Published in: Technology

Making your Angular.js Application accessible

  1. 1. Making your Angular.js Application accessible 2nd Accessibility Camp Bay Area - Dirk Ginader http://dir.kg @ginader
  2. 2. Angular.js?
  3. 3. Angular.js • JavaScript Framework • allows you to extend HTML • has powerful Data Binding • is inaccessible
  4. 4. inaccessible? NAH — of course not or this talk would be over…
  5. 5. Angular has a bad reputation in terms of accessibility
  6. 6. Bad Examples Ian Pouncey: http://dir.kg/setting.an.example
  7. 7. <!-- 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
  8. 8. <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
  9. 9. A solid Foundation
  10. 10. 1. POSH Plain Old Semantic HTML
  11. 11. 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”>
  12. 12. POSH • Any other action
 —> it’s a Button! <button>Action!</button>
  13. 13. When HTML isn’t enough
  14. 14. 2. ARIA Accessible Rich Internet Applications
  15. 15. Meaningless <div class="checkbox"></div>
  16. 16. Roles <div role="checkbox"></div>
  17. 17. <div role="checkbox" ></div> Roles
  18. 18. <div role="checkbox" aria-checked="true" ></div> States
  19. 19. Properties <div role="checkbox" aria-checked="true" aria-label="ARIA is Awesome" ></div>
  20. 20. 3. Keyboard Support Without help only Form Elements and Links are reachable with Keyboard only
  21. 21. <div role="checkbox" aria-checked="true" aria-label="ARIA is Awesome" tabindex="0" ></div> Keyboard support
  22. 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. 23. 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.”
  24. 24. add as requirement… angular.module('myApp', ['ngAria'])... Marcy Sutton: http://dir.kg/using.ngaria …and gain lots of instant A11y goodness
  25. 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-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>
  26. 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-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>
  27. 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-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>
  28. 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-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>
  29. 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-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>
  30. 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-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>
  31. 31. Angular Material
  32. 32. Material Design?
  33. 33. http://www.google.com/design/
  34. 34. Angular Material Button https://material.angularjs.org/#/demo/material.components.button
  35. 35. Angular Material Checkbox https://material.angularjs.org/#/demo/material.components.checkbox
  36. 36. Accessibility Warnings! No Engineer will be happy as long as warnings littering the console…
  37. 37. Chrome Accessibility Developer Tools http://dir.kg/chrome.a11y.tools
  38. 38. Chrome Accessibility Developer Tools http://dir.kg/chrome.a11y.tools
  39. 39. Chrome Accessibility Developer Tools http://dir.kg/chrome.a11y.tools
  40. 40. Chrome Accessibility Developer Tools http://dir.kg/chrome.a11y.tools
  41. 41. Chrome Accessibility Developer Tools And the best part: They’re becoming integral part of the Chrome Developer tool! YAAAAY!
  42. 42. Bonus YAY:
  43. 43. Accessibility testing for Protractor!
  44. 44. Accessibility testing for Protractor with Tenon!
  45. 45. Thank you! Slides at http://dir.kg/angular.a11y http://dir.kg | @ginader

×