Accessibility Guidelines Summary

1. Easy to perceive

Your website/app must present information in ways that people can recognise and use, no matter how they consume content (for example if they have low vision, or use assistive technologies like screen readers).

1.1. Provide text alternatives for images

• Text alternatives for images
  • Level A
  • Design
  • Content
  • Code
  Provide an alternative text description for images. Make sure the description conveys the same message or functionality.

1.2. Provide alternatives for audio content, videos and presentations

• Transcript for pre-recorded audio-only content
  • Level A
  • Content
  For audio content that has no video (like a podcast), provide a transcript.
• Captions for pre-recorded videos
  • Level A
  • Content
  Provide captions for videos that are pre-recorded.
• Text or audio description for pre-recorded videos
  • Level A
  • Content
  For videos that are pre-recorded, provide an equivalent text description, or audio description of what happens on screen.
• Captions for live videos and presentations
  • Level AA
  • Content
  Provide captions for videos and presentations that are performed live.
• Audio description for pre-recorded videos
  • Level AA
  • Content
  For videos that are pre-recorded, provide audio description of what happens on screen, even if you've already provided a text description.

1.3. Create content that can be presented in different ways

• 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.
• 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.
• 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.
• Orientation
  • Level AA
  • Design
  • Code
  Make sure a page's view is not locked to either portrait or landscape mode, unless this is essential.
• 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

• Use of colour
  • Level A
  • Design
  Do not use colour as the only way to convey any piece of information.
• Audio control
  • Level A
  • Design
  If any audio content plays automatically for more than three seconds, give people a way to stop it.
• Text contrast
  • Level AA
  • Design
  Make sure that text has enough contrast against the background colour.
• 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.
• Resize text
  • Level AA
  • Design
  • Code
  Make sure it is possible to complete all tasks when text is resized up to 200%.
• 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.
• Images of text
  • Level AA
  • Code
  Use real text rather than images of text.
• Text spacing
  Web only
  • Level AA
  • Design
  • Code
  Ensure that no information or functionality gets lost if users increase the space between lines, paragraphs, letters and words.
• 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

• Keyboard
  • Level A
  • Design
  • Code
  Make sure every task can be completed using just a keyboard.
• No keyboard trap
  • Level A
  • Design
  • Code
  Make sure that keyboard-only users do not get trapped within any element.
• 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

• Timing adjustable
  • Level A
  • Design
  If there is any time limit (like a session timeout), give people an easy way to extend it.
• 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

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

2.4. Help people navigate and find content

• Skip to main content
  • Web only
  • Level A
  • Design
  • Code
  Give keyboard and screen reader users a way to go directly to the page's main content.
• Page title
  • Level A
  • Design
  • Code
  Give every page a unique and helpful title that indicates the purpose of the page.
• 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.
• 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).
• 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.
• Headings and labels
  • Level AA
  • Design
  Headings and form labels should help people find content and complete tasks.
• 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

• Complex gestures
  • Level A
  • Design
  Do not require complex gestures or using more than one finger to do things.
• 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.
• 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).
• 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

• 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.
• 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

• Language of page
  • Level A
  • Content
  • Code
  In code, identify the language that the content of the page is written in (English for example).
• Language of parts
  • Level AA
  • Design
  • Content
  • 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

• 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.
• 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.
• Consistent navigation
  • Level AA
  • Design
  Make sure that navigation controls that appear on multiple pages (like links in a header) are consistent across pages.
• 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

• 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.
• 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.
• Error suggestions
  • Level AA
  • Design
  • Code
  When someone makes an error while filling in a form, give them suggestions on how to correct it.
• 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.

• Valid HTML
  • Web only
  • 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).
• 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.
• Status messages
  • Level AA
  • Design
  • Code
  Make sure status messages are identified in code, so that assistive technologies can convey them to users.