Website accessibility: a practical WCAG checklist
Review website contrast, keyboard operation, form labels, image alternatives, zoom and reduced motion using WCAG as a reference.
Updated: · AI-generated editorial illustration
Accessibility means that people with different needs can read and operate a website. It is not confined to a separate category of visitors. Readable text, visible focus and understandable form feedback also help people using phones, working outdoors or unable to use a mouse.
WCAG contains specific criteria rather than a single automated score. This checklist is a practical review method for business websites, not a complete conformance assessment. Connect each issue to an actual task and documented test conditions before drawing broader conclusions.
1. Read the version and level of the criteria
Choose the reference version and level, for example WCAG 2.2 AA, and define which pages or journeys are in scope. The W3C Quick Reference provides individual criteria, conditions and related techniques. Do not confuse a design recommendation with a criterion or treat a partially tested component as proof that the whole site conforms.
Inventory templates, shared components and tasks: reading, menu navigation, product discovery and form completion. Shared navigation deserves separate attention because one failure can affect every page. Reports should identify the observed issue, relevant criterion and impact on the task.
2. Check contrast and enlarged content
Measure text against its actual background, including photographs, placeholders, buttons and links. The familiar minimum contrast thresholds are 4.5:1 for ordinary text and 3:1 for large text, with definitions and exceptions that must be checked in the criterion. A brand colour that works as a decorative background may not work for small lettering.
Enlarge text and use browser zoom, then complete the same tasks. Review forms, tables, submenus and sticky regions rather than only the first screen. Fix clipping or overlapping controls through layout instead of disabling zoom. Long tables can use a contained scrolling region without making the entire page overflow.
3. Test functionality with a keyboard
Start at the top with Tab and Shift+Tab. Focus should follow a meaningful order and remain visible; Enter or Space should behave according to the control type. A hover-only menu or pointer-only card leaves some users without a route. Add a way to skip lengthy navigation where appropriate and check where focus actually lands.
Test dialogs, drawers and accordions according to the chosen interaction model. Closing a dialog generally needs a meaningful focus return; non-modal navigation should not trap users without a reason. WAI-ARIA Authoring Practices documents common patterns. Adding ARIA does not repair incorrect structure and behaviour by itself.
4. Connect labels, alternatives and feedback to the task
Informative images need an alternative describing the relevant information; decorative images can have empty alt text. When a thumbnail repeats an adjacent linked title, avoid making the same article two repetitive screen-reader links. A product image alternative should explain the image rather than become a keyword container.
Forms need labels, instructions, required-state information and errors associated with inputs. Consider a live region for updates such as search-result counts so users know what changed. Do not announce every minor visual movement. The contact-form UX guide follows the complete entry and correction journey, including information that should be preserved after failure.
5. Reduce motion without removing functionality
Visitors who request reduced motion still need content, menus and feedback. Replace large movement with a direct state change rather than hiding the component. Check decorative loops, parallax and text effects in reduced-motion mode. Essential information should not depend on an animation finishing before it becomes readable.
Also review the page when JavaScript is slow or unavailable. Semantic HTML and server-rendered content help people access information early. Avoid reveal effects that leave important text permanently transparent when a script does not run. Aesthetic improvement needs a readable fallback as well as an animated experience.
6. Combine automated and manual review
Automation can detect missing labels, some contrast issues and structural problems. It cannot fully determine whether alternatives are accurate, reading order is meaningful or someone can complete checkout. Use tool findings to choose further inspection, not to replace human evaluation.
Record sampled pages, device, zoom, keyboard method, screen reader where used and untested areas. Prioritise task-blocking failures and components repeated across pages. After fixing an issue, repeat the failed journey and nearby interactions. A scoped checklist with evidence is more useful than an unsupported claim that a website is completely accessible.
Frequently asked questions
Does a high accessibility score prove WCAG conformance?
No. A tool score represents a particular rule set and sample. Conformance requires assessing applicable criteria across the defined scope, including manual checks that are absent from that score.
References and further reading
To apply this to your current website, explore the website service or contact Dean Vu to define a scope around your existing site and actual evidence.