WCAG 2.2 Fix Guides

How to fix every common accessibility violation

Step-by-step guides with code examples for the 20 most common WCAG 2.2 failures. Free for developers.

20 violation guides
color-contrast
Color Contrast
Text doesn't meet minimum contrast ratio against its background.
Fix it → image-alt
Missing Image Alt Text
Images have no alt attribute or empty alt on informative images.
Fix it → label
Form Input Missing Label
Form inputs have no associated visible or programmatic label.
Fix it → link-name
Links Have No Accessible Name
Links have no text content or accessible name for screen readers.
Fix it → button-name
Buttons Have No Accessible Name
Icon-only or empty buttons have no accessible name.
Fix it → document-title
Missing Page Title
Page has no <title> element or title is empty.
Fix it → html-has-lang
HTML Missing Lang Attribute
The <html> element has no lang attribute identifying the language.
Fix it → landmark-one-main
Page Has No Main Landmark
Page is missing a <main> element to identify primary content.
Fix it → region
Content Not in a Landmark
Some content sits outside any landmark region.
Fix it → heading-order
Heading Levels Skipped
Heading hierarchy jumps levels (e.g. h1 directly to h3).
Fix it → list
List Elements Incorrect
Lists contain invalid direct children like <div> or <p>.
Fix it → listitem
List Items Outside a List
<li> elements are not contained within a <ul> or <ol>.
Fix it → keyboard
Elements Not Keyboard Accessible
Interactive elements can't be reached or activated by keyboard.
Fix it → focus-visible
Focus Indicator Not Visible
Keyboard focus indicator has been hidden with outline:none.
Fix it → skip-link
Missing Skip Navigation Link
No skip link to let keyboard users bypass repeated navigation.
Fix it → aria-allowed-attr
Invalid ARIA Attribute
ARIA attribute is not valid for the element's role.
Fix it → aria-required-attr
Required ARIA Attribute Missing
A required ARIA attribute for this role is not present.
Fix it → frame-title
Iframe Missing Title
Iframe elements have no title attribute describing their content.
Fix it → duplicate-id
Duplicate IDs on Page
Multiple elements share the same id attribute value.
Fix it → empty-heading
Empty Heading
A heading element exists but contains no text content.
Fix it →