/
Web Content Accessibility Guidelines: Best Practices

Web Content Accessibility Guidelines: Best Practices

Owned by Soumya Batra
Last updated: Sep 11, 2024
5 min read

The WCAG are standards designed to make web content accessible to people with disabilities. We aim to ensure our websites are perceivable, operable, and understandable, for all users, including those with visual, auditory, physical, and cognitive impairments. Here are the full set of guidelines for reference.

 

WCAG Principles

13 Guidelines

WCAG Principles

13 Guidelines

Perceivable
(People must be able to find your content)

1.1 Text alternative

1.2 Time-based media

1.3 Adaptable

1.4 Distinguishable

Operable
(People must be able to use your website)

2.1 Keyboard accessible

2.2 Enough time

2.3 Seizures and Physical Reactions

2.4 Navigable

2.5 Input Modalities

Understandable
(People must be able to understand the contents of your website)

3.1 Readable

3.2 Predictable

3.3 Input Assistant

Robust
(Your website must be able to work with different assistive technologies)

4.1 Compatible

Different levels of conformance

The WCAG guidelines are organized into three levels of conformance: A, AA, and AAA. These levels represent different degrees of accessibility.

  1. Level A (Must do)
    The bare minimum of accessibility.

  2. Level AA (Should do)
    Everything in A plus a few additional requirements.

  3. Level AAA (Can do)
    Everything in A and AA plus a few additional requirements.

 

Guidelines and Success Criteria Checklist

1. Text

  • 1.4.1 Check Contrast Ratio (AA)

The visual presentation of normal text and images of text has a contrast ratio of at least 4.5:1.
Large Text (18 points or at least 14 points bold) has a contrast ratio of at least 3:1

WebAIM: Contrast Checker

  • 1.4.4 Text Size (AA)

WCAG doesn't specify a minimum font size, but for best readability, body text should be at least 12 points (pt), or around 16 pixels (px).
No text should be smaller than 9 pt (12 px).
Ensure text size is adjustable (use relative units like em or %).
Text can be manually magnified up to 200%

2. Color

  • 1.3.2 Color Independence (A)

Do not use color as the only means of conveying information. Any information that is conveyed by color should also be visually evident without color.

  • 1.4.11 Non-text Contrast (AA)

Ensure that non-text elements like buttons, links, and charts have a contrast ratio of at least 3:1 against adjacent colors.

 

3. Images, Videos and other media

  • 1.1.1 Text Alternatives for Non-Text Content (A)

Provide text equivalents for images, videos, and other non-text elements.
(Text alternatives must convey the same information and purpose as the non-text content.)
Provide different forms to confirm the content is human-operated for accessibility. (eg Audio, visual, spoken, etc)
Ensure that non-text content used for decoration or formatting can be ignored by assistive technology.

  • 1.2 Synchronized Alternative for Multimedia (A)

Provide transcripts for audio content
Provide Captions for videos

  • 1.4.2 Background noise (AA)

A mechanism is available to turn off background audio that plays automatically, without requiring the user to turn off all audio.

4. Navigation

  • 2.1.1 Keyboard Navigation (A)

All website content is navigable through a keyboard interface.
All content functionality is operable non-time-dependent through a keyboard interface, except where the task requires analogue, time-dependent input.

  • 1.3.3 Sequence of Information (A)

When the sequence of the content affects its meaning, that sequence can be programmatically determined, for the screen readers to follow.
Screenshot 2024-07-29 at 2.28.37 PM.JPG
Example

  • 3.2.3 Multiple ways of navigation (AA)

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

For example, a homepage with links to all pages, search functionality, site map, table of contents, Primary and secondary navigation menus, Repetition of important links in footer etc.

  • 3.2.3 Predictable Navigation (AA)

Presenting content in a predictable order from web page to web page, and by making the behaviour of functional and interactive components predictable.

For eg, ensuring consistent placement of elements like buttons, navigation bar, search bar, help options, and contact options across all web pages.

5. Input Form

  • Mistake correction

2.5.1 (A) If an input error is detected, the error is identified and described to the user in text.
2.5.2 (AA) If an input error is detected and suggestions for correction are known and can be provided without jeopardizing the security or purpose of the content, the suggestions are provided to the user.

  • 1.3.5 Identify Input Purpose (AA)

Provide an attribute to autocomplete common inputs such as name and email address.
(Autocomplete works as a combination of browser functionality from information the browser has saved from previous inputs and your form fields' ability to allow autocomplete.)

Code example, <input type=”text” autocomplete=”street-address”>

Information required to understand and operate form content does not rely on the shape, size, visual location, or orientation of components.

6. Interactive components and Animation

  • 2.3.1 Seizures and Physical Response (A)

Content does not flash 3+ times/second and users can stop content from blinking or flashing excessively.

  • 2.5.5 Target size (AA)

The size of the target for pointer inputs (such as buttons, links, etc) should be at least 24 by 24 CSS pixels. Ensure targets meet a minimum size or have sufficient spacing around them. (explained in the image below)
Screenshot 2024-07-29 at 2.24.56 PM.JPG
Screenshot 2024-07-29 at 2.25.07 PM.JPG

  • 1.4.11 Non-text Contrast (AA)

The contrast ratio must be at least 3:1 for user interface components (links, buttons, widgets) and graphics (charts, diagrams, illustrations, etc.)

7. Web pages

  • 1.3.4 Orientation (AA)

Content can be displayed in the preferred orientation — portrait or landscape

  • Structure and Semantics (AA)

(1.3.6) Identify the purpose for assistive technologies by writing descriptive text for different regions of a page, icons, and links. Use the ARIA Landmark guide to add attributes to HTML elements.

code example <main>The main content of the page goes here.</main>\

(4.1) Make your website usable by different technologies by using semantic HTML as much as possible.

  • 1.4.10 Responsive Design (AA)

Use responsive design to ensure the website's layout and content adapt to different screen sizes and devices. Employ flexible grids, images, and CSS media queries for a consistent and user-friendly experience on desktops, tablets, and smartphones.

  • Accessibility Feedback (AA)

Users should have a way to report accessibility issues with your website.

 

8. Useful Resources and tools

 

Related content