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

1. Making your Angular.js
Application accessible
2nd Accessibility Camp Bay Area - Dirk Ginader
http://dir.kg @ginader

2. Angular.js?

3. Angular.js
• JavaScript Framework
• allows you to extend HTML
• has powerful Data Binding
• is inaccessible

4. inaccessible?
NAH — of course not or this talk would be over…

5. Angular has a bad
reputation in terms of
accessibility

6. Bad Examples
Ian Pouncey: http://dir.kg/setting.an.example

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. <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. A solid Foundation

10. 1. POSH
Plain Old Semantic HTML

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. POSH
• Any other action
—> it’s a Button! <button>Action!</button>

13. When HTML isn’t
enough

14. 2. ARIA
Accessible Rich Internet Applications

15. Meaningless
<div class="checkbox"></div>

16. Roles
<div role="checkbox"></div>

17. <div
role="checkbox"
></div>
Roles

18. <div
role="checkbox"
aria-checked="true"
></div>
States

19. Properties
<div
role="checkbox"
aria-checked="true"
aria-label="ARIA is Awesome"
></div>

20. 3. Keyboard Support
Without help only Form Elements and Links are
reachable with Keyboard only

21. <div
role="checkbox"
aria-checked="true"
aria-label="ARIA is Awesome"
tabindex="0"
></div>
Keyboard support

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 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. 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-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. <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. <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. <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. <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. <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. Angular Material

32. Material Design?

33. http://www.google.com/design/

34. Angular Material Button
https://material.angularjs.org/#/demo/material.components.button

35. Angular Material Checkbox
https://material.angularjs.org/#/demo/material.components.checkbox

36. Accessibility Warnings!
No Engineer will be happy as long as warnings littering the console…

37. Chrome Accessibility
Developer Tools
http://dir.kg/chrome.a11y.tools

38. Chrome Accessibility
Developer Tools
http://dir.kg/chrome.a11y.tools

39. Chrome Accessibility
Developer Tools
http://dir.kg/chrome.a11y.tools

40. Chrome Accessibility
Developer Tools
http://dir.kg/chrome.a11y.tools

41. Chrome Accessibility
Developer Tools
And the best part:
They’re becoming integral part of the Chrome Developer tool!
YAAAAY!

42. Bonus YAY:

43. Accessibility testing for
Protractor!

44. Accessibility testing for
Protractor with Tenon!

45. Thank you!
Slides at http://dir.kg/angular.a11y
http://dir.kg | @ginader