Web accessibility: a 15-minute checklist

Why accessibility from the MVP?

Accessibility isn't just a legal requirement (RGAA in France). It's also a best practice that improves the experience for all your users. And contrary to common belief, building accessibility in from the start doesn't complicate development. On the contrary, it structures your code and makes it more maintainable. We promise, we've tested it!

This checklist lets you verify the essentials in 15 minutes. No need to be an accessibility expert to start—we're not either! These basics already help you meet the most important criteria. And that's already an excellent start.

Checklist: the essentials

1. Colour contrast

Check: Text must have sufficient contrast with its background. Minimum 4.5:1 for normal text, 3:1 for large text.

How to check: Use a tool like WebAIM Contrast Checker or the Chrome extension "WAVE".

Action: Check all your text, especially secondary text and links. If contrast is insufficient, darken the text or lighten the background.

2. Keyboard navigation

Check: All interactive elements must be accessible via the keyboard (Tab, Enter, Space).

How to check: Use only your keyboard to navigate your site. Tab to move forward, Shift+Tab to go back, Enter/Space to activate.

Action: Check that:

• You can access all links and buttons
• The tab order is logical
• A visible indicator shows the focused element (outline)
• Dropdown menus open with the keyboard

3. Alternative text for images

Check: All images must have a descriptive alt attribute.

How to check: Disable images in your browser or use a screen reader. Images should have alternative text that describes their content.

Action:

• Decorative images: alt="" (empty)
• Informative images: alt="Description of the content"
• Images with text: alt="Text shown in the image"

4. Semantic HTML structure

Check: Use appropriate HTML tags to structure your content.

Action:

• <h1> for the main title (one per page)
• <h2> to <h6> for section headings (in order, without skipping levels)
• <nav> for navigation
• <main> for main content
• <button> for buttons, not <div> with onClick
• <label> for form labels

5. Accessible forms

Check: All form fields must have an associated label and clear error messages.

Action:

• Use <label> with for matching the field's id
• Indicate required fields (asterisk + "required" text)
• Display error messages near the relevant field
• Use aria-describedby to link help text to fields
• Use aria-invalid="true" for invalid fields

6. Visible focus

Check: When an element has focus (keyboard navigation), it must be visible.

Action: Never remove the default outline without replacing it. If you want to customise focus, create your own style:

button:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

7. Descriptive links

Check: Link text should describe its destination, even out of context.

Avoid: "Click here", "Learn more", "Read more"

Prefer: "Download the MVP guide", "Read the accessibility article", "See our services"

8. Video and audio

Check: All video/audio content must have subtitles or a transcript.

Action:

• Add subtitles for videos (YouTube, Vimeo do it automatically, but check them)
• Provide a transcript for podcasts/audio
• Add controls to pause/play

Tools to check accessibility

• WAVE: Chrome/Firefox extension to identify accessibility issues
• axe DevTools: Chrome extension to audit accessibility
• Lighthouse: Tool built into Chrome DevTools (Accessibility tab)
• NVDA / JAWS: Screen readers to test with assistive technology
• Contrast Checker: To check colour contrast

In summary

Accessibility really isn't complicated. You just need to:

1. Think accessibility from the start: It's easier than fixing things later, we promise.
2. Use the right HTML tools: Semantic tags are free and improve accessibility. Why skip them?
3. Test regularly: 15 minutes a week to check the essentials. It's minimal and changes everything.
4. Iterate: Start with the basics and improve gradually. Nobody gets it perfect first time, and that's normal!

This checklist already covers 80% of the most common accessibility issues. For the remaining 20%, you can go deeper over time. The important thing is to start. Go for it—we believe in you!