Why this matters, briefly
Around one in six people has a disability affecting how they use the web. Accessibility is also increasingly a legal requirement — the UK Equality Act, the European Accessibility Act and Section 508 in the US all reference WCAG, generally at level AA.
The encouraging part is that the majority of real-world problems come from a short list of causes, and most of the fixes are free. You don't need to memorise WCAG to eliminate them.
1. Semantic HTML does most of the work
The highest-value accessibility decision is using the right element. A real <button> is keyboard operable, focusable, announced as a button, and triggers on both Enter and Space — all automatically. A <div onclick> has none of that, and reproducing it correctly takes ARIA attributes and event handlers that are easy to get wrong.
The same applies throughout: <a> for navigation, <nav>, <main> and <footer> for landmarks that let screen reader users jump between regions, headings in logical order with one <h1> per page, and real <table> markup for tabular data.
The corollary: reach for ARIA last. The first rule of ARIA is not to use ARIA if a native element will do, because incorrect ARIA is worse than none — it actively misleads assistive technology.
2. Test with your keyboard
This is the fastest audit available and requires no tools. Put your mouse aside and Tab through your site. Three things must hold: every interactive element is reachable, the focus indicator is always visible, and the tab order follows the visual order.
If focus disappears, someone has written outline: none without a replacement — the single most damaging line in web accessibility. Replace it with a visible :focus-visible style rather than removing it. Watch for keyboard traps too: modals that don't return focus, or custom widgets you can tab into but not out of.
3. Colour contrast
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold), plus 3:1 for meaningful UI components like input borders and focus indicators.
Two things fail most often: placeholder text at browser-default grey, and light grey body text that looks elegant on a designer's calibrated monitor and disappears on a phone outdoors. Check your combinations with the contrast checker.
Related: never use colour as the only signal. A form field marked invalid by a red border alone is invisible to colour-blind users and to screen readers — pair it with text and an icon.
4. Images and alt text
Every image needs an alt attribute, but its content depends on the image's job. Meaningful images get a description of what matters about them in context. Decorative images get alt="" — empty, not missing — so screen readers skip them silently. Images of text should include that text; better still, use real text.
Skip "image of" or "photo of" — screen readers already announce it's an image. Describe the content, not the medium.
5. Forms
Every input needs a real <label> with a for attribute matching the input's id. Placeholders are not labels: they vanish when typing begins, usually fail contrast, and aren't reliably announced.
Error messages should say what's wrong and how to fix it — "Enter a date in DD/MM/YYYY format" rather than "Invalid input". Associate them with aria-describedby and mark the field aria-invalid so the connection is programmatic, not just visual. Group related controls with <fieldset> and <legend>.
6. Motion and media
Honour prefers-reduced-motion: people with vestibular disorders can experience genuine nausea from parallax and large movement. Nothing should flash more than three times per second, which is a seizure risk. Anything animating longer than five seconds needs a way to pause it.
Testing beyond the automated tools
Automated tools — Lighthouse, axe, WAVE — catch perhaps a third of issues, and that third is worth catching. But they can't judge whether alt text is meaningful, whether tab order makes sense, or whether an error message helps.
Supplement them with the keyboard test above, then try a screen reader: VoiceOver on Mac (Cmd+F5) or NVDA on Windows, both free. Navigating your own site with your eyes closed for five minutes teaches more than any checklist — and the accessibility essentials page has a trackable version of these checks.