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