Web Content Accessibility Guidelines: Best Practices

Owned by Soumya Batra
Last updated: Sep 11, 2024
4 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

https://webaim.org/resources/contrastchecker/

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

4. Navigation

  • 2.1.1 Keyboard Navigation (A)

  • 1.3.3 Sequence of Information (A)

Screenshot 2024-07-29 at 2.28.37 PM.JPG
Example

  • 3.2.3 Multiple ways of navigation (AA)

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)

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

  • 1.3.5 Identify Input Purpose (AA)

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

6. Interactive components and Animation

  • 2.3.1 Seizures and Physical Response (A)

  • 2.5.5 Target size (AA)

Screenshot 2024-07-29 at 2.24.56 PM.JPG

  • 1.4.11 Non-text Contrast (AA)

7. Web pages

  • 1.3.4 Orientation (AA)

  • Structure and Semantics (AA)

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

  • 1.4.10 Responsive Design (AA)

  • Accessibility Feedback (AA)

 

8. Useful Resources and tools