Accessibility Checklist

Web Accessibility Checklist

This is a checklist of the most common accessibility issues that you should initially spend attention on. It is aimed at someone who wants to go over the basics. This list is not comprehensive, and it is recommended to do more than just go through a checklist. But this is a nice start of things to make sure you check when making your site or application accessible. This is still work in progress (July 2022)

Add alt tag

What HTML elements? <img>

Alt text is a text description of images, so that people who cannot see images (or those who disable images) can still understand what is inside the image/photo.

View more about alt text

No horizontal scrolling

You should avoid scrolling in two directions. In the majority of cases this means no horizontal scrolling.

Buttons and links should have descriptive text

What HTML elements? <button> <a>

Buttons and links should have useful and descriptive texts - not click here, but something like read our terms and conditions

Good examples

<a href="shop">View our shop</a>

Bad examples

Do not do these!

<a href="shop">Click here</a>

Reason that this is a bad example: The anchor text of "click here" is not descriptive

<button>Click here</button>

Reason that this is a bad example: The button text of "click here" is not descriptive

Use high contrast to make your content readable

Text should be easy to read - and an important part of that is to have high contrast. Make sure you have text with contrasting colours, so people can easily read it.

View more about high contrast

Ensure keyboard users can use your site

Remember that not everyone uses a mouse and keyboard! A great way to make sure your site is accessible even if people use different input devices (such as a screen reader) is to simply make sure you can use the site with just a keyboard.

View more about using only a keyboard

Show focus and hover states

When a user hovers over an element (with a mouse for example), or an element is focused (such as tabbing to a link) then you should indicate that visually to the user.

View more about clear focus and hover states