Products and web properties need to be accessible to everyone, including those with vision, hearing, cognitive, or motor impairments.

Accessible design is everyone’s responsibility, from information and user experience design, through to development, and on into help and support. It is about understanding the users’ journeys and proactively anticipating their needs.

To make sure products are accessible to everyone, follow the four principles of the Web Content Accessibility Guidelines:

  1. Perceivable: It can be perceived by at least one of a person’s senses.

  2. Operable: All interactions are operable through a variation of input methods.

  3. Understandable: Information and operation of the interface must be understandable.

  4. Robust: Content can be interpreted by a variety of assistive technologies and withstand changes in these technologies.

Structure and Hierarchy

Consistent, clear hierarchy helps people who navigate the page using links or headers. Use headings and titles to outline the page so people can see the structure and how sections relate to each other.

Be predictable with structure and use patterns and layouts familiar to people.

Content should be visible, so avoid putting important information inside accordions.

List by Level of Importance

Place items on the page in order of their level of importance so people don’t have to search for them.

Have a consistent hierarchy

Create and maintain a consistent hierarchy so that people can use alternative input methods to move through the page. Headings are in order without skipping levels.

Do

Use a consistent heading hierarchy: H1, H2, H3, H4

Don't

Use headings out of order: H2, H1, H3, H3

Text Scaling

Test the UI with color correction, magnification, and other accessibility settings to ensure the layout works with assistive settings.

Group Similar Items

Group items under titles or headings that clearly communicate the content of the group.

Do

Clear title with related items:
Veggies - asparagus, peas, carrots

Don't

Vague category with unrelated items:
Things - car tires, batteries, fetch eggs

Keyboard Navigation

Some people can’t use a mouse and navigate through applications using tools such as a keyboard, mouth wand, or eye tracking system. People should be able to navigate and use the product with a keyboard or screen reader. Make sure anything that can be seen by hovering with a mouse is also accessible to keyboard focus and screen readers.

When creating an application, check if a keyboard can be used to:

  • navigate
  • perform the same tasks as people who use a mouse
  • locate where you are on the page
  • tell where the keyboard focus is
Manage Focus

Keyboard focus follows the page as the eye would scan it. Focus travels top to bottom, left to right, moving from most to least important item. People can navigate applications using alternative input methods (D-pads, trackballs, keyboards, and navigation gestures), and the focus flows in a logical order.