• Introduction

    This page is a quick reference list of the WCAG Web Content Accessibility Guidelines. It contains summary lists and button links to the relevant guideline content on the w3.org website. Buttons will open content in a new browser tab.

    The Web Content Accessibility Guidelines (WCAG) 2.2 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.

    Principles of Accessibility

    Understanding the Four Principles of Accessibility

    • Perceivable - Available through sight, hearing, or touch.
    • Operable - Compatible with keyboard or mouse.
    • Understandable - User-friendly, easy to comprehend.
    • Robust - Works across browsers, assistive technologies, mobile devices, old devices/browsers, etc. Follows standards.
    w3.org Understanding the Four Principles of Accessibility

    Provide appropriate alternative text

    • Every non-text element needs a text alternative (alt text) that provides an equivalent to the image content.
    • Alt text should present the content and function, not necessarily a description, of an image.
    • If an image has no relevant content or function, is decorative, or the alternative text is provided in nearby text, then the image should have an empty alternative text value (alt="").
    • If an image is a link (or hotspot), the alt text must describe the link’s function.
    • Avoid words like "picture of," "image of," or "link to."
    • Use the fewest number of words necessary.
    w3.org Understanding Non-text Content

    Content is well structured and clearly written

    • Use the simplest language appropriate for your content.
    • Organize your content using true headings (e.g., <h1>) and lists.
    • Use empty (white) space to improve readability.
    • Use illustrations, icons, etc. to supplement text.
    • Check spelling, grammar, and readability.
    • Provide a link that allows the user to skip over navigation to the main content in the page.
    • Use true headings to organize content.
    w3.org Page Structure

    Provide headers for data tables

    • Identify all data table headers using the <th> element.
    • Provide an appropriate scope attribute: <th scope="col"> for column headers or <th scope="row"> for row headers.
    • If appropriate, add a table <caption> for the data table.

    w3.org Tables Concepts

    Do not rely on color alone to convey meaning

    • The use of color can enhance comprehension, but do not use color alone to convey information. Be especially cautious of red/green color combinations.
    • Make sure that color contrast is strong, especially between text and background.

    w3.org Use Of Color

    Ensure users can complete and submit all forms

    • Put form labels adjacent to or near their controls, so the labels are associated visually.
    • Use the <label> element to associate labels and controls.
    • Group similar elements (such as checkboxes or radio buttons) together using <fieldset>.
    • Clearly identify required form elements. Don't make a field required if it is not necessary. Ensure all directions and cues are readily accessible.
    • If there are errors in a form that has been submitted, alert the user in an accessible way (especially to a screen reader user) and make it easy to fix the incorrect information and resubmit the form.
    w3.org Forms Concepts

    Caption and/or provide transcripts for media

    • Videos and live audio must have captions and a transcript. A transcript is sufficient for archived audio.
    • Captions should be synchronized, equivalent, and accessible.
    w3.org Provide alternatives for time-based media

    Ensure accessibility of non-HTML content

    • HTML content will almost always be more accessible than content in any other format.
    • PDF, Microsoft Word and PowerPoint files, OpenOffice.org, and Adobe Flash provide only basic accessibility features.
    • Provide accessible alternatives when non-HTML content cannot be made fully accessible.
    • Test the accessibility of non-HTML content in assistive technologies.
    Download Siteimprove's Guide to Creating Accessible PDFs

    Miscellaneous

    • Ensure that the page is readable and usable when fonts are enlarged 150-200%.
    • Provide a descriptive page <title>.
    • When using scripting, ensure events are available with both mouse and keyboard. Make all scripted content and page updates/changes available to screen readers.
    • Limit pop-up windows and notify users when pop-ups are used.
    • Provide a descriptive title for all frames (e.g., <frame title="navigation">).
    • Follow HTML and CSS coding standards.

    Quick Resources from uxdesign.cc

    Reading Resources

    Useful tools

    • ● WebAIM Color Contrast Checker: Great contrast color checker that gives you results in real time for regular and large text.
    • ● Inclusive Components: A pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.
    • ● Color Oracle: A free color blindness simulator for Windows, Mac, and Linux. It shows you in real time what people with common color vision impairments see.
    • ● Vox Product Accessibility Guidelines: A comprehensive checklist for designers, engineers, and project managers.
    • ● AXE Google Chrome Extension: Test any site for accessibility violations using the Chrome inspector.
    • ● Contrast: A macOS app for quick access to WCAG color contrast ratios.
    • ● Userway Accessability Widget: A free widget you can add to your website to provide accessibility tools. Includes keyboard navigator, color and contrast changer, screen reader,text size & spacing and more.