Refine By

Accessibility 101

✔️ Color and contrast

Is UI conveyed through means other than color? Color doesn’t translate perfectly across cultures or abilities. You should also consider using text, shapes, and textures to communicate information.

Does text meet minimum contrast ratio requirements? When users have dimmed displays or limited vision, higher contrast makes seeing the screen’s content much easier.

✔️ Feedback

Do you provide feedback for user interactions? Feedback communicates the results of interactions. This will allow users to understand what has been done and what needs to be done next. For example, form controls should have appropriate validation/error messages, and actions with significant consequences should have confirmation dialogues.  Communication is key!

✔️ Hierarchy and order

Can users navigate a page? When scanning a page for information, users rely on visual hierarchy: important things at the top, related items grouped together, and headers summarizing content. Essential elements include:

  • A page title.
  • Headers in a logical structure.
  • Visual order that matches reading order.

Can screen readers interact with the app? Ideally, there should be a linear, logical order for all users and assistive technologies to navigate your UI.

Is there a logical order for keyboard navigation? Users with limited vision and mobility rely on keyboard focus to navigate pages, and the order of navigation should also reflect the desired visual order.

✔️ Labels

Do elements have labels? Text labels not only clarify the purpose of elements and provide instructions to users. They also help screen readers provide the context of the elements.

Does all non-text content (media, figures, tables) have alt text? Screen readers automatically announce an image/video, but specifying alternative text and captions provide a description. Additionally, in some cases when media can’t load (i.e., poor internet connection), alt text can be useful for all users.

Are UI elements labelled with accessible names for screen readers? An accessible name is a short, descriptive text string that a screen reader uses to announce a UI element, and they’re especially necessary for interactive UI elements without text, such as text boxes or buttons with icons. While icons are great because they’re universal across languages, not everyone can see them!

✔️ Scalable layout

Can your layout accommodate zoom? If users choose larger font options, zoom, or use other assistive technology, your UI should adjust appropriately. You don’t want your UI to overlap or hide other components.