Accessibility

Definition
Make sure those of us with poor eyesight will be able to see your application as well.
icon of head with squinting eyes
Accessibility

How does it work?

With a few simple techniques you can make your application a lot better visible to people with poor or no eyesight.

Examples

These examples are web-based

Try to solve the issues using semantic HTML. But if that's not possible, add ARIA (Accessible Rich Internet Applications) constructs.

  • Low contrast text: make sure your text contrasts with its background. Online contrast checker, More information
  • Missing alternative text: add an alt attribute to every img tag that is not purely decorative. The alt text describes the image to the person that can't see it. If no text is needed, create an empty alt-tag ("")
  • Empty links and buttons: Achor (a) tags without href or title attribute. Buttons without text. These do not tell the visually impaired person what happens when they click on them.
  • Missing form labels: It's best to wrap each input element in a label element, or link the label to the input using a for attribute.
  • Missing document language: Set the language of the document: <html lang="en"> (see this document for language codes)

General examples

  • Make the design keyboard-friendly by ensuring it can be navigated through using the tab key.

When should you use it?

  • Always, unless you're sure that all of your users have excellent eyesight

Links

Credits

  • Using information from "Easy Accessibility Wins: Better Accessibility in Five Minutes or Less", by Ashleigh Lodge