Web Accessibility Initiative’s Accessible Rich Internet Applications or simply WAI ARIA is a suite of web standards developed by W3C’s ARIA Working Group. WAI ARIA provides a set of attributes called roles, states and properties that can be used by content authors to make the modern digital websites and applications accessible. Because the modern websites and applications contain dynamic content and advanced components, users who cannot use mouse and those depend on screen readers cannot interact with these components. WAI ARIA is specifically useful to address these problems.
Content on the page may change because of user interaction or depending on the time. A stock ticker continuously changes the content on the page. An advanced web component such as tab panel, a tree grid will not provide sufficient information for screen reader user to understand and cannot be interacted by keyboard alone. WAI ARIA also bridges the gap that HTML or other markups cannot share with screen readers. E.g. HTML does not have any element or attribute that can inform a tab or its selected/ not selected state to the screen reader user. WAI ARIA have roles, states and properties to serve this purpose.
WAI ARIA gives an opportunity to add attributes to these content and components that makes them usable by screen reader and keyboard only users.
WAI ARIA provides
- Roles to describe the type of widget presented, such as “menu”, “treeitem”, “slider”, and “progressmeter”
- Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
- Properties to describe the state widgets are in, such as “checked” for a check box, or “haspopup” for a menu.
- Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page
- Properties for drag-and-drop that describe drag sources and drop targets
- A way to provide keyboard navigation for the Web objects and events, such as those mentioned above.
What will you learn?
This tutorial teaches you the basics of WAI ARIA roles, states and properties, forms and browse mode in the first module. In the second module we will specifically concentrate on testing some advanced components that are built with WAI ARIA authoring best practices.