Designers

Designing for Accessibility

An accessible website begins with an accessible design. Considerations such as how and when to use color, color contrast, the style of links, and how your content is organized all impact whether a user can easily navigate your content. This is particularly important for people who use only keyboard navigation or assistive technology such as screen readers.

Getting Started — Key WCAG Success Criteria for Designers

Many WCAG criteria address accessible design. Here are six of the more common design considerations that can significantly impact the accessibility of your website and other digital assets.

Ensure there’s enough color contrast. 

Website designers recognize that low contrast can make it very difficult to read the words on a page. It’s even harder to read when the text is small or the font very thin. And if you have low vision, insufficient contrast can make it nearly impossible to make out the words on a Web page.

WCAG Success Criterion 1.4.3
Write anchor link text that has clear meaning. 

Links should be visually distinct, descriptive, concise and unique. Never use “click here” or any variation of that. Link text needs to inform the site visitor what they will find if they click on the link. And you never need to use the word “link” in your link text. Screen readers announce when the user comes across a link.

WCAG Success Criterion 2.4.4
Design labels and headings that offer clear direction.

A design that is logical and that has a nested heading structure is essential for accessibility. Descriptive headings help users find specific content and orient themselves in terms of where they are on a Web page and on the overall website. Visual headings also represent the content structure, and describe the content that follows them.

WCAG Success Criterion 2.4.6
Use alt text for all non-text content. 

Designers ensure that images, graphics and other non-text information have alt text descriptions that clearly and succinctly describe their meaning. Alt text also serves the purpose of allowing screen readers to ignore images that are are decorative and convey no meaning.

WCAG Success Criterion 1.1.1
Make sure tabs flow in a logical sequence.

The reading order should be logical and intuitive with clear focus indicators. People with mobility impairments who use keyboards only benefit from a logical, usable focus order. Reading also flows better for those who use assistive technology such as a screen magnifier, as they may interpret a field in the wrong context if the focus order isn’t logical.

WCAG Success Criterion 2.4.3
Provide a way to correct input mistakes.

Website visitors benefit from feedback on input errors they make. It’s easy to make errors filling out online forms, so it’s critical to design ways to alert users to input mistakes they’ve made and how to correct them.

WCAG Success Criterion 3.3.3

More WCAG success criteria for designers

Authors, Designers

1.1.1 Non-text Content

 

Make sure images and other non-text elements on your website are accessible by including meaningful text alternatives (alt text).

Authors, Designers

1.3.3 Sensory Characteristics

 

Write clear instructions that incorporate multiple senses. No instructions should rely solely on the ability to perceive shape, size, visual location, orientation, or sound.

Designers

1.4.1 Use of Color

 

Color shouldn’t be used as the only visual way to convey information or make an indication.

Designers

1.4.10 Reflow

 

No loss of content or functionality should occur on mobile devices at 320 pixels width. No horizontal scrolling should be necessary unless content cannot be resized effectively.

Designers, Developers

1.4.11 Non-text Contrast

 

Make sure you have a minimum 3:1 color contrast ratio for user interface components and states and graphical objects that convey meaningful information.

Designers

1.4.12 Text Spacing

 

No loss of content or functionality should occur if the user adjusts a line, word, or letter spacing.

Designers

1.4.2 Audio Control

 

Users must have a way to pause or stop any audio that automatically plays for more than three seconds.

Designers

1.4.3 Color Contrast

 

Text and images of text should have sufficient contrast so they can be read by people with low vision.

Designers, Developers

1.4.4 Resize Text

 

All text on your website should be able to be resized up to 200% without any loss of content or functionality on your website.

Authors, Designers

1.4.5 Images of Text

 

Don’t use images of text on your website except where absolutely necessary or for branding purposes, for example your logo.

Designers, Developers

2.1.2 No Keyboard Trap

 

Keyboard-only users must be able to navigate to and from all parts of a website. No mouse should be necessary to move away from any element of a website.

Designers

2.2.1 Timing Adjustable

 

Users should be able to complete tasks without unexpected changes in content or context that are a result of a time limit.

Designers

2.2.2 Pause, Stop, Hide

 

Moving, blinking, scrolling, or auto-updating content that starts automatically and lasts more than five seconds must provide the ability for the user to pause, stop, or hide it.