WCAG in Practice

Learn

Learn web accessibility for everyone

Web accessibility is not a niche feature. It helps people with disabilities, and it helps all of us in everyday situations. This page maps real needs to what you can explore across this site, including hands-on practice when you are ready.

Open playgroundW3C accessibility fundamentals (opens in a new tab)

Three ideas to start with

  • People first

    Disability describes a mismatch between a person and their environment. Good design reduces that mismatch.

  • Standards plus testing

    WCAG 2.1 and 2.2 gives shared criteria. Real users with disabilities and assistive technology still find what automated scans miss.

  • Built in, not bolted on

    Semantic HTML and ARIA used correctly cost less than retrofitting after launch.

Universal Design Principles

Accessibility is not just for people with disabilities. These seven principles help everyone design better experiences.

  1. 01

    Equitable Use

    Useful for people with diverse abilities. No one is excluded or treated differently.

    Example: A login form that works for sighted users typing, screen reader users navigating by keyboard, and voice control users dictating input.

  2. 02

    Flexibility in Use

    Works with different skills, preferences, and abilities.

    Example: Supporting both mouse and keyboard navigation means left-handed users, people with tremors, and anyone without a mouse can use the interface.

  3. 03

    Simple and Intuitive

    Easy to understand regardless of experience or language.

    Example: A "Save" button is clearer than a floppy disk icon. Consistent navigation reduces the learning curve for everyone.

  4. 04

    Perceptible Information

    Information is communicated in multiple ways. Not color alone, not sound alone.

    Example: Form errors shown in text, color, and with an icon. Captions on videos help deaf users and anyone in a loud environment.

  5. 05

    Tolerance for Error

    Minimizes hazards and warns about mistakes before they cause problems.

    Example: A "Confirm delete" dialog prevents accidental data loss for keyboard users who might press Delete accidentally, and for everyone else.

  6. 06

    Low Physical Effort

    Can be used efficiently and comfortably without fatigue.

    Example: Large click targets (44px minimum) help people with tremors, arthritis, and anyone using a phone with one hand.

  7. 07

    Size and Space for Approach and Use

    Appropriate size and space regardless of posture, mobility, or assistive device.

    Example: Buttons spaced far enough apart prevent accidental clicks. Navigation placed consistently helps users find it quickly.

Each pattern in the playground demonstrates these principles in practice. The dropdown shows equitable use (mouse and keyboard both work). Form validation shows tolerance for error and perceptible information. Image alt text shows perceptible information in a different medium. See the patterns in the playground.

Who benefits, and what to design for

The groups below overlap. Many people use more than one assistive technology or adaptation. Use these as lenses for your design and code reviews, not as boxes to label users.

  1. 01

    Blind and low vision

    People may use screen readers, screen magnification, high contrast modes, or braille displays. Many also rely on strong color contrast and resizable text rather than a specific AT.

    Design for

    • Meaningful text alternatives for images and icons
    • Semantic structure: headings, landmarks, and labels
    • Color is never the only way to convey state or errors
    • Visible focus indicators and logical reading order

    Try in the playground

  2. 02

    Deaf and hard of hearing

    Audio-only content excludes people who are deaf or hard of hearing. Captions, transcripts, and visual alternatives for sound cues are essential.

    Design for

    • Captions and transcripts for video and audio
    • Visual alerts alongside or instead of sound alone
    • Clear written instructions for steps that might be spoken elsewhere
    • Avoid requiring a phone call as the only support path

    Try in the playground

  3. 03

    Motor and dexterity

    Some people use a keyboard only, voice control, switches, or pointers with reduced precision. Small targets and hover-only interactions create barriers.

    Design for

    • Full keyboard access for every action
    • Large enough touch targets (44×44 CSS px is a common minimum)
    • No keyboard traps; focus returns predictably
    • Enough time to complete tasks without losing data

    Try in the playground

  4. 04

    Cognitive and learning

    Clear language, consistent navigation, and helpful error messages support people with learning disabilities, ADHD, memory difficulties, and many others under stress.

    Design for

    • Plain language and predictable layouts
    • Labels tied to inputs; errors that say what to fix
    • One main task per screen where possible
    • Avoid unnecessary timeouts and confusing jargon

    Try in the playground

  5. 05

    Neurological (motion and sensitivity)

    Flashing content can trigger seizures. Motion and animation can cause dizziness or make it hard to concentrate. Respect user preferences for reduced motion.

    Design for

    • Honor prefers-reduced-motion for non-essential animation
    • No flashing content in the danger zone (more than three flashes per second)
    • Pause, stop, or hide auto-updating content when possible
    • Stable layouts that do not shift unexpectedly

    Try in the playground

  6. 06

    Temporary and situational needs

    Accessibility helps everyone in the right context: a broken arm, bright sunlight, a noisy cafe, or holding a child while using a phone.

    Design for

    • Keyboard paths when a mouse is awkward
    • Contrast that works in glare
    • Captions in a quiet environment marked "quiet please"
    • Large tap targets for one-handed use

    Try in the playground

Why accessibility is good for business

Accessibility is the right thing to do. It is also a practical business decision.

  • The numbers

    27% of Canadian adults have at least one disability. That is your potential user base, if your product works for them. Source: Statistics Canada, 2026.

    Accessible design also benefits users without disabilities: captions help in loud environments, keyboard navigation helps when a mouse breaks, clear language helps non-native speakers.

  • The legal context

    Accessibility compliance is increasingly mandatory:

    • Canada: AODA (Accessibility for Ontarians with Disabilities Act) applies to organizations with 50 or more employees.
    • USA: ADA (Americans with Disabilities Act) applies to public websites and many private ones.
    • Europe: European Accessibility Act (2025) requires all digital content to be accessible.
    • Over 80 countries have digital accessibility laws.

    Non-compliance carries fines, lawsuits, and reputational risk.

  • The design case

    Accessibility built into the design process costs less than retrofitting after launch. Semantic HTML is free. ARIA attributes take minutes to add. Accessible color contrast is a design token update.

    Companies that lead on accessibility, including Apple, Microsoft, and Google, treat it as a product quality standard, not a compliance checkbox.

Ready to see what accessible patterns look like in practice? Open the playground.

Further learning

This page introduces the context. These resources go deeper.

Dev tools

Bring these patterns into the editor you already use.

Community guides

Studying for CPACC? The CPACC prep page has exam-specific resources, study tips, and playground demos mapped to exam topics.

Standards and technical reference

For a full breakdown of what changed between WCAG 2.1 and 2.2, see the What's new in WCAG 2.2 page.

Community and general learning

Accessibility for DesignersPrefer visual examples over code? See Accessibility for Designers for focus rings, contrast, and motion explained without any code.

Hands-on practice

What this playground covers (and what it does not)

This site is for anyone learning web accessibility: product and project managers, designers, developers, and CPACC candidates included. The Learn section explains who benefits and how inclusive design shows up in real products.

The UI patterns playground covers common components (dropdowns, modals, forms, accordions, tabs, toasts, and more). You get plain-language context, broken and accessible examples, and copy-ready code when you implement or review markup yourself. The What's new in WCAG 2.2 page maps each new 2.2 criterion to relevant demos.

WCAG in Practice is a learning tool, not a substitute for usability testing with people who have disabilities or a full accessibility audit.

Studying for CPACC? The prep page links official IAAP materials, community study guides, study tips, and maps each playground demo to exam-focused practice.

Go to playgroundCheck your pageCPACC prep resources
Back to top