Post at a Glance
After running my past couple of tests for broken links, performance and accessibility I realized my site had room for improvement. So I set out to create a web accessibility checklist of things anyone could do to make their websites more ARIA compliant. This way you can provide a better experience for anyone with disabilities and possibly using a screen reader.
This will also make your site more compliant in Google’s eyes and increase your pagespeed scores. This is important for not only Accessibility, but page performance and compliance.
Web accessibility ensures that websites are usable by everyone, including people with disabilities. This web accessibility checklist provides a comprehensive guide to creating inclusive digital experiences. By following these steps, you can enhance user satisfaction, boost search engine rankings, and comply with legal standards like the Americans with Disabilities Act.
In this article, we explore key principles, practical tips, and best practices to make your site accessible. Whether you are a developer, designer, or content creator, implementing this web accessibility checklist will help you build better websites.
Accessibility is not just a nice-to-have feature; it is essential for reaching a wider audience. According to statistics, about 15 percent of the global population lives with some form of disability. Neglecting accessibility means excluding millions of potential users.
This web accessibility checklist covers everything from keyboard navigation to color contrast, ensuring your site meets WCAG guidelines. WCAG, or Web Content Accessibility Guidelines, is the international standard for web accessibility. Version 2.1 and the upcoming 2.2 provide levels A, AA, and AAA for compliance.
Web Accessibility Compliance Levels Explained
| 🥉Level A (Basic) |
| Minimum requirement, prevents major access issues. |
| 🥈Level AA (Acceptable/Recommended) |
| The practical, recommended, and often legally expected standard for most websites and services. |
| 🥇Level AAA (Comprehensive) |
| Aspirational, offers excellent experience but can be difficult to achieve fully. Conforming to AA automatically meets A; conforming to AAA meets A and AA. |
Web Accessibility Checklist Step by Step
Select the steps from the tabs below to update your own site for better compliance with Google PageSpeed Insights. At the end of each set of steps I suggest running Google PSI to see how close you are to having a more accessibly friendly website.
Step 0👇
Run the first scan of your site through Google PageSpeed Insights if you haven’t already. This will be your base line.
Steps 1-10
Alternative Text for Images to Multiple Ways to Navigate.
1. Provide Alternative Text for Images
Every non-decorative image needs alt text that describes its content and function. For example, if an image is a button, the alt text should convey its purpose. Tools like Photoshop can help prepare images, and knowing how to batch export layers in Photoshop allows efficient creation of accessible graphics. Think, “naming conventions”.
2. Ensure Sufficient Color Contrast
Text and images must have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use tools like the WebAIM Contrast Checker to verify. This prevents issues for users with low vision.
3. Use Semantic HTML Elements
Structure your content with proper tags like <header>, <nav>, <main>, <footer>, and headings (h1 to h6). Avoid using divs for everything; semantic elements help screen readers navigate.
4. Make All Functionality Available from a Keyboard
Ensure users can navigate and interact with your site using only a keyboard. Test by tabbing through elements and using Enter or Space to activate them. Skip links can help jump over repetitive content.
5. Provide Captions and Transcripts for Multimedia
Videos need closed captions, and audio content requires transcripts. This aids deaf or hard-of-hearing users. Tools for creating captions include YouTube’s auto-caption feature, which you can edit for accuracy.
6. Design Forms with Accessible Labels
Each form field must have a label associated via the “for” attribute. Use placeholders as supplements, not replacements. Error messages should be clear and associated with the relevant field.
7. Avoid Time Limits or Provide Adjustments
If your site has time-based content, allow users to extend or disable limits. This is crucial for users who need more time due to cognitive or motor impairments.
8. Use ARIA Attributes Appropriately
ARIA (Accessible Rich Internet Applications) roles, states, and properties enhance accessibility for dynamic content. For instance, use aria-live for updates that screen readers should announce.
9. Ensure Readable Text
Fonts should be resizable text up to 200 percent without loss of content or functionality. Use relative units like em or rem for font sizes.
10. Provide Multiple Ways to Navigate
Offer more than one way to locate content, such as a site map, search function, or breadcrumbs. This helps users with different navigation preferences.
Scan # 2: Run PSI and see what accessibility issues you still have.
Steps 11-20
Descriptive Links to Error Handling.
11. Make Links Descriptive
Avoid vague link text like “click here.” Instead, use descriptive phrases that indicate the destination, such as “Download the web accessibility checklist PDF.”
12. Handle Focus States Visibly
When elements receive focus via keyboard, they should have a visible indicator, like a border or background change, to guide users.
13. Support Customizable Text Spacing
Ensure your layout does not break when users increase line height, paragraph spacing, or letter spacing. Test with browser extensions that simulate these changes.
14. Include Landmarks for Screen Readers
Use ARIA landmarks like role=”banner” for headers and role=”navigation” for menus to help screen readers identify sections.
15. Avoid Automatic Media Playback
Do not autoplay audio or video; provide controls to start and stop. This prevents overwhelming users with sensory sensitivities. And this practice is just straight up heinous for everybody so DON’T DO IT!
16. Test with Assistive Technologies
Regularly test your site with screen readers like NVDA, VoiceOver, or JAWS. Also, use keyboard-only navigation and color blindness simulators..
17. Provide Text Alternatives for Complex Images
For infographics or charts, offer long descriptions or data tables. This ensures data is accessible to all.
18. Ensure Consistent Navigation
Keep navigation consistent across pages to reduce cognitive load. Users should predict where to find menus and links.
19. Use Clear and Simple Language
Write content at a readable level, avoiding jargon unless explained. Tools like Hemingway App can help simplify text.
20. Handle Errors Gracefully
In forms or searches, provide suggestions for fixing errors and prevent submission until corrected. Consistent navigation builds trust and ease. Simple language broadens reach; aim for an 8th-grade reading level. Error handling should be specific, like “Email format invalid: missing @ symbol.”
For tables, here’s a sample accessible table structure:
| Criterion | Description | Compliance Level |
|---|---|---|
| Alt Text | Provide for images | A |
| Contrast | 4.5:1 ratio | AA |
| Keyboard | Full navigation | A |
| Captions | For videos | A |
This table summarizes parts of the web accessibility checklist.
Scan # 3: Run PSI and see what accessibility issues you still have.
Steps 21-25
Accessible Tables to Auditing.
21. Make Tables Accessible
Use <th> for headers, scope attributes, and captions. Avoid using tables for layout; reserve them for data.
Screen readers and other assistive technologies use the <th> tags to help users navigate complex tables and understand which data corresponds to which header.
22. Support Multiple Languages
If your site is multilingual, use lang attributes on HTML elements to indicate language changes for proper screen reader pronunciation.
The lang attribute is crucial for assistive technologies, such as screen readers, to interpret and pronounce text correctly. It enables screen readers to select the appropriate voice and pronunciation rules for the specified language, ensuring a more understandable experience for users with visual impairments.23. Optimize for Mobile Accessibility
Ensure touch targets are at least 48×48 pixels, and gestures are simple. Test with mobile screen readers. A.K.A. the minimum touch target size A.K.A. the Fat Finger rule.
Buttons that are at least 48X48 are easier to navigate on mobile devices. They’re designed for your fingers for touch.
24. Document Accessibility Features
Create an accessibility statement detailing your site’s features, conformance level, and contact for feedback. This is for sites that are legally required to provide accessibly coded websites.
25. Conduct Regular Audits
Schedule periodic accessibility audits using tools like WAVE or Lighthouse to maintain compliance over time.
Scan # 4: Run PSI and see your results. Each site will likely need a bit of tweaking at this point, but this should get you on the right track with having an accessibly compliant website.
Fix Accessibility Issues in Kadence for WordPress:
Here’s exactly how to edit and fix ARIA-related accessibility issues with the Kadence Theme + Kadence Blocks. If this is you’re using Kadence follow these steps. 🤙
WordPress Web Accessibility Checklist
Step 1. Global ARIA Landmark Fixes (the biggest score boosters)
Kadence already adds most landmark roles automatically, but it sometimes skips or mislabels them on custom layouts.
Fix these in seconds:
A. Add/Fix Main Navigation ARIA Label
- Go to Appearance > Customize > Header > Primary Navigation.
- Scroll down to Navigation Label (this adds aria-label to the <nav>).
→ Type something like: Main navigation or Primary menu
→ This instantly fixes the Lighthouse warning “<nav> element does not have a [role=navigation] or label”.
B. Add Skip-to-Content Link (free built-in option)
- Appearance > Customize > General > Accessibility
- Turn ON “Enable Skip to Content Link”
→ Kadence adds <a class=”skip-link screen-reader-text” href=”#main”>Skip to content</a> automatically.
→ Fixes “Page does not have a skip link” (worth – 5–8 points).
C. Force Proper Landmark Roles on Rows/Sections
Kadence Blocks sometimes outputs <section> or <div> without a landmark role.
Quick fix for every page:
- Edit the page with Gutenberg.
- Click the Row/Section that contains your main content (usually the first big row after the header).
- In the right sidebar → Advanced tab → HTML Anchor & Additional CSS section.
Add this under HTML Tag or Additional CSS Class(es):
| What you want | How to add it in Kadence Blocks |
|---|---|
| <main> landmark | Advanced → HTML Element → change from section or div to main |
| <nav> for secondary menu | Same → change to nav |
| Proper ARIA label on a section | Advanced → ARIA Label field → type “Main content” or “Portfolio gallery” |
Do this once on your homepage’s hero or first content row → turns a generic <section> into <main id=”main” role=”main”> → Lighthouse loves it.
Step 2. Web Accessibility Checklist: Fix Buttons & Links That Have No Discernible Name
Kadence’s “Icon Button” block is the #1 offender on most Kadence sites.For every button that’s icon-only or has vague text:
- Edit the button block.
- Right sidebar → Accessibility section (Kadence added this in 2023).
- Screen Reader Text → type “View project”, “Download resume”, “Send message”, etc.
- Or fill ARIA Label field directly (overrides everything).
This adds either hidden screen-reader text or aria-label without changing the visible design.
Step 3. Web Accessibility Checklist: Fix Form Accessibility (your contact form)
If you’re using Kadence’s own form or a third-party form inside a Kadence row:
- Edit the form block (or WPForms/Contact Form 7 block).
- Kadence Blocks → Advanced tab → make sure the wrapper has:
- HTML Element = form
- ARIA Label = “Contact form” or “Project inquiry form”
Most people just leave the wrapper as div → Lighthouse flags “Form elements do not have associated labels” even if the actual form plugin is fine.
Step 4. Web Accessibility Checklist: One-Click Plugin That Fixes 90 % of Kadence ARIA Issues
Automatically Install Kadence Companion – Accessibility (free plugin by Kadence):
- Log in to your WordPress Admin Dashboard.
- Navigate to Plugins > Add New.
- In the search bar (top right), type “Kadence” or “Kadence Accessibility”.
- Find the correct Kadence plugin (like “AI Powered Starter Templates” or similar companion) and click “Install Now”.
- After installation, click the blue “Activate” button.
After activating:
- It forces proper landmark roles on all rows that should be main/article/aside.
- Adds skip links.
- Fixes empty button names.
- Adds aria-current=”page” to the current menu item.
Many Kadence users jump from 82 → 96 just by installing this single plugin.
| Task | Where | Done? |
|---|---|---|
| Add navigation label | Customize → Header → Primary Navigation | ☐ |
| Enable Skip to Content | Customize → General → Accessibility | ☐ |
| Change first content row to <main> | Edit homepage → Row → Advanced → HTML Element = main | ☐ |
| Add screen-reader text or aria-label to every icon-only button | Button block settings | ☐ |
| Install Kadence Accessibility plugin | Plugins → Add New → search “Kadence Accessibility” | ☐ |
Do these five things → purge LiteSpeed cache → re-run PageSpeed Insights mobile. You’ll almost certainly jump from 85 % into the 93-98 green zone.
Related Posts:
 | Web Design Services: Custom, responsive sites with stunning UX/UI, fast load times & SEO-ready code. Convert visitors into customers.More >> |
 | Search Engine Optimization Services: Boost your site's visibility with tailored keyword research, on-page optimization & analytics. Drive organic traffic!More >> |
 | WordPress Services: Custom themes, WooCommerce, speed & SEO optimization. Secure, scalable sites that rank higher & convert better.More >> |
Leave a Reply
You must be logged in to post a comment.