Visual Accessibility Design

The Web Content Accessibility Guidelines (WCAG) identifies four guiding principles of accessibility - perceivable, operable, understandable and robust. This article will outline several strategies to achieve each accessibility principle.

Perceivable

Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

Never use colour alone to signify or distinguish information.
Colour should never be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Red and greens in particular are often indistinguishable to people with colourblindness. These colours are often used as stand-ins for correct and incorrect, stop and go, etc. Provide a text label and/or icon to distinguish this meaning is essential.

When designing link styles, don’t exclusively colour to distinguished hyperlinked words and phrases - also use underlining and/or substantial differences in font weight

Background colours, graphics and sounds should not interfere with the content
Visual content should be easily distinguishable from extraneous stylistic visual elements. For audio content, background sounds should not obscure the message.

Make sure there is an appropriate amount of contrast between text and background colours.
Follow WCAG colour contrast guidelines. Small text should have a contrast ratio of least 4.5:1 against the background. Large text should have a contrast ratio of at least 3:1. Elements in a disabled state can ignore ratio requirements.

There are many colour contrast checkers available online, including https://webaim.org/resources/contrastchecker/ and https://marijohannessen.github.io/color-contrast-checker/. Stark is a colour blindness simulator and contrast checker plugin for XD that allows you quickly check contrast and simulate 8 different types of colour blindness.

When it comes to contrast, it’s important to remember that these are guidelines, not hard and fast rules. Size, content and context can change how something is perceived so your common sense is the most valuable tool you can use.

Operable

Principle 2: Operable - User interface components and navigation must be operable.

All selectable elements require clear focus states. This includes buttons, input fields and links, as well as showing the current card in card-based layouts.
Also consider the padding and spacing of these elements, to avoid the potential for error of clicking on the wrong item. The target size for pointer inputs should be at least 44x44px unless it is in a sentence or block of text or it is also available through an equivalent link/control on the same page that fulfils this size requirement.

The content should be able to be fully accessed and operated through a keyboard-only interface.
Adding a ‘skip to content’ button in the header enables users to skip to content areas, so they don’t have to tab through the entirety of navigation to reach the main content, or so that they can more quickly reach the navigation options. This can be either hidden until the user begins tabbing, or always visible.

Do not design content in a way that is known to cause seizures.
Web pages should not contain anything that flashes more than three times in any one second period.

Give users second chances where possible.
Confirmation screens, error alerts or warnings are integral to overall experience design.
Users with motor impairments may not able to control the mouse are keyboard well. In addition to second chance features, consider how you can design page to reduce the potential for error. Adding more generous spacing and using larger buttons and links can help. Avoid crowding content together.

Understandable

Principle 3: Understandable - Information and the operation of user interface must be understandable.

Elements on the page should behave in a way that is predictable and expected to the user.
Navigation should be consistent and predictable throughout the contrast of the web site.

Consider the use of appropriate iconography to aid people with different cognitive levels, or who are not using the app in their native language.
Using icons to represent words or concepts instead of text can aid people with impaired communication. However, these should also have descriptive alt tags or visible labels so that they can read by assistive technologies

Consider the readability of your copy.
Avoid all caps labels and justified text as they reduce legibility.
Language used should be as easy to understand as possible, and as simple and concise as is appropriate. Make sure link text makes sense out of context. Avoid vague labels like ‘click here’.
Consider using a progressive disclosure of information to avoid information overload.

Robust

Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Ensure that your designs will be usable with the aid of assistive technologies.
Some assistive technologies such as eye gaze software or onscreen keyboards block part of the screen. The layout should not require the entire screen to be viewed at once to understand information. This is primarily executed in development, rather than in your designs.