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

Designers

1.4.10 Reflow (Level AA)

 

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

2.2.2 Pause, Stop, Hide (Level A)

 

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.

Designers

2.4.11 Focus Appearance (Level AA)

 

Make sure the area that receives focus stands out from the background. What you need to know As you tab through a webpage using the keyboard, a focus indicator visually lets you know where you are on the page. This success criterion requires the focus indicator to meet a minimum level of contrast and size. […]

Designers, Developers

3.2.6 Consistent Help (Level A)

 

If you have a help option, make sure it’s consistently available and in the same relative place on each page. This will make it easy to find as users navigate your website. What you need to know Access to help mechanisms may be provided directly on the page or may be provided by a link […]