A list of accessibility recommendations, tips and resources. Last updated on 13 June 2020.

Accessibility is not just a checkbox exercise

Although I find checklists useful, it’s worth remembering that accessibility shouldn’t be reduced to a checkbox exercise. Craig Abbott explains it nicely in this post.

Accessibility is not just a checkbox exercise. It’s about inclusion. It’s providing the same level of service and human rights to everybody and culturally we need to embrace it in everything that we do.

— Craig Abbott

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

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 text and background

Check design works in black and white

Don’t communicate using colour alone

Check design works in high contrast mode

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)[https://gomakethings.com/if-its-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

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>

, and 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

Automatic tests

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