A Beginner's Website Accessibility Checklist Based on WCAG
People use the web in many ways. Some listen to pages through a screen reader. Some navigate with a keyboard, a switch or voice commands. Some zoom text to twice its size, browse with low vision or color blindness, or rely on captions. An accessible website works for all of them, and in practice it becomes clearer and easier for everyone.
The most widely used standard is the Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium. WCAG 2.2, published in 2023, is the most recent version. Its success criteria come in three levels, A, AA and AAA, and Level AA is the common target in policies and laws.
WCAG is organized around four principles, often remembered as POUR. This checklist follows them.
Perceivable: people can take in your content
- Add text alternatives to informative images. Describe what an image communicates; mark purely decorative images as decorative. Our guide to writing helpful alt text explains how.
- Caption videos and provide transcripts for audio. See our guide to captions and transcripts.
- Use sufficient color contrast between text and background. Our guide to color contrast and readable text covers the ratios.
- Do not rely on color alone to convey meaning, such as marking required fields only in red.
- Let text resize. Pages should remain usable when text is enlarged to 200 percent.
- Avoid putting important text inside images, where it cannot be resized or read aloud reliably.
Operable: people can use every part of the page
- Make everything work with a keyboard. Every link, button, menu and form control should be reachable and usable without a mouse. Try our keyboard accessibility test.
- Show a visible focus indicator so keyboard users can see where they are.
- Do not trap the keyboard inside a pop-up or widget.
- Make sure focused items are not hidden behind sticky headers, chat buttons or banners. WCAG 2.2 added criteria about this.
- Provide a "skip to main content" link on pages with long navigation.
- Write descriptive link text. "Download the volunteer handbook" is clearer than "click here."
- Make tap targets large enough, with spacing between small buttons and links. WCAG 2.2 includes a minimum target size.
- Avoid content that flashes rapidly, which can trigger seizures.
- Give people enough time to read and act, and let them pause moving content like carousels.
Understandable: people can follow your content and forms
- Set the page language in your site settings or code so screen readers pronounce text correctly.
- Use headings in order to outline each page, with one main heading and logical subheadings.
- Write in plain language, with short sentences and familiar words.
- Keep navigation consistent from page to page.
- Label every form field with visible text, not just placeholder text that disappears.
- Explain errors clearly and suggest how to fix them.
- Do not make people re-enter information they already provided in the same process.
- Allow password managers and pasting on sign-in forms, rather than requiring people to memorize or retype codes.
Robust: content works with assistive technology
- Use proper elements: real buttons for actions, real links for navigation and real headings for headings.
- Use ARIA attributes carefully, only when standard elements cannot do the job, and test the result.
- Check pop-ups, menus and custom widgets with assistive technology, since these often break.
How to test
- Run an automated checker. Free browser tools find many common issues, but automated tests catch only a portion of problems.
- Test with a keyboard on your most important pages.
- Try a screen reader. VoiceOver is built into Mac and iPhone, TalkBack into Android, and NVDA is a free screen reader for Windows.
- Zoom to 200 percent and check that nothing overlaps or disappears.
- Ask people with disabilities for feedback, and compensate them for their time when you can.
The W3C's WCAG overview is the authoritative source if you want to read the guidelines themselves.
Frequently asked questions
Is my website legally required to be accessible?
Requirements depend on where you operate, what kind of organization you are and who you serve, and laws continue to evolve. Many organizations aim for WCAG Level AA. For your specific obligations, consult an attorney.
Do accessibility overlay widgets fix my site?
Tools that add a toolbar or automatic fixes do not resolve underlying problems in your site's code and content, and many disabled users find them unhelpful. Fixing the site itself is the reliable path.
Where should a small organization start?
Start with your most important pages and tasks, such as the homepage, contact form and donation or checkout flow. Fix images, headings, contrast, keyboard access and form labels first.
Comments (0)
No comments yet. Be the first to share your thoughts!