Checking Web Pages for WCAG Compliance

November, 6th 2024 2 min read

Accessibility ensures that digital products can be used by everyone, including people with disabilities. The Web Content Accessibility Guidelines (WCAG) provide standards for making web content more accessible. This guide outlines practical steps, tools, and best practices for evaluating WCAG compliance.

Accessibility Checklist Based on WCAG Guidelines

WCAG Compliance Levels

WCAG defines three levels of accessibility:

A — Basic: Minimum requirements to ensure assistive technologies function correctly.
AA — Recommended: Required for most public-sector sites; improves usability significantly.
AAA — Advanced: For specialized content; rarely implemented site-wide.

Each guideline includes success criteria, such as 1.4.4 Resize Text, defining precise, testable requirements.

Content

Content quality strongly affects accessibility.

Use clear, concise language written for an 8th‑grade reading level.
Avoid idioms, metaphors, and culturally specific phrases.
Ensure button and link text is descriptive (“View Report” instead of “Click here”).
Align text left (LTR) or right (RTL). Avoid full justification.

Global Code Practices

Validate HTML to ensure consistent interaction with assistive technologies.
Add a correct <html lang=""> attribute.
Ensure each page has a unique and meaningful <title>.
Do not disable viewport scaling; allow users to zoom.
Use semantic HTML tags such as <nav>, <main>, <header>, <footer>.
Maintain logical DOM order and avoid unnecessary tabindex values.
Avoid using autofocus to prevent unexpected focus shifts.
Provide session timeout extensions when required.
Avoid using the title attribute except for non-essential hints or <iframe> descriptions.

Keyboard Accessibility

Keyboard users—including users of assistive technologies—must be able to navigate easily.

Ensure visible focus styles for all interactive elements.
Verify that focus order matches the visual flow.
Prevent focus on hidden or irrelevant elements (e.g., inactive modals).

Images

Follow WCAG’s non-text content rules:

Every meaningful <img> must have an accurate alt attribute.
Decorative images should have an empty alt="".
Provide full textual descriptions for charts, diagrams, and maps.
Include visible text from images containing text (e.g., logos).

Headings

Headings convey structure.

Use headings semantically, not just for styling.
Only one <h1> per page; it should describe the page’s purpose.
Nest headings in logical order without skipping levels.
Use CSS classes for visual styling rather than incorrect heading levels.

Lists

Use semantic list elements (ol, ul, dl) when displaying grouped or sequential content.

Controls & Interactive Elements

Use <a href=""> for navigation links, even in SPAs.
Ensure links are visually distinguishable (underline or strong contrast).
Test links using keyboard-only navigation and screen readers.

Conclusion

WCAG compliance is an ongoing process rather than a one‑time task. While no site can be “100% accessible,” following these guidelines dramatically improves usability for all users. Use automated tools, manual testing, and expert audits to maintain accessibility over time.