Where do you go to look for guidance on creating accessible web components? This session gives a high-level overview of ARIA (Accessible Rich Internet Applications) and the Authoring Practices guide and examples of leveraging these design patterns in UCOP websites and applications to help with component accessibility.
The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) created a specification for Accessible Rich Internet Applications, or WAI-ARIA. The WAI-ARIA Authoring Practices document contains a section on Design Patterns and Widgets, which “demonstrates how to make common rich internet application patterns and widgets accessible by applying WAI-ARIA roles, states, and properties and implementing keyboard support.” At UCOP, the Web Application Engineering team has leveraged these ARIA design patterns to help create accessible components for websites and applications.
It is best practice to use native HTML elements or attributes whenever possible to take advantage of the existing browser support and native semantics already mapped to accessibility APIs. When it is necessary to create advanced components using a combination of HTML, JavaScript, and related technologies, these components should be created to be usable by users with disabilities, especially people who rely on assistive technologies such as screen readers and people who cannot use a mouse. ARIA markup enables authors to describe a user interface component for assistive technologies to interpret. The ARIA markup for role=”link” versus role=”button” will let an assistive technology user know whether the non-standard component is supposed to function like a link versus a button. Keyboard interactions for these components must also be handled properly.
Design patterns for seemingly simple components such as a Button, or a Checkbox for multi-select, or Radio Group for single-select components, can be combined as building blocks in complex components that may not traditionally look like checkboxes or radio buttons in the user interface. In this session, examples of ARIA markup and design patterns will be shown from the work of the Web Application Engineering team at UCOP.
The ARIA design patterns can also be leveraged as a reference tool during the design stage. Most component interactions can be mapped to these basic design patterns as building blocks. Complex components are composed of multiple design pattern building blocks. These design pattern building blocks can be called out on design mockups to clarify the interaction and ARIA roles, states, and properties needed for accessibility as well as the keyboard interaction before the component is built.