Accessible design helps users with disabilities access the full range of your application's features. By following best practices for accessibility, you ensure that your application meets the industry standards for all types of users.
The following list includes guidelines that can help you design an accessible application:
- Review the Web Content Accessibility Guidelines (WCAG) Checklist, which is the primary source for meeting the industry standard for accessibility.
- Run the accessibility inspector to spot check your application. For more information, see Inspecting accessibility.
- Use responsive layouts. Layouts and forms that have fixed window sizes might cause problems for users who need to resize their screens.
- Avoid inline styles, which might override custom settings that help user better read a page.
- Add labels to all fields, controls, cards, and images.
- Notify users of dynamic changes by ensuring that the UI alerts users about the change of state visually and through Live ARIA.
- Organize content on the screen and in the document object model linearly to
accommodate screen readers.
Tip: If your UI includes a large conditional section, consider making the transition explicit by putting the conditional content in multiple assignment steps.
- When providing helper text, avoid referencing the color, shape, or visual
location of a UI component.
Click the Submit buttonrather than
Click the blue button.
- Do not force landscape or portrait mode in mobile apps.
- Provide meaningful error messages. Avoid generic messages such as
This entry is invalid.
- Do not wrap text in images.
- Use caution when introducing multiple icons. Ensure that the icons are properly labled and can receive focus from the keyboard. For more information, see Configuring actionable icon controls.
- Avoid timed events, which require complex configuration to be compliant with accessibility guidelines.
- Avoid key commands. Key commands can conflict with screen readers.
- Check if the user can navigate your design with keyboard only.
Color use guidelines
- Do not use color as the only indicator of a change of state. For example, if an error causes the field to display a red border, but does not produce any other indicators, the field is not accessible.
- Use a 4.5:1 contrast ratio for text against the background color.
- For meaningful icons, such as warning icon, use a 3:1 contrast ratio against the background color.
- For form fields, use a 3:1 contrast ratio against the background color and the border.