Vision

Screenreaders

Blind or visually impaired people often access internet sites and software using a tool called a screenreader. This software reads aloud the content of an interface, and provides additional feedback and controls for navigating these interfaces.

One of the most important things a developer can do to ensure their interface behaves properly with screenreaders, is to adhere to strict web standards for semantic documents and controls.

There are a huge number of specifications and documents on the web, and it can be hard to know where to start. A good place is to understand the WAI (Web Accessibility Initiative) Accessibility Principles.

See also various tools that will help you develop accessible applications TODO: link to tools page.

In general, here are a few guidelines that will improve screenreader access:

  • Use correct semantic HTML5 elements. HTML elements often carry meaning; using an element for an improper usage may confuse a screenreader and create and incorrect interpretation or behavior. See here.
  • Add role and aria attributes. These add additional semantics when built-in HTML5 elements are not sufficient. See here.
  • Properly label form elements. Form controls can be notoriously hard to manage when improprely labeled. Make sure each form control a label element properly associated with the for attribute.
  • Make sure keyboard navigation is possible. Navigating your interface with a keyboard is a good way to get a sense of how a screenreader will behave. Make sure you can Tab through all interactive elements of you interface in a logical order.

Color & contrast

Not all people have the same ability to see color. There are many forms of color blindness that effect vision in different ways. It is important to keep this in mind when designing with color.

When text is used on a colored background, a minimum contrast ratio is required to ensure the text is readable against the background color. For adherence to WCAG 2.0 AA standards, a minimum ratio of 4.5:1 is required for most text, and 3:1 for large text. See the WCAG recommendations here.

Some examples:

This text has a contrast ratio of 5.54:1. It's ugly, but acceptable.

This text has a contrast ratio of 3.26:1. It's pretty, but unacceptable.

The paragraphs above contain examples of acceptible and unacceptable contrast ratios. Incase you are unable to read it, the second example has a contrast ratio of 3.26:1, even though, for many readers, it would appear readable.

Also see the StackupUI color documentation for more details

Meaning & color

Color is often used to communicate meaning in everyday life. For example, in Western culture, green, yellow and red have associations with "go", "wait", and "stop", or "good", "ok", and "bad". It is ok to take advantage of these cultural meanings where appropriate. For some users, adding meaningful color may reduce to cognitive load required to comprehend your interface.

Do not, however, rely on color alone to communicate meaning. Consider combining color elements with meaningful shapes and labels to allow different users to comprehend meaning in various ways.

Images & video

Using images or video is a great way to add meaning to a document in a format other than text. An image, illustration or video can often serve to communicate a concept more succinctly and efficiently than a long block of text. This is especially true of individuals with cognitive differences, who may not be able to learn via "traditional" text based methods.

Alternative text & captioning

Keep in mind, however, that audio-visual media may be fully or partially inaccessible to some users. Consider, however, that people who are visually impaired (either permanantly, temporarily or situationally) will not be able to see images or video. In addition, visual media may not function properly due to device or bandwidth limitations.

Always provide alternative text descriptions or substitutes for visual media.

For images, this means a contextual description, caption or alt attribute describing the image in a meaningful way. For infographics or diagrams, consider providing an alternative text synopsis or interpretation.

For video, this means providing close captioning or a high quality transcript.