A practical accessibility checklist for every frontend build

Accessibility work is much cheaper during the build than after launch. This is the accessibility checklist I run through on every page. It is not a full WCAG audit, but it catches the most common problems.

Structure

• One h1 per page, and headings that follow in order without skipping levels
• Landmarks in place: header, nav, main, footer
• A skip link that jumps to the main content
• Lists marked up as lists, not as stacks of divs

Keyboard

• Every interactive element can be reached with Tab and used with Enter or Space
• Focus is always visible. Never remove the outline without replacing it
• Menus and dialogs close with Escape and return focus to the button that opened them
• Focus order matches the visual order

Buttons and links

Use a button for actions and an a for navigation. Icon-only buttons need a text label for screen readers:

<button type="button" aria-expanded="false" aria-controls="menu">
	<svg aria-hidden="true">...</svg>
	<span class="screen-reader-text">Menu</span>
</button>

Images

• Meaningful images get alt text that says what the image communicates
• Decorative images get an empty alt="" so screen readers skip them

Colour and motion

• Text meets at least 4.5:1 contrast against its background, 3:1 for large text
• Colour is never the only way information is shown
• Animations respect prefers-reduced-motion

ARIA last

Native HTML elements come with accessibility built in. I only add ARIA when there is no native element that does the job, and I test with a screen reader when I do.