AccessibleExperiences

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Concepts/Developer/Accessibility/Experiences" />

Creating an accessible web application or web page

When designing an application or a web page, keep in mind that the easiest way to make it accessible is to maintain a consistent and compliant document structure. The following steps help to design an accessible user experience:

• Decompose UI to parts and identify components, variants and behaviors to use
• define the usage of headings and landmarks
• verify the usage of color and contrast to convey information
• ensure tab order and arrow key navigation is consistent with DOM structure and ARIA roles
• specify labels, especially for components without textual information (e.g. icon only buttons) and for containers (lists, toolbars and so on)
• specify texts for state change announcements (error messages, confirmations, dynamic UI changes, ...)
• identify UI parts that appear on hover or focus then specify keyboard and screen reader interaction with them. Keep in mind that screen readers and in most cases also touch devices do not support hover state.
• list cases when focus needs to be moved programmatically (if parts of the UI are appearing/disappearing or other cases)
• list cases when focus needs to be trapped in sections of the UI (for dialogs, popups or hierarchical navigation)
• when extending existing functionality, think about how it fits into the current experience with regards to discoverability, interaction, keyboard navigation and screen reader navigation
• in your designs, cover High contrast and Zoom and reflow scenarios