It’s Accessibility and Usability working together.

1. Using WAI-ARIA & HTML5:
Techniques to solve accessibility
problems
It’s Accessibility and Usability working together
Rodrigo Castilho aka RODCAST
Senior Front End Engineer
@rodcast
12/12/2013
/1

2. A web without limits
/2

3. Sad But True
/3

4. I feel your pain
Blind and visually impaired make up 285,000,000 people
according to the World Health Organization (June 2012)
with 39,000,000 categorized as legally blind and the
remaining 246,000,000 visually impaired. Deaf and
hearing impaired make up 275,000,000 (2004) in the
moderate-to-profound hearing impairment category.
/4

5. Why is this important?
/5

6. You're being watched
"Companies that do not consider accessibility in their Web
site or product development will come to regret that
decision, because we intend to use every tool at our
disposal to ensure that people with disabilities have equal
access to technology."
Thomas E. Perez, current U.S. Secretary of Labor
/6

7. Come on
•
Improve your job, your business, your life.
• To be a different company and prevent lawsuits.
• High accessibility is effective SEO.
• Stop making excuses for not doing it.
/7

8. Come on
•
Improve your job, your business, your life.
• To be a different company and prevent lawsuits.
• High accessibility is effective SEO.
• Stop making excuses for not doing it.
/8

9. Come on
•
Improve your job, your business, your life.
• To be a different company and prevent lawsuits.
• High accessibility is effective SEO.
• Stop making excuses for not doing it.
/9

10. Come on
•
Improve your job, your business, your life
• To be a different company and prevent lawsuits.
• High accessibility is effective SEO.
• Stop making excuses for not doing it.
/ 10

11. Checklist & Quick tips
(Perceivable, Operable,
Understandable and Robust)
WCAG 2.0 & Section 508
/ 11

12. WCAG 2.0, Section 508 and the Laws
• WCAG 2.0
Success Criteria Levels: A, AA, AAA
http://www.w3.org/WAI/intro/wcag.php
• Section 508
U.S. Department of Health & Human Services
http://www.hhs.gov/web/508/accessiblefiles/checklists.html
• Americans with Disabilities Act
http://www.dol.gov/dol/topic/disability/ada.htm
/ 12

13. /01
Perceivable
13

14. Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by
assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.
/ 14

15. Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by
assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.
/ 15

16. Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by
assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.
/ 16

17. Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by
assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.
/ 17

18. /02
Operable
18

19. Operable
• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.
/ 19

20. Operable
• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.
/ 20

21. Operable
• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.
/ 21

22. Operable
• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.
/ 22

23. /03
Understandable
23

24. Understandable
• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.
/ 24

25. Understandable
• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.
/ 25

26. Understandable
• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.
/ 26

27. /04
Robust
27

28. Robust
• Maximize compatibility with current and future user tools.
/ 28

29. Stewie Griffin
Accessibility with steroids…
/ 29

30. WAI-ARIA
/ 30

31. What’s it?
• WAI = Web Accessibility Initiative
• ARIA = Accessible Rich Internet Applications
/ 31

32. How are divided?
• Roles
• Abstract
• Widgets
• Document Structure
• Landmark
• States and Properties
• Managing Focus
/ 32

33. How are divided?
• Roles
• Abstract (ex.: Abstract roles are used for the ontology!?!?)
http://www.w3.org/TR/wai-aria/roles#abstract_roles
• Widgets
• Document Structure
• Landmark
/ 33

34. How are divided?
• Roles
• Abstract
• Widgets (ex.: alert, button, dialog, menuitem, progressbar, scrollbar, tab, tooltip)
http://www.w3.org/TR/wai-aria/roles#widget_roles
• Document Structure
• Landmark
/ 34

35. How are divided?
• Roles
• Abstract
• Widgets
• Document Structure (ex.: article, directory, heading, list, math, presentation)
http://www.w3.org/TR/wai-aria/roles#document_structure_roles
• Landmark
/ 35

36. How are divided?
• Roles
• Abstract
• Widgets
• Document Structure
• Landmark (ex.: application, complementary, main, navigation, search)
http://www.w3.org/TR/wai-aria/roles#landmark_roles
/ 36

37. How are divided?
• States and Properties (ex.: aria-* / autocomplete, haspopup, valuemax)
http://www.w3.org/TR/wai-aria/states_and_properties
• Managing Focus
/ 37

38. How are divided?
• States and Properties
• Managing Focus (ex.: combobox, menu, manubar, tree, treegrid, tablist)
http://www.w3.org/TR/wai-aria/usage#managingfocus
/ 38

39. Screen Reader
• NVDA (NonVisual Desktop Access)
• JAWS and Window Eyes (Windows)
• VoiceOver by Apple (iOS)
• ORCA (Linux)
• ChromeVox by Google (Chrome Browser)
See more: http://en.wikipedia.org/wiki/List_of_screen_readers
/ 39

40. Companies that has a dedicated
Accessibility team
Google, Apple, Yahoo!,
Facebook, Twitter, Mozilla, Microsoft, Adobe,
Paypal, eBay, WordPress, Nokia, IBM, SAP
/ 40

41. Reference list: Books
Pro HTML5 Accessibility: Building an Inclusive Web
By: Joshue O Connor
It’s available on Amazon: http://amzn.com/1430241942
/ 41

42. Reference list: Books
AccessAbility: A Practical Handbook on Accessible Graphic Design
By: RGD Ontario
It’s free to anyone interested: http://goo.gl/TnWFaH
/ 42

43. Reference list: Links
http://www.w3.org/WAI/training/
http://training.section508.gov/
http://a11yproject.com/
http://www.accessiq.org/
http://oaa-accessibility.org/
https://webaccessibility.withgoogle.com/
http://yaccessibilityblog.com/library/
http://msdn.microsoft.com/en-us/windows/bb735024.aspx
https://developer.mozilla.org/en-US/docs/Web/Accessibility/
http://www.w3.org/WAI/WCAG20/glance/Overview.html
http://www.hhs.gov/web/508/accessiblefiles/checklists.html
https://chrome.google.com/webstore/detail/accessibility-developer-t/
fpkknkljclfencbdbgkenhalefipecmb
/ 43

44. Don’t forget
If it’s important to you, you will find a way. If not,
you’ll find an excuse.
Author Unknown
/ 44

45. Homer Simpson
WOOHOO!!! I hope I haven't forgotten anything.
/ 45

46. Thank You.