What is WCAG?

WCAG, or Web Content Accessibility Guidelines, is an international standard developed by the W3C (World Wide Web Consortium). Its goal is to ensure that websites and digital content are accessible to all users, including people with disabilities.

The current version, WCAG 2.1, builds on previous versions and includes additional recommendations for mobile devices and users with cognitive or low-vision impairments.

Four principles of WCAG

WCAG is built on four core principles, often remembered using the acronym POUR:

Perceivable

Information must be presented in ways that users can perceive, regardless of their sensory abilities. This includes providing alternative text for images and ensuring that content is accessible with screen readers.

Examples:

  • Provide text alternatives for any non-text content;
  • Provide an alternative form of CAPTCHA that outputs the CAPTCHA code as audio;
  • Provide captions and transcripts that can be read by a screen reader, braille reader for audio and video;
  • Provide extra audio descriptions when the video audio is insufficient to describe what is happening on the screen;
  • Use heading tags to establish the hierarchy of the content;
  • Create responsive content: users should not be locked into a specific view, they should be able to rotate their device between landscape and portrait;
  • Have sufficient contrast between text colour and backgrounds;
  • Use both colour and icons to show error and success messages;
  • Background audio should be 20 decibels quieter than speaking voices not to interfere with dialogue;
    Operable

    User interface components and navigation must be usable. For example, all functionality should be accessible via a keyboard, and content should avoid designs that could trigger seizures.

    Examples:

    • Make all functionality available from a keyboard;
    • Users can open and close modals and pop-ups without the use of a mouse or touchpad;
    • All website visitors need to be given enough time to read and use the content of the page;
    • Give a warning message before a user is going to be logged out due to inactivity;
    • Give the option to add more time when performing time sensitive actions;
    • Add pause/stop icons to a carousel that auto plays;
    • Do not design content in a way that is knowns to cause seizures, avoid animations that flash more than 3 times per second;
    • Provide ways to help users navigate, find content, and determine when they are;
    • All pages should have a title relative to the content on the page;
    • Use breadcrumb navigation when there are multiple levels of nested pages;
    • Avoid ambiguous link text such as “click here” or “learn more”;
    Understandable

    Content and interface behavior must be clear and predictable. This means using plain language and ensuring users can easily understand and use the website.

    Examples:

    • Make text content readable and understandable;
    • Avoid technical jargon;
    • Set the lang attribute on the html tag ( <html lang=”en”>);
    • Global elements such as the header, navigation, and footer are the same on each page;
    • Nagivation links are the same on every page and always in the same order;
    • Use consistent language when labeling things;
    • Provide labels for all inputs and examples (placeholders) if data needs to be formatted a certain way;
    • When a form is filled out incorrectly, provide instructions on how to fix the error;
    • Give success/error messages when a form is submitted;
    • Give users a second chance to confirm or cancel an action, especially when that action is irreversible;
    Robust

    Content must be reliably interpreted by a wide range of devices and assistive technologies, both now and in the future.

    Examples:

    • Maximize compatibility with current and future user agents, including assistive technologies;
    • Write semantic, valid HTML;
    • Use ARIA to extend your HTML when needed;
    • Incorporate accessibility testing into your build process;

    13 guidelines and 78 success criteria

    Each of the four principles includes several guidelines – 13 in total. These guidelines are supported by success criteria – specific, testable requirements that help determine if a website meets accessibility standards.

    WCAG 2.1 includes 78 success criteria, organized into three levels of conformance:

    Level A – Basic requirements, must be adjusted

    Level AA – Recommended for most websites

    Level AAA – Highest level, difficult to meet across all content

    For most websites, aiming for WCAG 2.1 Level AA compliance is a strong and realistic goal.

    Why WCAG matters

    WCAG provides a structured, internationally recognized framework for creating accessible digital content. Based on four principles – Perceivable, Operable, Understandable, and Robust – it includes 13 guidelines and 78 success criteria that help ensure your site is usable by everyone.

    Following WCAG helps:

    • Make websites usable for people with various disabilities (visual, motor, cognitive, etc.)
    • Improve the overall user experience
    • Comply with accessibility laws in many countries
    • Enhance SEO and future-proof your content for new technologies

    Related articles

    Popular resources