Best practices for accessibility
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.
- 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.
- Avoid inline styles, which might override custom settings that help user better read a page.
- Add labels to all fields, controls, cards, and images, but use only one method to label a field. Place labels above the fields that they describe.
- Ensure that the UI alerts users of dynamic changes visually and through Live ARIA.
- Provide meaningful error messages.Write
The password must contain at least 8 charactersrather than
This entry is invalid.
- Avoid timed events, which require complex configuration to be compliant with accessibility guidelines. Avoid hover and right-click events.
- Do not use link controls as buttons.
- Use visibility conditions to control the appearance of the form. Do not use controls in disabled mode.
- When providing helper text, avoid referencing the color, shape, or visual
location of a UI component.Write
Click the Submit buttonrather than
Click the blue button.
- Check if the user can navigate your design with keyboard only.
- Avoid key commands. Key commands can conflict with screen readers.
- Add paging to tables.
- Give links meaningful text.Write
Main pageinstead of
- For each on-click event, configure a keyboard alternative.
Screen organization guidelines
- Use headers and titles on layouts. Define headings through markup rather than formatting. Always configure a level one heading, and use header levels correctly.
- Limit the use of modal dialog boxes and overlays.
- Do not force landscape or portrait mode in mobile apps.
- Organize content on the screen and in the document object model linearly to
accommodate screen readers.If your UI includes a large conditional section, consider making the transition explicit by putting the conditional content in multiple assignment steps.
- Use responsive layouts. Layouts and forms that have fixed window sizes might cause problems for users who need to resize their screens.
- Do not use more than one main section on a page.
- Do not use tables to define areas on your page. Use tables only to present collected data.
- Use caution when introducing multiple icons. Ensure that the icons are properly labeled and can receive focus from the keyboard.
- Do not wrap text in images.
- Add meaningful alternative text and avoid reusing the same descriptive text for different resources.
- Avoid adding alternative text to unimportant or decorative elements. Unnecessary text crowds the feedback from assistive technology such as screen readers.
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.