Home / Accessibility Fixes

WCAG Accessibility Fixes

20 guides with before/after code examples for the most common WCAG violations.

Add Missing Alt Text to Imagescritical

Learn how to add descriptive alt text to images for accessibility. Includes code exam…WCAG 2.1 Success Criterion 1.1.1 · A

Improve Color Contrastserious

Learn how to fix low color contrast to meet WCAG AA and AAA standards. Includes tools…WCAG 2.1 Success Criterion 1.4.3 · AA

Add Missing Form Labelscritical

Learn how to properly label form fields for accessibility. Includes HTML, React, Word…WCAG 2.1 Success Criterion 1.3.1 and 3.3.2 · A

Add Language Attribute to HTMLmoderate

Learn how to add the lang attribute to HTML pages for proper accessibility and SEO. I…WCAG 2.1 Success Criterion 3.1.1 · A

Enable Keyboard Navigationcritical

Learn how to ensure all page functionality is accessible via keyboard. Includes code …WCAG 2.1 Success Criterion 2.1.1 · A

Add Visible Focus Indicatorsserious

Learn how to add visible focus indicators for keyboard navigation. Includes CSS examp…WCAG 2.1 Success Criterion 2.4.7 · AA

Add Skip Navigation Linksmoderate

Learn how to implement skip navigation links to help keyboard users bypass repetitive…WCAG 2.1 Success Criterion 2.4.1 · A

Add Captions to Videoscritical

Learn how to add captions and transcripts to videos for accessibility. Includes tools…WCAG 2.1 Success Criterion 1.2.2 and 1.2.3 · A

Add ARIA Labels to Custom Componentsserious

Learn how to use ARIA attributes to label custom components, buttons, and interactive…WCAG 2.1 Success Criterion 1.3.1 and 4.1.2 · A

Fix Heading Hierarchyserious

Learn how to use proper heading hierarchy (H1-H6) for accessibility and SEO. Includes…WCAG 2.1 Success Criterion 1.3.1 and 2.4.10 · A

Make Link Purpose Clearmoderate

Learn how to write clear link text that describes the destination. Includes code exam…WCAG 2.1 Success Criterion 2.4.4 · A

Identify and Explain Form Errorsserious

Learn how to provide clear, accessible error messages and validation feedback. Includ…WCAG 2.1 Success Criterion 3.3.1 and 3.3.4 · A

Warn Users About Session Timeoutsmoderate

Learn how to implement accessible session timeout warnings that give users time to re…WCAG 2.1 Success Criterion 2.2.1 · A

Remove Unexpected Content Changesmoderate

Learn how to prevent unexpected content shifts and layout changes that disorient user…WCAG 2.1 Success Criterion 2.4.4 (motion) and 2.3.3 (flashing) · A

Make PDFs Accessibleserious

Learn how to create or remediate PDFs for accessibility. Includes tagging, OCR, and t…WCAG 2.1 Success Criterion 1.1.1, 1.3.1, 4.1.2 · A

Add Table Headers and Scopeserious

Learn how to make HTML tables accessible with proper headers and scope attributes. In…WCAG 2.1 Success Criterion 1.3.1 · A

Ensure Buttons Have Accessible Namesserious

Learn how to ensure all buttons have descriptive, accessible names. Includes code exa…WCAG 2.1 Success Criterion 4.1.2 · A

Replace Images Containing Textserious

Learn why images containing text are inaccessible and how to use real text instead. I…WCAG 2.1 Success Criterion 1.4.5 · AA

Ensure Content Reflows at Zoom and Mobile Sizesserious

Learn how to make pages reflow properly at different zoom levels and mobile sizes. In…WCAG 2.1 Success Criterion 1.4.10 · AA

Identify Input Purpose Programmaticallymoderate

Learn how to use autocomplete attributes to identify form field purpose. Helps browse…WCAG 2.1 Success Criterion 1.3.5 · AA