Skip To main content

Understand your digital accessibility & compliance status | Request an audit

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.

Decorative shape at the bottom of the sections

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
  • 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...
  • 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...
  • Designers

1.4.12 Text Spacing (Level AA)

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

1.4.11 Non-text Contrast (Level AA)

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.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...
  • Designers

1.3.4 Orientation (Level AA)

Content should display in the orientation that works best for the user.
  • Designers
  • Developers

3.3.4 Error Prevention – Legal, Financial, Data (Level AA)

Provide ample opportunity for users to review and correct any potential errors, especially those that may have a big impact.
  • Designers
  • Developers

3.3.3 Error Suggestion (Level AA)

Make suggestions on how to fix form errors if an input error is automatically detected.
  • Designers

3.2.3 Consistent Navigation (Level AA)

Keep your navigation menu placement and order consistent throughout your website.
  • Designers
  • Developers

3.2.1 On Focus (Level A)

Nothing on a website should automatically change just because it receives focus.
  • Designers

2.4.5 Multiple Ways (Level AA)

There needs to be more than one way to find a web page within your website.
  • Designers

2.4.4 Link Purpose – In Context (Level A)

Write your anchor link text so it's clear to users what the linked page is about.
  • Designers
  • Developers

2.3.1 Three Flashes or Below Threshold (Level A)

Nothing on a webpage should flash more than three times in a second.
  • 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,...
  • Designers

2.2.1 Timing Adjustable (Level A)

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

2.1.2 No Keyboard Trap (Level A)

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...
  • Authors
  • Designers

1.4.5 Images of Text (Level AA)

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

1.4.4 Resize Text (Level AA)

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

1.4.3 Color Contrast (Level AA)

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

1.4.2 Audio Control (Level A)

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

1.4.1 Use of Color (Level A)

Color shouldn't be used as the only visual way to convey information or make an indication.
  • Authors
  • Designers

1.3.3 Sensory Characteristics (Level A)

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
  • Developers

1.3.1 Info and Relationships (Level A)

Structure your website so that content is read by a screen reader in the same way it's presented visually.
  • Authors
  • Designers

1.1.1 Non-text Content (Level A)

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