Accessibility Introduction to WAI ARIA

Agenda What is ARIA? Why we need it? Role, State and property Rules Testing

Accessibility What is ARIA?

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.

How does ARIA work?

Front End practise

Why we need ARIA?

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

Example - Tabs No information in the markup to describe the widget's form and function.

Example - Tabs - where ARIA comes in ● Roles ● Properties ● States

Accessibility Tree

Screen reader demo VoiceOver + Safari

Role, State and Property

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

Landmarks demo

Code behind Semantic HTML

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.

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.

Property ARIA Properties often describe relationships with other elements, and for the most part, do not change once they’re set.

Reference

ARIA Rules

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.

Rules of using ARIA #2 Don't change native semantics, unless you really have to.

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.

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'.

Rules of using ARIA #5 All interactive elements must have an accessible name.

Testing Tools

Testing with keyboard only

Browser addons - Wave

Browser addons - ARC

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

Don’t fully rely on those tools

Tools - Assistive Technology VoiceOver + Safari JAWS + Internet Explorer/Chrome NVDA + Firefox/Chrome Microsoft Narrator

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

Learning ARIA

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

PageUp Design Principle

Thanks and Questions