Accessibility
All components follow the WAI-ARIA authoring practices guidelines.
They handle the implementation details related to accessibility, including aria
and role
attributes, focus management, and keyboard navigation. This makes our components use as-is in most contexts and rely on functionality to follow the expected accessibility design patterns.
WAI-ARIA
WAI-ARIA, published and maintained by the W3C, specifies the semantics for many common UI patterns that show up in our components. This is designed to provide meaning for controls that aren’t built using elements provided by the browser. For example, if you use a div
instead of a button
element to create a button, there are attributes you need to add to the div
in order to convey that it’s a button for screen readers or voice recognition tools.
In addition to semantics, there are behaviors that are expected from different types of components. A button
element is going to respond to certain interactions in ways that a div will not, so it’s up to the developer to reimplement those interactions with JavaScript. The WAI-ARIA authoring practices provide additional guidance for implementing behaviors for various controls used in out components.
Accessible Labels
With many built-in form controls, the native HTML label element is designed to provide semantic meaning and context for corresponding input elements. For non-form control elements, or for custom controls like those provided by our components, WAI-ARIA provides a specification for how to provide accessible names and descriptions to those controls.
Where possible, components include abstractions to make labelling our controls simple. Ultimately it’s up to you to provide those labels so that users have the proper context when navigating your application.
Keyboard Navigation
Many complex components, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. We provide basic keyboard support in accordance with the WAI-ARIA authoring practices
Focus Management
Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with an element and changes occur, it’s helpful to move focus with the interaction so that the next tab stop is logical depending on the new context. For screen reader users, moving focus often results in an announcement to convey this new context, which relies on proper labelling.