Introduction to web accessibility with ARIA for dynamic web apps.

1. The AsTeRICS Academy
for cross-cultural education in Assistive Technology

2. Module 2: Web Accessibility
Dynamic AUX, Custom controls, Progressive Enhancement
Steve Lee

3. Agenda
• Universal access barriers recap
• Accessibility or Assistive Technology and the web
• Web architecture and web ‚Apps‘
• Hands-On using ARIA to enhance user experiences
• Global Public Inclusive Infrastructure – GPII
• Updated slides: http://opendirective.net/M2SL.pdf

5. “The Web is
fundamentally
designed to work for all
people, whatever their
hardware, software,
language, culture,
location, or physical or
mental ability.“

6. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 6

7. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 7

12. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
12
• Driving car
• Bright light
• Noisey environment
• Under stress
Situational disability

13. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
13
• Adjustments to UI or additions to content
• High contrast theme
• Easy read
• Audio description
• Subtitles
Accessibility

14. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
14
• Transformation of UI
• Screen readers and Braille displays
• Magnifier
• Grid systems
• Gaze control
Assistive technology

15. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
15
• Physical AT
• OS Universal Access
• Browser Options
• Web site options
• Web AT
Adaptations to Web access

16. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 16

17. 17
“One size fits One”
GPII

18. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
18
How does AT
access Web content?

19. Accessibility Stack
ASSISTIVE TECHNOLOGY
WEB APP IN BROWSER
ACCESSIBILITY API

20. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
20
• Expose UI to AT
• AT can
• Navigate
• Observe
• Activate
Platform Accessibility APIs

21. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
21
• Describes UI in terms of
• Roles
• States
• Properties
Platform Accessibility APIs

22. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 22
<input type="checkbox" name="option1" value="Cheese“…>

<input type="checkbox" name="option1" value="Cheese“ checked …>
Role = checkbox Properties State = unchecked
State = checked
Standard controls

23. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 23
<li aria-role=“checkbox ”aria-checked=“true” …>
<img src=“checked.png” role=“presentation”…>
</li>
Custom Controls with ARIA
<li>
<img src=“checked.png” …>
tabindex="0"
</li
Role = checkbox State = checked

24. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
24
Web access to Platform
Capabilities

25. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
25
• Gamepad – switch access
• Pointer events – input modes
• Speech recognition
• Text to Speech
• Camera
• Vibration
Platform APIs [new and draft]

26. Accessibility Stack
ASSISTIVE TECHNOLOGY
WEB APP IN BROWSER
OPERATING SYSTEM
PLATFORM API
ACCESSIBILITY API

27. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
27
• Complex in-browser behaviours
• Will fail for some users
• Custom UI components
• Often not fully accessible
This ‘toy’ language - Javascript

28. 28

29. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
29
Web Architecture

30. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
30
Client Server architecture
Browser HTTP Web Site

31. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
31
• Standard behaviours (eg W3C)
• Server provides static web page
• Browser / page may provide some modification
• Standard controls
• Supports a wide range of devices / browsers / AT
Web as platform
Ubiqutous web
Traditional Web

32. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
32
• Mostly just works
• Needs some attention to detail
• Eg. Alt attrib for images
• Improve AT user experience with ARIA
• Standard controls have good accessibility
• Eg. full keyboard access
• Solid support by AT vendors
Accessibility

33. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
33
• Complex non standard behaviours
• Server provides data or UI snippets at any time
• Code creates UI on the fly
• Highly customised UI and controls
• Required latest browsers / AT
Browser as Platform
“Ooh shiny” Web

34. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
34
• Often not accessible
• Requires enlightened developer attention
• Better to use accessible libraries / framewoks
• Must provide AT user experience with ARIA
Accessibility

35. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 35
Example: BBC iPlayer
http://www.bbc.co.uk/iplayer
W3C WAI Tutorial for carousels
http://www.w3.org/WAI/tutorials/carousels/

36. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
36
Hands on
EasyChirp

37. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
37
• Browse to http://www.easychirp.com
• Explore – notice is traditional web with links, some styled
• Dark theme option in footer
• Open F12 browser tools and select network
• Notice when click on a link you see a request/response
Hands on – EasyChirp.com

38. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
38
• Sign in (or pair with someone with a twitter account)
• Click on „Write Tweet‘ and notice no new network activity
• The section is opened with javascript intercepting the click
• We can assume it is accessible 
Hands on – EasyChirp.com

39. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
39
Hands on
Disclosure button

40. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 40
• Open ?:ModulesModule2-AccessibleWeb
SteveLee_WebAccessibilitySteveLee-AsTeRICS.zip
SteveLee-AsTeRICS
• Install NVDA_2015.2exe
• Use CapsLock key
• Exit NVDA with CapsLock + Q
• Copy gpii to C:Program Files (x86)
• Copy to Desktop
• aViewer
• DisclosureButton
• GPIIdemo
Software setup

41. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
41
• Open file: DisclosureButton.html
• let scripts run in IE
• We show/hide with css display: based on data-expanded
• We also change the icon using the same
• The icon is pure eyecandy and follows data-expanded
Notes

42. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 42
<div id="example">
<button id="button" data-expanded="false">Foo
<span id="icon">
</button>
<div id="content" data-hidden="true">
<p>Lorem ipsum dolar sit amet...</p>
</div>
</div>
HTML

43. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 43
div[data-hidden="true"]
{
display: none;
}
div[data-hidden="false"]
{
display: block;
….
}
CSS

44. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 44
if(…("data-hidden") == "true")
{
content.setAttribute("data-hidden", "false");
button.setAttribute("data-expanded", "true");
}
else {
content.setAttribute("data-hidden", "true");
button.setAttribute("data-expanded", "false");
}
Javascript

45. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
45
• Use NVDA to explore as described.
• Try with content shown and hidden
• Exit NVDA
AT user experience

46. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
46
• Run the Aviewer tool as described.
• Explore the button and content when open and closed
• Notice there is no clear link between the button and text
Accessibility API

47. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
47
• The button has good accessibility for free
• NVDA correctly ignores the content when it is hidden
• This is because screen readers ignore display:none
• However the user doesn‘t know the content has changed
• There is no relationship between the button and content
Notes on accessibility

48. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
48
We can do better with just a little ARIA
• Change data-hidden to aria-hidden
• Change data-expanded to aria-expanded
• These are then passed on to the AT
• Add aria-hidden=„true“ to the icon span to hide it from AT
• Add aria_controls to the button so AT knows the
relationship
Improvement

49. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
49
• Now NVDA announces expansion and collapse
• The content is better represented to AT
Outcome

50. 50

51. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
51
• Reach as many people as possible
• Give the best possible User experience (UX) to all
• Support as many devices as possible
• Varying capabilities
• Different screen sizes
• Support varying user access preferences
Accessibility with a small ‘a’

52. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
52
• Layout reflows to different screen sizes (and zoom)
• Resizable images (eg SVG)
• Change structure at size „break-points“
• Main navigation: hamburger -> horizontal buttons
• Pretty much mainstream now
• http://www.worldwildlife.org/
Responsive design

53. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
53
• Build up from minimum usable experience
• Add successive layers of enhancement when available
• Add bling when browser supports required features
• HTML -> CSS -> Javascript
Progressive Enhancement

54. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
54
• Reliance on Javascript in browser means no PE
• But PE is not just about javascript
• Need to reduce delays before seeing UI
• No SEO
• Eg. jQueryMobile uses mobile-first PE
• https://mobile.greyhound.com
• PE is back with Javascript on the server
• Send HTML page and then use same JS on client
PE in the wild

55. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 55
It boils down to…

56. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 56
Plethora of devices

57. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 57
Plethora of user preferences

58. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 58
Plethora of user preferences

59. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 59

61. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
61
• Standard controls – baked in a11y
• Custom UI elements – need a11y work
• ARIA enhances AT user experience
• PE and responsive design also enhance experience
Take home

62. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien
62

63. © 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 63