WordPress Accessibility Guide: Making Your Site WCAG Compliant

Web accessibility ensures your website works for everyone — including the 1.3 billion people worldwide living with disabilities. Beyond ethics, accessibility is increasingly a legal requirement (ADA in the US, EAA in the EU) and an SEO advantage. Google explicitly rewards accessible websites: semantic HTML, proper heading hierarchy, alt text, and keyboard navigation are all ranking factors. Making your site accessible improves SEO, reduces legal risk, and expands your potential audience by 15-20%. After converting your website to WordPress, accessibility should be a priority. AI to Wordpress preserves your original site's structure, but if the source site had accessibility gaps, those carry over to WordPress. An audit and remediation process ensures your converted theme meets WCAG 2.1 AA standards.

WCAG (Web Content Accessibility Guidelines) 2.1 Level AA is the standard target. Key requirements: **Perceivable:** • All images have descriptive alt text • Videos have captions and transcripts • Color contrast ratio: 4.5:1 for normal text, 3:1 for large text • Content doesn't rely on color alone to convey information • Text can be resized to 200% without loss of functionality **Operable:** • All functionality accessible via keyboard (Tab, Enter, Escape, Arrow keys) • Skip navigation link for screen reader users • No keyboard traps (focus can always move forward) • Focus indicators visible on all interactive elements • Sufficient time for user interactions **Understandable:** • Language attribute set on HTML element • Consistent navigation across pages • Form labels clearly associated with inputs • Error messages descriptive and helpful • No unexpected context changes **Robust:** • Valid HTML markup • ARIA roles and landmarks used correctly • Compatible with assistive technologies • Works across browsers and devices

Follow this systematic approach to audit your converted WordPress site: **Step 1: Automated Testing** Use free tools for initial scanning: • WAVE (wave.webaim.org): Browser extension showing errors inline • axe DevTools: Chrome extension with detailed reports • Lighthouse (Chrome DevTools): Accessibility score with recommendations • Pa11y: Command-line tool for CI/CD integration **Step 2: Manual Testing** Automated tools catch ~30% of issues. Manual testing is essential: • Navigate entire site using only keyboard (Tab, Enter, Escape) • Test with screen reader (NVDA for Windows, VoiceOver for Mac) • Zoom browser to 200% — check for content overflow • Disable CSS and check content order • Test forms with screen reader **Step 3: User Testing** If possible, test with actual users who use assistive technologies. **Common Issues Found in Converted Sites:** • Missing alt text on images (most common) • Insufficient color contrast • Missing form labels • Non-descriptive link text ('click here', 'read more') • Missing skip navigation link • Focus not visible on interactive elements • Heading hierarchy gaps (H1 → H3 skipping H2)

**Missing Alt Text:** Media Library → click image → add descriptive alt text. For decorative images, set alt='' (empty). AI to Wordpress's SEO features add basic alt text, but review and improve manually. **Color Contrast:** Use WebAIM's contrast checker. If your converted theme has low-contrast text: ```css /* Additional CSS in Customizer */ body { color: #1a1a2e; } /* Dark text on light backgrounds */ a { color: #2563eb; } /* Blue links with sufficient contrast */ ``` **Keyboard Navigation:** Add visible focus styles: ```css *:focus { outline: 3px solid #2563eb; outline-offset: 2px; } ``` Ensure all clickable elements are <a> or <button> elements, never <div onclick>. **Skip Navigation Link:** Add to header.php: <a class='skip-link' href='#main-content'>Skip to content</a> With CSS: .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 10px; top: 10px; z-index: 999; } **Form Labels:** Ensure every <input> has a <label> with matching 'for' attribute. WPForms and Gravity Forms handle this automatically. **Heading Hierarchy:** Ensure one H1 per page, followed by H2, H3 in logical order. Use Yoast SEO's readability check to verify.

**WP Accessibility (Free)** The most comprehensive accessibility plugin: • Adds skip navigation link • Enforces alt text on image uploads • Removes tabindex from elements that shouldn't have it • Adds language and text direction attributes • Forces focus outline visibility **One Click Accessibility (Free)** • Adds accessibility toolbar for visitors • Font size adjustment • Contrast mode toggle • Highlight links • Readable font option **Access Monitor (Premium $49/year)** • Automated WCAG testing • Scheduled accessibility scans • Issue tracking and prioritization • Compliance reporting **Accessibility Checker by Starter (Free)** • In-editor accessibility checking • Highlights issues while editing content • Provides fix suggestions • Tracks improvement over time **Important Note:** Accessibility overlays (like AccessiBe) that add JavaScript widgets are NOT substitutes for proper accessibility. They often create more problems than they solve and don't meet legal compliance requirements. Fix issues in your code instead.

Accessibility isn't a one-time fix — it's an ongoing commitment. **Content Creation Checklist:** ✅ Add alt text to every image ✅ Use proper heading hierarchy ✅ Write descriptive link text (not 'click here') ✅ Ensure sufficient color contrast in graphics ✅ Add captions to videos ✅ Test new pages with keyboard navigation **Monthly Tasks:** • Run WAVE scan on new/updated pages • Check Lighthouse accessibility score • Review and fix any new issues • Test forms with keyboard and screen reader **Quarterly Tasks:** • Full site audit with automated tools • Manual keyboard navigation test of all pages • Test with screen reader • Review and update accessibility statement **Annual Tasks:** • Professional accessibility audit (if budget allows) • Update accessibility policy • Train content team on accessibility best practices • Review compliance with latest WCAG updates **Accessibility Statement:** Add a page explaining your accessibility commitment, current conformance level, and contact information for accessibility feedback. Link from footer.