Simple Web Accessibility Guidelines

Principle 1: Perceivable

Your website must present information in ways that people can perceive.

1.1. Provide text alternatives for images

• Text alternatives for images
  • Design
  • Content
  • Code
  Provide alternative text for images.
  Make sure it conveys the same message.

1.2. Provide alternatives for audio and videos

• Transcript for pre-recorded audio-only content
  • Content
  Does your site include audio content that has no video, like a podcast?
  → Provide a transcript.
• Captions
  • Content
  Does your site show pre-recorded or live videos?
  → Provide captions.
• Audio description for pre-recorded videos
  • Content
  Does your site show pre-recorded videos?
  → Provide an audio description of what happens on screen.
  (If you don't, it's good to provide at least a text equivalent).

1.3. Make sure content can be presented in different ways

• Information and relationships
  • Design
  • Code
  • Content
  Your page conveys information, structure and relationships visually.
  → Make sure those are described in code in ways that assistive technologies understand.
• Order of elements
  • Design
  • Code
  The order in which elements appear in the HTML should match the order in which they appear on screen.
• Instructions don't rely on sensory characteristics
  • Design
  Does your page provide instructions?
  → Those instructions should not assume that people can perceive colours, sizes, shapes, sounds or the location of elements on screen.
• Orientation
  • Design
  • Code
  Make sure that people can do everything in both portrait and landscape modes.
• Purpose of text fields
  • Code
  Does a text input field collect information about the user?
  → Use the HTML autocomplete attribute to identify its purpose. For example: email, password, given-name, ...

1.4. Make content easy for people to see and hear

• Use of colour
  • Design
  Does the page use colour to convey information?
  → Also communicate that information in a way that doesn't assume people can distinguish colours.
• Audio control
  • Design
  Does your page automatically play sound?
  → Make it easy to stop it.
• Text contrast
  • Design
  Make sure text has enough contrast.
• Non-text contrast
  • Design
  Your page uses visual elements (like background colours or borders) to help users identify controls, their states, and understand infographics.
  → Make sure those visual elements have enough contrast.
• Resize text
  • Design
  • Code
  People must be able to resize text to 200%, without losing access to any content or functionality.
• Reflow (also known as 'Responsive Web Design')
  • Design
  • Code
  People can access the page’s content and functionality without needing to scroll horizontally:
  - at 100% zoom in a window that's 320px wide,
  - zoomed up to 400% in a window that's 1280px wide.
• No images of text
  • Code
  Don't use images of text (except for logos). Use real text instead.
• Text spacing
  • Design
  • Code
  If users increase the space between lines, paragraphs, letters and words, make sure they can still access all content and functionalities.
• Extra content on hover or focus
  • Design
  • Code
  Do some elements (like tooltips) appear on hover or keyboard focus?
  → Make sure they're easy to dismiss, easy to reach with the mouse, and don't automatically disappear.

Principle 2: Operable

Your website must be easy to navigate and use, no matter how people interact with it.

2.1. Make it easy to use with just the keyboard

• Keyboard
  • Design
  • Code
  Make sure every task can be completed using just the keyboard.
• No keyboard trap
  • Design
  • Code
  Make sure keyboard-only users can easily move away from any element.
• Custom keyboard shortcuts
  • Design
  Does your page provide custom keyboard shortcuts?
  → Provide a way to turn them off.

2.2. Give people enough time to read and use content

• Timing adjustable
  • Design
  • Code
  Is there any time limit (like a session timeout)?
  → Make it easy for people to extend it.
• Visual distractions
  • Design
  Does your page show anything that blinks, scrolls, animates or updates frequently for more than 5 seconds?
  → Make it easy for people to stop it.

2.3. Make sure it won't trigger seizures

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

2.4. Help people navigate and find content

• Skip to main content
  • Design
  • Code
  Give keyboard-only users a way to go directly to the page's main content.
• Page title
  • Design
  • Code
  Give every page a title that describes its topic or purpose.
• Focus order
  • Design
  • Code
  The order in which interactive elements receive keyboard focus must be natural and predictable.
• Link purpose
  • Design
  • Code
  • Content
  The purpose of every link must be clear from the link text alone. Or together with associated text (if screen readers recognise the association).
• Multiple ways to find each page
  • Design
  There must be more than one way to find each page. For example browsing categories and search. (Unless the page is a step in a process).
• Headings and labels
  • Design
  Headings must describe the topic of the page's sections.
  Labels must describe the purpose of form inputs.
• Focus visible
  • Design
  • Code
  When people press the Tab key to navigate through the interactive elements on the page, make sure they can see which element has the keyboard focus.

2.5. Make the page work with other input methods, beyond mouse and keyboard

• Complex gestures
  • Design
  Do not require complex gestures, or using more than one finger to do things.
• Touch and click cancellation
  • Code
  Interactive elements must not activate as soon as the user's finger is down.
• Accessibility name matches or includes visible label
  • Design
  • Code
  Does an interactive element have a visible label?
  → Make sure that assistive technologies know it by the same name. Or by a name that includes the name shown on screen.
• Device motion
  • Design
  • Code
  Does 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.

Principle 3: Understandable

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

3.1. Make text easy to understand

• Language of page
  • Code
  In code, identify the human language that the page content is written in.
• Language of parts
  • Code
  Does your page include content in more than one language? (For example, a page in English with a paragraph in Welsh).
  → In code, identify the language of each part of the page.

3.2. Make things appear and behave in consistent, predictable ways

• Changes on focus
  • 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
  • Design
  • Code
  Just changing the state of a form input (like a checkbox) 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
  • Design
  Navigation links that appear on multiple pages must appear in the same order.
• Consistent names
  • Design
  Does the same interactive element appear on multiple pages?
  → It must have the same name across the pages.

3.3. Help people avoid and correct mistakes

• Error identification
  • Design
  • Code
  When someone makes a mistake filling in a form:
  → Clearly identify where the error is, and describe it in text.
• Form labels and instructions
  • Design
  • Code
  Provide labels to clearly communicate how people should fill in a form.
  Optionally provide extra hints to help them avoid errors.
• Error suggestions
  • Design
  • Code
  When someone makes a mistake filling in a form:
  → Give them suggestions for correcting it.
• Error prevention (legal, financial, data)
  • Design
  Do people make financial transactions, legal commitments or update personal data through your site?
  → Let them review and check the information they've entered before submitting it.

Principle 4: Robust

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

• Valid HTML
  • Code
  Make sure the HTML does not contain errors that are known to cause conflicts with assistive technologies (such as incorrect nesting of elements, or duplicate ids).
• Name, Role and State
  • Design
  • Code
  Assistive technologies should be able to understand the name, role and state of user interface elements.
• Status messages
  • Design
  • Code
  Does your page shows alerts or status messages?
  → Make sure that they're coded so that assistive technologies announce them.