HoP - WAI-ARIA

Transcript

1. Accessibility Introduction to WAI ARIA
2. Agenda What is ARIA? Why we need it? Role, State and property Rules Testing
3. Accessibility What is ARIA?
4. What is ARIA? ARIA, stands for Accessible Rich Internet Applications. It is a technology specification that was designed by the Web Accessibility Initiative (WAI) in the W3C and it is now a W3C recommendation. You could think of ARIA as a suite of attributes to be included in your usual HTML code. These additional semantics help Assistive Technologies to identify roles, properties, relationships, and states in your user interfaces.
5. How does ARIA work?
6. Front End practise
7. Why we need ARIA?
8. Why ARIA is needed 1. HTML is non semantic. e.g. div span 2. Unknown functionality of components. e.g. 5 stars rating in Performance 3. Unknown states and properties of components. e.g. slide in out menu 4. Unreported change of dynamic content. e.g. job search filter results 5. Custom widgets with dynamic interactions. e.g. Tabs, Modal, Accordion
9. Example - Tabs No information in the markup to describe the widget's form and function.
10. Example - Tabs - where ARIA comes in • Roles • Properties • States
11. Accessibility Tree
12. Screen reader demo VoiceOver + Safari
13. Role, State and Property
14. Screen reader users can quickly jump to that region of the page. role=”banner” (e.g. header) role=”navigation” (e.g. menu) role=”main” (the main content of the page) role=”complementary” (e.g. a sidebar) role=”contentinfo” ( e.g. footer) role=”search” role=”form” Role - Landmark
15. Landmarks demo
16. Code behind Semantic HTML
17. Role - Widgets Alert, Button, Link, Menu, Tab .... Tab A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. Tablist A list of elements, which are references to tab pan el ele ments. Tabpanel A container for the resources associated with a tab, where each t ab is contained in a tablist.
18. States ARIA States are more dynamic and are typically updated with JavaScript as a user interacts with UI. Screen readers are notified when these states change, and can announce these changes to users after an interaction takes place.
19. Property ARIA Properties often describe relationships with other elements, and for the most part, do not change once they’re set.
20. Reference
21. ARIA Rules
22. Rules of using ARIA #1 If you can use a native HTML element or attribute with the semantics of behavior you require already built into it, then do so.
23. Rules of using ARIA #2 Don't change native semantics, unless you really have to.
24. Rules of using ARIA #3 All interactive ARIA controls must be usable with the keyboard. All interactive widgets must be scripted to respond to standard keystrokes or keystroke combinations where applicable.
25. Rules of using ARIA #4 Don't use role equals presentation or aria-hidden = true on a visible focusable element. Using either of these on a focusable element will result in some users focusing on 'nothing'.
26. Rules of using ARIA #5 All interactive elements must have an accessible name.
27. Testing Tools
28. Testing with keyboard only
29. Browser addons - Wave
30. Browser addons - ARC
31. Automated A11Y testing A11Y issues can be found at build/test time through CI automation https://github.com/salesforce/sa11y https://github.com/nickcolley/jest-axe
32. Don’t fully rely on those tools
33. Tools - Assistive Technology VoiceOver + Safari JAWS + Internet Explorer/Chrome NVDA + Firefox/Chrome Microsoft Narrator
34. Things to remember ARIA is not changing the DOM ARIA is not changing the visuals ARIA is complement of HTML Screen Readers read markup, not CSS Encourage native semantics and focus on ARIA as gap-fill Test with real Assistive Technology
35. Learning ARIA
36. Learning resources https://www.w3.org/WAI/WCAG21/quickref/ https://a11ysupport.io/ https://romeo.elsevier.com/accessibility_checklist/ https://moritzgiessmann.de/accessibility-cheatsheet/ https://cheatography.com/jreiche/cheat-sheets/wai-aria-1-1/ https://www.accessibilityoz.com/videos/what-is-aria-and-why-use-it/ https://www.udacity.com/course/web-accessibility--ud891 https://developers.google.com/web/fundamentals/accessibility/a11y-for-teams
37. PageUp Design Principle
38. Thanks and Questions