This document discusses accessibility with AngularJS. It begins by defining accessibility and its key principles: perceivable, operable, understandable, and robust. It then covers how to add accessibility to Angular apps using ARIA roles, states and properties. Common accessibility patterns like text alternatives and proper use of semantic HTML are presented. It also demonstrates how to test Angular apps for accessibility issues using tools like Protractor and its accessibility testing plugin.

1. Accessibility with AngularJS
Rostyslav Belmeha
Front-End Developer @SoftServe

2. David Walsh
“The unsung heroes of the
engineering world are accessibility
devs. Zero recognition but make the
web possible for so many”

3. Agenda
1. Accessibility: what and why
2. Key-principles of Accessibility
3. Accessibility with AngularJS
4. Accessibility Patterns

4. First Web-Site
link

5. Modern Web-Site

6. Web Accessibility
people with disabilities can perceive, understand, navigate and

7. People with some kind of
disability
20%

8. Kind of disabilities

10. Universal design

11. *Key-principles of Accessibility
Perceivable
Operable
Understandable
Robust
* by Web Content Accessibility Guidelines 2.0

12. Perceivable
the information that can get into the brain

13. Perceivable

14. Operable
interaction that a user can perform

15. Operable

16. Understandable
perform in a predictable ways

17. Understandable

18. Understandable
link, основные
link, все характеристики
voiceOver:

19. Robust
interpretation of content by various user agents or devices

20. Robust

21. Accessibility with AngularJS

22. ARIA
a way to add the missing semantics

23. indicator of type describing of characteristicscurrent interaction state
ARIA
roles states properties

24. roles states properties
aria-busy
aria-checked
aria-disabled
aria-expanded
aria-grabbed
aria-hidden
aria-invalid
aria-pressed
aria-selected
aria-activedescendant
aria-atomic
aria-autocomplete
aria-controls
aria-describedby
aria-dropeffect
aria-flowto
aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
aria-posinset
aria-readonly
aria-relevant
aria-required
aria-setsize
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
alert
alertdialog
button
checkbox
combobox
dialog
gridcell
link
log
marquee
menuitem
menuitemcheckbox
menuitemradio
option
progressbar
radio
radiogroup
scrollbar
slider
… +30

25. Common problem
<div ng-click = "doStuff()">click me!</div>

26. Some Solution
<div tabindex=“0” role=“button” ng-click=“doStuff()”>
click me!
</div>

27. Best Solution
<button ng-click=“doStuff()”>click me!</button>

28. Common problem
<awesome-checkbox></awesome-checkbox>

29. Some Solution
<awesome-checkbox tabindex=“0” role=“checkbox”
aria-checked=“true”>
</awesome-checkbox>

30. Best Solution
<input type=“checkbox” ng-click=“checkVal()” />

31. ngAria
accessibility module in Angular 1.3+

32. Supported directives
ngModel
ngDisabled
ngShow
ngHide
ngClick
ngDblClick
ngMessages

33. DEMO
http://codepen.io/rbelmega/pen/KpGeJo

34. What about testing?

35. Protractor A11Y Plugin
Accessibility Developer Tools
Tenon.io

36. What will we test?
labels
roles
ARIA properties
interactions
color contrast

37. Steps:
Install Protractor
npm install -g protractor
webdriver-manager update
webdriver-manager start
Create config file and enable plugin
// Chrome Accessibility Dev Tools only:
exports.config = {
...
plugins: [{
chromeA11YDevTools: {
treatWarningsAsFailures: true
},
path: 'node_modules/protractor/plugins/accessibility'
}]
}

38. Write and run your tests
Steps:

39. Common Accessibility Patterns

40. Text alternatives
offscreen spans
aria-label or label elements
image alt attributes
figure/figcaption elements

41. HTML Semantics
use native elements
use ARIA

42. HTML Semantics
native elements

43. HTML Semantics
ARIA

44. Focus management
use tabindex
outline vs border
should never be lost
http://rbelmega.github.io/pacemaker-accessibility/#/demo/5

45. Announcing changes
notification with ARIA live region
http://codepen.io/rbelmega/pen/yNmbGQ

46. Color contrast and scale
legible content
usable interactive controls
configurable UI themes

47. Progressive enhancement
JS could be disabled
not latest version of browser

48. Questions?