Skip to main content

Cookie control banner

We use cookies to ensure our website works properly, deliver personalised advertising, and collect usage statistics to help us improve the website. You may change your settings at any time or accept the default settings. For more information, please refer to our privacy policy.
Best practices

Website accessibility checklist

Dave Davies

Front End Developer

4 October 2024

Use this checklist to identify and fix accessibility failures on your website.

1. Add labels to your input fields

Always add a label to every input field in forms. Labels help everyone, especially those using screen readers, understand what the field is for. Make sure the label is clearly linked to the input field.

Example:

JavaScript
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

In this example, the for attribute in the <label> matches the id of the <input>, linking them together.

2. Write good alt text

Keep your alt text for images clear and to the point. Describe what the image is for rather than just describing it literally. This helps users who rely on screen readers get the full picture. Don’t just use generic terms like "image" or "photo."

3. Use headings properly

Organise your content with proper heading levels (H1, H2, H3, etc.). This makes it easier for screen readers to navigate and improves your content’s accessibility and SEO. Don’t skip heading levels or use them out of order.

4. Use HTML5 landmarks

Stick to HTML5 landmark elements like <header>, <nav>, <main>, <aside>, and <footer>. They’re recognised by browsers and assistive tech, which makes navigating easier. Do not rely on ARIA landmarks unless there’s no HTML5 equivalent.

5. Ensure sufficient colour contrast

Pick text and background colours that stand out from each other. This ensures everyone, including those with visual impairments, can read your content easily. Do not use low contrast colours that might be hard to read.

6. Make links descriptive

Use clear, meaningful text for links instead of vague phrases like “Click here.” For example, say “Read the full article on accessibility best practices.” If you use icons as buttons or links, make sure they have a descriptive aria-label.

7. Use plain language

Write in plain language and avoid jargon, technical terms, and complicated sentences. This makes your content accessible and easy to understand for everyone, including those with cognitive disabilities. Don't overcomplicate it; keep your writing simple.

8. Ensure focus visibility and order

Make sure keyboard users can see where they’re focused on the page. All interactive elements should have a visible focus state, and the tab order should follow the visual layout. Do not make the focus hard to see or navigate.

9. Test dynamic content with screen readers

If your content updates automatically (like new items loading or pop-ups), make sure it’s accessible with screen readers. Use ARIA live regions if needed and check that screen readers announce updates properly. Do not assume dynamic content will be accessible without testing.

10. Do not identify content based on colour

Avoid relying on colour alone to convey important information. Ensure that key content is understandable without depending solely on colour. Use additional indicators like text labels or patterns to make sure information is accessible to everyone, including those who are colourblind.

11. Use Insytful to check your accessibility

Insytful is an accessible site improvement platform, created by Zengenti.

Insytful scans your website content and identifies improvements for accessibility, SEO, content quality and performance.

Dave Davies

Front End Developer

Best practices
4 October 2024

Related blog posts