Website Accessibility (WCAG) Checklist
Website accessibility isn’t just a legal requirement—it’s a fundamental aspect of creating an inclusive digital experience. This wcag accessibility checklist covers the essential guidelines from the Web Content Accessibility Guidelines (WCAG) that ensure your website is usable by everyone, including people with visual, auditory, motor, and cognitive disabilities. With over one billion people worldwide living with some form of disability, making your site accessible opens your content to a significantly larger audience while demonstrating your commitment to inclusivity.
Whether you’re a small business owner building your first website, a developer implementing accessibility features, or a digital marketer optimizing your online presence, this checklist provides actionable steps to meet WCAG standards. Each item includes practical guidance on what to implement, why it matters, and how to execute it effectively. Use this wcag accessibility checklist systematically, checking off each item as you complete it, and you’ll create a website that serves all users while improving your search engine rankings and reducing legal risks.
Text and Non-Text Content Accessibility (4 Items)
Ensuring all content, both text and non-text, is accessible to users with various disabilities.
Ensure Text Alternatives for Non-Text Content
Every image, video, and non-text element on your website needs descriptive alt text that conveys its meaning and function. Screen readers rely on these text alternatives to communicate visual information to users who are blind or have low vision. For example, instead of “image123.jpg,” use “woman presenting marketing data on laptop to team of three colleagues” to provide meaningful context that makes your content accessible.
Ensure Text Color Contrast
Your text must have a contrast ratio of at least 4.5:1 against its background for normal text and 3:1 for large text (18pt or 14pt bold). This ensures readability for users with visual impairments, color blindness, or those viewing your site in bright sunlight. Use free tools like WebAIM’s Contrast Checker to verify your color combinations meet WCAG standards before publishing.
Avoid Using Images of Text
When text is embedded in images, screen readers can’t interpret it, and users can’t resize it for better readability. Instead of creating graphics with text overlays, use actual HTML text styled with CSS to achieve the same visual effect. This approach ensures your content remains accessible, searchable, and adaptable to different screen sizes and user preferences.
Allow Text Resizing Without Loss of Content
Users should be able to zoom text up to 200% without losing functionality or content, and without requiring horizontal scrolling. Implement responsive design with relative units like em or rem rather than fixed pixel sizes. Test your site at various zoom levels to ensure buttons remain clickable, forms stay usable, and content doesn’t overlap or disappear when users adjust text size for their vision needs.
Audio and Video Accessibility (4 Items)
Making audio and video content accessible to users with hearing and visual impairments.
Provide Captions for Videos
Closed captions display spoken dialogue and important sound effects as text synchronized with your video content. This makes videos accessible to the 466 million people worldwide with hearing loss and also benefits users watching in sound-sensitive environments. Use caption files in WebVTT or SRT format, and ensure they’re accurate, properly timed, and include speaker identification when multiple people are talking.
Offer Transcripts for Audio Content
Provide a complete text version of podcasts, audio announcements, and other sound-based content that users can read at their own pace. Transcripts serve users who are deaf or hard of hearing, those who prefer reading to listening, and improve your content’s searchability. Place transcripts directly below the audio player or provide a clearly labeled link to download or view them on a separate page.
Provide Audio Descriptions for Videos
Audio descriptions narrate important visual information that isn’t conveyed through dialogue, such as actions, scene changes, and on-screen text. This ensures users who are blind or have low vision can fully understand your video content. You can provide descriptions as a separate audio track or create an extended version of the video with pauses for description narration.
Avoid Autoplaying Audio
Audio that plays automatically without user interaction can startle users, interfere with screen readers, and create accessibility barriers for people with cognitive disabilities. If you must include autoplay functionality, ensure the audio is muted by default and provide prominent, easily accessible controls for users to start, pause, and adjust volume. Better yet, require explicit user action before any audio begins playing.
Keyboard Accessibility (4 Items)
Ensuring all website functionalities are accessible via keyboard to accommodate users with mobility impairments.
Ensure All Functionality is Keyboard Accessible
Every interactive element on your site, including buttons, forms, menus, and modal windows, must be fully operable using only a keyboard. Users with motor disabilities often rely on keyboard navigation instead of a mouse, so test your entire site using only Tab, Shift+Tab, Enter, and arrow keys. If you can’t complete a task without a mouse, you’ve identified an accessibility barrier that needs fixing.
Avoid Keyboard Traps
Users navigating with a keyboard should never get stuck on an element where they can’t move forward or backward using standard navigation keys. This commonly occurs with custom widgets, modal dialogs, and embedded content. Test your site thoroughly to ensure users can always escape from any component using Tab, Shift+Tab, or Escape keys without requiring a mouse.
Provide Visible Focus Indicators for Keyboard Navigation
When users navigate your site with a keyboard, they need clear visual feedback showing which element currently has focus. The default browser outline is often sufficient, but you can enhance it with custom CSS that provides a high-contrast border or background change. Never remove focus indicators with CSS unless you’re replacing them with equally visible alternatives, as doing so creates significant accessibility barriers.
Provide Options for Character Key Shortcuts
If your site uses single-character keyboard shortcuts (like pressing “S” to search), provide a way for users to turn them off, remap them, or make them active only when specific components have focus. This prevents conflicts with assistive technologies and speech recognition software that might accidentally trigger these shortcuts. Document all keyboard shortcuts in an easily accessible help section.
Content Structure and Navigation (4 Items)
Organizing content and navigation to improve accessibility and usability for all users.
Use Headings to Structure Content
Organize your content with a logical heading hierarchy using H1 through H6 tags, with only one H1 per page and no skipped levels. Screen reader users navigate pages by jumping between headings, so proper structure helps them quickly find relevant sections. For example, your main title should be H1, major sections H2, and subsections H3, creating a clear outline that benefits all users scanning your content.
Use Clear and Simple Language
Write content at an 8th to 9th grade reading level when possible, avoiding jargon, complex sentences, and unnecessary technical terms. This makes your content accessible to users with cognitive disabilities, non-native speakers, and anyone who benefits from straightforward communication. Tools like Hemingway Editor can help you identify overly complex sentences and suggest simpler alternatives that maintain your message’s integrity.
Use Meaningful Link Text
Write link text that clearly describes the destination or action, avoiding generic phrases like “click here” or “read more.” Screen reader users often navigate by jumping between links, hearing them out of context, so “Download 2024 accessibility report (PDF)” is far more helpful than “click here.” Descriptive links also improve your SEO and help all users make informed decisions about which links to follow.
Provide Clear Labels for Form Fields
Every form input needs a visible label that’s programmatically associated using the label element, not just placeholder text that disappears when users start typing. Include clear instructions about required fields, expected formats (like date or phone number patterns), and any character limits. Error messages should be specific, telling users exactly what went wrong and how to fix it, such as “Email address must include @ symbol” rather than just “Invalid input.”
User Control and Preferences (4 Items)
Providing users with control over content and respecting their preferences to enhance accessibility.
Provide Controls for Moving Content
Any content that moves, scrolls, blinks, or auto-updates must have user controls to pause, stop, or hide it. Carousels, news tickers, and animated elements can distract users with attention disorders and prevent screen reader users from accessing content before it changes. Provide prominent pause buttons and ensure paused content remains visible and accessible for as long as users need.
Avoid Requiring Time Limits for Tasks
Users with cognitive or motor impairments often need more time to complete forms, read content, or make decisions. If you must implement time limits for security reasons, provide options to extend the time, turn it off, or adjust it before it begins. Give users at least 20 seconds warning before a timeout occurs, and make it easy to request more time with a simple action like pressing the spacebar.
Ensure Content Does Not Flash More Than Three Times Per Second
Flashing or strobing content that occurs more than three times per second can trigger seizures in people with photosensitive epilepsy. This includes animations, videos, GIFs, and any rapidly changing visual elements. If you must include flashing content, keep it below this threshold, make it small (less than 25% of the screen), and provide warnings so users can avoid it entirely.
Add a ‘Skip to Content’ Option
Place a “skip to main content” link as the first focusable element on your page, allowing keyboard and screen reader users to bypass repetitive navigation menus and jump directly to your primary content. This link can be visually hidden until it receives focus, but it should become clearly visible when a user tabs to it. This simple addition dramatically improves navigation efficiency for users who would otherwise have to tab through dozens of menu items on every page.
Compatibility and Future-Proofing (2 Items)
Ensuring content is compatible with current and future technologies to maintain accessibility.
Maximize Compatibility with Current and Future User Agents
Build your website using valid, standards-compliant HTML and ARIA attributes that work reliably with assistive technologies like screen readers, voice recognition software, and alternative input devices. Avoid deprecated HTML elements and proprietary code that might not be supported by future browsers or assistive technologies. Regular testing with tools like WAVE, axe DevTools, and actual assistive technologies ensures your site remains accessible as technology evolves.
Identify the Language of the Page
Add a lang attribute to your HTML tag specifying your page’s primary language (like lang=”en” for English or lang=”es” for Spanish). This helps screen readers use the correct pronunciation rules and enables browser translation features to work properly. If you include content in multiple languages on the same page, mark those sections with their own lang attributes to ensure accurate interpretation by assistive technologies.
Completing this wcag accessibility checklist represents a significant step toward creating an inclusive digital experience that serves all users, regardless of their abilities. By implementing these 28 items across text content, multimedia, keyboard navigation, content structure, user controls, and technical compatibility, you’re not just meeting legal requirements but also expanding your audience, improving user experience, and demonstrating social responsibility. Remember that accessibility is an ongoing commitment, not a one-time project, so regularly audit your site as you add new features and content.
If you’re ready to make your website truly accessible but need expert guidance on implementation, testing, or ongoing compliance, we’re here to help. Our team specializes in creating accessible digital experiences that don’t compromise on design or functionality. Let’s Talk Growth and explore how we can transform your website into an inclusive platform that serves every visitor effectively while strengthening your brand’s reputation and reach.
Every service.
One price.