Accessibility checklist

A list of accessibility recommendations; covering typography, content, layout and interaction.

Typography

• Nest headings in order (for example, h1, h2, h3)
• Don't skip heading levels
• Use semantic mark-up (for example, headings, lists and blockquotes)
• Links should look like links (for example, blue and underlined)
• Lines should be less than 80 characters wide
• Add suitable vertical spacing between lines and paragraphs
• Avoid italics, block capitals or justified text
• Use a san-serif font with thick letters
• Make sure text can be resized
• Responsive Type and Zoom by Adrian Roselli

Read my post about how improving typography can help us to meet user needs.

Written content

• Use plain English
• Explain unusual words and jargon
• Explain abbreviations in the first instance
• Don't rely on link title attribute
• Put the most important information at the start
• Explain what a user has to do in a clear and concise way
• Use headings and lists to break the content into chunks
• Download links labels should include file format and size
• Headings, links and button text must be unique and descriptive
• Each page should have a unique, descriptive h1 and page title

Tables

• Make sure tables are accessible
• Only use tables to present data
• Use tables as accessible alternatives to charts and infographics
• Split complex tables into multiple small ones
• Use correct table markup for headers, rows and cells, so screen reader users can understand and navigate them

Read my post about making data tables more accessible.

Charts

Read my post about accessible charts.

Colour and contrast

• Check colour contrast between foreground and background elements
• WebAIM have a web based tool, or Contrast is a great Mac based tool
• Check design works in black and white
• Don't communicate using colour alone
• Check design works in high contrast mode
• Read An interactive guide to color & contrast
• Who can use

Interaction

• Check design is functional when using a keyboard to navigate
• Check it's visually apparent which page element has current keyboard focus if it’s interactive, it needs focus styles
• Make sure scrollable regions are focusable
• Make clickable areas (target size) at least 44 pixels
• Use aria-current if you're styling active page links
• Complex interface components, like sliders, should be avoided when simple solutions, like a text input, can be used instead
• If an experience cannot be made accessible, create another route for users to get that information

Forms

• All form inputs should have labels and be linked with a 'for' attribute
• Group radios together with a <fieldset> and a <legend>
• Forms and interactive elements should have useful hints if needed
• Avoid using placeholder text, because it disappears when users start typing
• Error messages should suggest ways to fix errors
• Error messages should show a summary of errors above the h1 and move focus to it
• Error message summaries should include an h1 message that tells the screen reader user there is a problem, and give a list of descriptive errors with links to the relevant fields
• Example search form mark-up
• Close buttons
• Be careful with input type="number"
• Is input type="date" ready for use in accessible websites?

Images

• Images should have good alternative text
• If images are purely decorative, then they need an empty alt tag alt=""
• Avoid using images of text

Read my post about SVGs icons.

Layout and structure

• Use HTML sectioning elements like <header>, <main> and <nav>
• Add a skip to main content link
• Layout should be consistent and predictable
• Do not rely upon shape, size, or visual location (for example, "Click the square icon to continue" or "Instructions are in the right-hand column")
• Check reading and navigation order is logical
• Check page is readable and functional when text size is doubled
• Don't use duplicate id attributes

iframes

• Use the iframe title attribute to give the content a descriptive title
• Make sure interactive elements inside an iframe are usable with a keyboard
• Make sure interactive elements have a clear focus style
• Test the iframe is readable and functional with browser zoom at 200%
• Test the content doesn't overflow or become truncated when font size is increased

Manual tests

Check the service can be operated with…

• a mouse
• a keyboard
• a touch device
• CSS off
• increased browser zoom
• increased browser font size
• high contrast mode
• speech recognition software, like Dragon NaturallySpeaking
• screen magnification tools
• screen readers
• a range of browsers and devices

Further reading on manual testing

• Designing for different browsers and devices from GOV.UK
• Assistive technology tools you can test with at no cost from Anika Henke
• Quick Tips for Windows High Contrast Mode from Sarah Higley.
• The most useful accessibility testing tools and techniques from Artem Sapegin

Automatic tests

• WAVE by WebAIM
• Axe by Deque
• Lighthouse by Google
• Accessibility Insights by Microsoft
• Check html mark-up is valid

Remember that automatic tests aren't perfect.

It’s important to note, however, that automated accessibility testing tools can only catch 30-50% of your accessibility defects. — Deque

Read building the most inaccessible site possible with a perfect Lighthouse score from Manuel Matuzović.

Other accessibility checklists and links

• Checklist to avoid the most common accessibility errors from Bruce Lawson
• Tools for designing good-looking accessible interfaces from Sarah L. Fossheim
• Accessibility resources GitHub repo from Phil Sherry
• WCAG Cheat Sheets and Checklists from WebAxe
• Doing a basic accessibility check if you cannot do a detailed one guidance from GOV.UK
• Quick and Small Accessibility