Web Accessibility Guidelines Summary

Plain language summary of the Web Content Accessibility Guidelines.

These guideline summaries will help you familiarize yourself with the Web Content Accessibility Guidelines (WCAG) 2.1 and avoid common accessibility mistakes. This summary simplifies the guidelines. If you need detailed information on how a guideline applies, please refer to the official WCAG 2.1 guidelines.

The summary covers Level A and Level AA requirements, which are referenced in public sector procurement laws in the UK, US public sector procurement laws, EU public sector procurement laws, and public sector procurement laws around the world.

1. Easy to perceive

Your website should present information in ways that are accessible to everyone, regardless of their preferred mode of content consumption (e.g., low vision or screen reader usage).

1.1 Text alternatives

1.2 Provide alternatives for audio content, videos and presentations

1.3 Create content that can be presented in different ways

  • 1.3.1 Information and relationships
    Level A Design Code
    Make sure that information and relationships that are conveyed visually (like distinct sections within a page, or a label next to a checkbox) are also identified in code.

  • 1.3.2 Order of elements in code
    Level A Design Code
    Make sure that elements appear in a logical reading order in code, so that they are presented in a meaningful order to screen reader users.

  • 1.3.3 Instructions don't rely on sensory characteristics
    Level A Design
    If you give tips or instructions, do not assume that users can perceive colour, size, shape, sound or the location of elements on screen.

  • 1.3.4 Orientation
    Level AA Design Code
    Make sure a page's view is not locked to either portrait or landscape mode, unless this is essential.

  • 1.3.5 Purpose of text fields
    Level AA Code
    If a text input field collects information about the user, identify its specific purpose in code (for example email, password or given name).

1.4 Make content easy for people to see and hear

  • 1.4.1 Use of colour
    Level A Design
    Do not use colour as the only way to convey any piece of information.

  • 1.4.2 Audio control
    Level A Design
    If any audio content plays automatically for more than three seconds, give people a way to stop it.

  • 1.4.3 Text contrast
    Level AA Design
    Make sure that text has enough contrast against the background colour.

  • 1.4.4 Resize text
    Level AA Design Code
    Make sure it is possible to complete all tasks when text is resized up to 200%.

  • 1.4.5 Images of text
    Level AA Code
    Use real text rather than images of text.

  • 1.4.10 Reflow
    Level AA Design Code
    Make sure users can access all information and functionality on a screen that's as wide as on the iPhone5, without needing to scroll in both directions.

  • 1.4.11 Non-text contrast
    Level AA Design
    Make sure that visual information that identifies important graphics, interactive controls and their state has enough contrast against adjacent colours.

  • 1.4.12 Text spacing
    Level AA Design Code
    Ensure that no information or functionality gets lost if users increase the space between lines, paragraphs, letters and words.

  • 1.4.13 Extra content on hover or focus
    Level AA Design Code
    If content (like a tooltip) appears when users hover over an element with their mouse (or tab to it with their keyboard), it must be easy to dismiss, easy to reach and remain visible.

2. Easy to operate

Your website/app must be easy to navigate and use, no matter how someone interacts with it.

For example people who do not use a mouse may use their voice, or press the 'Tab' key to move their keyboard's focus to interactive controls.

2.1 Make all functionality work with a keyboard

  • 2.1.1 Keyboard
    Level A Design Code
    Make sure every task can be completed using just a keyboard.

  • 2.1.2 No keyboard trap
    Level A Design Code
    Make sure that keyboard-only users do not get trapped within any element.

  • 2.1.4 Character key shortcuts
    Level A Design
    If you've added custom keyboard shortcuts, provide a way to switch off or remap these shortcuts.

2.2 Give people enough time to read and use content

  • 2.2.1 Timing adjustable
    Level A Design
    If there is any time limit (like a session timeout), give people an easy way to extend it.

  • 2.2.2 Visual distractions
    Level A Design
    Do not show anything that automatically blinks, scrolls, animates or updates frequently if it lasts more than 5 seconds. Or give people a way to stop it.

2.3 Make sure it won't trigger seizures

  • 2.3.1 Flashes
    Level A Content Design
    Do not show anything that flashes more than three times a second.

2.4 Help people navigate and find content

  • 2.4.1 Skip to main content
    Level A Design Code
    Give keyboard and screen reader users a way to go directly to the page's main content.

  • 2.4.2 Page title
    Level A Design Code
    Give every page a unique and helpful title that indicates the purpose of the page.

  • 2.4.3 Focus order
    Level A Design Code

    Make sure that interactive controls receive focus in an order that makes sense, when users navigate through them with the keyboard.

  • 2.4.4 Link purpose
    Level A Design Code
    Make sure the purpose of every link is clear from the link text alone, or together with associated content (if screen readers recognise the association).

  • 2.4.5 Multiple ways to find a page
    Level AA Design
    Give people different ways of finding each page (like searching or browsing links), unless the page is a step in a process.

  • 2.4.6 Headings and labels
    Level AA Design
    Headings and form labels should help people find content and complete tasks.

  • 2.4.7 Focus visible
    Level AA Design Code
    Make sure that keyboard-only users can clearly see which interactive control is focused when they tab through them.

2.5 Make it work with other input methods beyond keyboard

  • 2.5.1 Complex gestures
    Level A Design
    Do not require complex gestures or using more than one finger to do things.

  • 2.5.2 Touch or click cancellation
    Level A Code
    Make sure that custom buttons or links do not activate as soon as they are touched, so that users can slide their finger or mouse away to cancel the action.

  • 2.5.3 Label in name
    Level A Design Code
    When an interactive control has a name on screen, make sure that assistive technologies (like Voice Control) know it by the same name (or a name that includes the name on screen).

  • 2.5.4 Device motion
    Level A Design Code
    If a feature uses the device's motion (like shaking or tilting), make sure that responses to these motions can be turned off, and that the feature can be used in another way.

2.6 Make it work in touchscreens

  • 2.6.1 Touch Target Size and Spacing
    Level A Design Code Guidance
    Make sure that touch targets are big enough and have enough distance from each other.

  • 2.6.2 Touchscreen gestures
    Level A Design Code Guidance
    Gestures made on a touchscreen should be made as easy as possible, without forcing the users to commit to an action.

3. Easy to understand

Your website/app must make it easy for people to understand information and how to complete tasks.

3.1 Make text easy to understand

  • 3.1.1 Language of page
    Level A Content Code
    In code, identify the language that the content of the page is written in (English for example).

  • 3.1.2 Language of parts
    Level AA Content Design Code
    If the page has content in more than one language (for example, if a page in English has a button labelled in Welsh), identify the language of each part in code.

3.2 Make things appear and behave in consistent, predictable ways

  • 3.2.1 Changes on focus
    Level A Design Code
    Just navigating to an interactive control with the keyboard shouldn't trigger any action, and shouldn't move the keyboard focus somewhere else.

  • 3.2.2 Changes on input
    Level A Design Code
    Just changing the state of a form input (like a radio button) must not cause anything surprising to happen, like submitting a form, significantly changing the content on the page, or moving the keyboard focus.

  • 3.2.3 Consistent navigation
    Level AA Design
    Make sure that navigation controls that appear on multiple pages (like links in a header) are consistent across pages.

  • 3.2.4 Consistent feature names
    Level AA Design
    If a user interface component exists on multiple pages, make sure that the way it looks and the way it is named is consistent across pages.

3.3 Help people avoid and correct mistakes

  • 3.3.1 Error identification
    Level A Design Code
    When someone makes an error while filling in a form, describe the error with text and clearly identify where the error is.

  • 3.3.2 Form labels and instructions
    Level A Design Code
    Provide labels to make it clear how users should fill in a form, and optionally provide extra hints to help them avoid errors.

  • 3.3.3 Error suggestions
    Level AA Design Code
    When someone makes an error while filling in a form, give them suggestions on how to correct it.

  • 3.3.4 Error prevention (legal, financial, data)
    Level AA Design
    If users are making a legal commitment, a financial transaction or updating personal data, give them a way to review and check that the information they've entered before submitting it.

4. Robust and compatible

Your website/app must work with different web browsers and/or assistive technologies.

  • 4.1.1 Valid HTML
    Level A Code
    Make sure the HTML does not contain markup errors that are known to cause conflicts with assistive technologies (such as incorrect nesting of elements, or duplicate ids).

  • 4.1.2 Name, Role and State of interactive components
    Level A Design Code
    The code should enable assistive technologies to understand the name, role and state of every user interface component.

  • 4.1.3 Status messages
    Level AA Design Code
    Make sure status messages are identified in code, so that assistive technologies can convey them to users.

Discuss on Twitter • View on GitHub • Main Sources