Accessibility

Accessibility Best Practice

• Don’t refer to visual elements in copy (e.g. click the pink button).

• Don’t use left/right/above/below (e.g. tap the button to the left).

• Explain things in a clear and understandable way.

• Don’t put important information below a CTA.

• Make sure to clarify when a text field is mandatory.

• Use unambiguous, clear CTAs.

• Don’t rely on formatting like bold and italic for meaning.

• Emojis rarely improve the user experience 👎 so use infrequently.

• Read text out loud to check it feels clear, conversational, and would sound right to someone using a screen reader.

• Be aware of unconscious bias; avoid discriminatory language and ableism.

• When user testing, make sure the group is diverse (gender, educational background, abilities) to see if your product is accessible.

Alt Text

Alt text is a text element in a HTML document that gives information about the contents of functional visual elements (an image or an icon). It is hidden in the code by developers and read by screen readers. The goal of alt text is to provide information that, when presented to the user, conveys the same function or purpose as auditory or visual content. Essentially it helps ensure the same experience for everyone!

• Alt text is needed for every visual element that has informative value (if things are purely decorative you don’t need it).

• We need alt text for all functional icons (e.g. basket, share, print, my account, notifications).

• We don’t need alt text if the icon is accompanied by the written descriptor or the information is repeated elsewhere on the page.
  
  

Tips:

• Think functional instead of visual, e.g. a house icon that takes you back home, have ‘return to home’ rather than ‘house’, or a cogwheel for settings, have ‘settings’ not ‘cogwheel’.

• Don’t overthink the tone of voice; the aim is to be clear and concise, fast to read and easy to understand.

• Eliminate unnecessary irrelevant details; choose carefully depending on the context.

• Avoid age-related, racial and other personal attributes, except when it’s important for context.