Design DocuWare

A range of resources for designers, developers

Get started

Principles

Disabilities

General Accessibility

Basics

Title

If possible, each screen should be supplied with a unique title and provided with headings that identify sections in the information hierarchy.

When people arrive on a screen, the title is the first piece of information they receive from assistive technology. To help people understand the product’s structure, unique titles should be created for each screen that briefly describes its contents or purpose.

Plain text

The user interface should not prevent users from selecting plain text on the screen. 

Many users rely on using selected text as input for text-to-speech (TTS) or for looking up translations.

Decorative Elements

Purely decorative images and other elements should be hidden from assistive technologies.

Making VoiceOver describe a purely decorative image and elements can waste time for users and add to their cognitive load without providing any benefit.

User abilities

Users should be able to:

  • zoom in up to 300% without problems

  • navigate most of the website using just a keyboard

  • navigate most of the website using speech recognition software

  • use most of the website using a screen reader (including the most recent versions of JAWS, NVDA, and VoiceOver)

Color

Contrast

Adequate contrast between the color of every single information-bearing element and its background should be assured.

Which UI elements need which levels of color contrast can be determined by categorizing them into two groups: information-bearing elements, and decorative or disabled elements.

Color independence

The User Interface should not rely solely on color to differentiate between objects or communicate important information.

If your app uses color to convey information, be sure to provide text labels or glyph shapes so color-blind users can also understand it.

Non-color indicators such as shape, line, text treatment, size, etc., should be used instead of changing only the component’s color.

Color independence should be checked during the design by using, for instance, the grayscale test. In addition, designers can turn a design into shades of gray to check if there is something that cannot be identified or if the difference between shades is sufficiently visible.

Color combinations

Designers should be aware of color blindness.

Many colorblind people find it difficult to distinguish blue from orange, for example, or red from green (and either red or green from grey). The usage of these color combinations as the only way to distinguish between two states or values should be avoided. Designers must rely on differentiation with shapes, patterns, additional titles, etc.

Problematic color combinations should be avoided:

  • Red & Green (the biggest ones to avoid)

  • Green & Brown

  • Green & Blue

  • Green & Gray 

  • Green & Black  

  • Blue & Gray

  • Blue & Purple

If the design truly calls for using problematic colors next to each other, Designers need to make sure there is a high contrast ratio between the two by, for instance, darkening one color and lightening the other to make the contrast more pronounced or playing with the saturation, or sliding the hues a little one way or another.

Color inversion

The correct response to Inverting Colors should be planned. 

Users can turn on Invert Colors when they prefer to view items on a dark background. Designers also need to own this experience and provide planned and controlled behavior.