WCAG Fix Templates
Common accessibility issues with copy-paste code solutions
Critical
Empty or Non-descriptive Links
Links must have text that describes their destination or purpose.
✗ Don't do this
<a href="/products"><i class="icon-arrow"></i></a>
<a href="/more">Click here</a>
✓ Do this instead
<a href="/products">
<i class="icon-arrow" aria-hidden="true"></i>
<span class="sr-only">View all products</span>
</a>
<a href="/more">Read more about our services</a>
Tips:
- Avoid "click here", "read more", "learn more" alone
- Use aria-label for icon-only links
- Link text should make sense out of context
- Hide decorative icons with aria-hidden="true"
Critical
Not Keyboard Accessible
All functionality must be available via keyboard.
✗ Don't do this
<div onclick="openMenu()">Menu</div>
<span class="button" onclick="submit()">Submit</span>
✓ Do this instead
<button type="button" onclick="openMenu()">Menu</button>
<button type="submit">Submit</button>
<!-- If div is necessary -->
<div role="button" tabindex="0"
onclick="openMenu()"
onkeydown="if(event.key==='Enter')openMenu()">
Menu
</div>
Tips:
- Use native interactive elements (button, a, input)
- Add tabindex="0" for custom interactive elements
- Handle both click and keyboard events
- Ensure visible focus indicators
Major
Missing Focus Indicator
Interactive elements must have a visible focus indicator.
✗ Don't do this
:focus {
outline: none;
}
✓ Do this instead
:focus {
outline: 2px solid #1e3a5f;
outline-offset: 2px;
}
/* Custom focus styles */
:focus-visible {
outline: 2px solid #1e3a5f;
box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.3);
}
/* Remove only for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
Tips:
- Never use outline:none without alternative
- Focus indicator should be clearly visible
- Use :focus-visible for keyboard-only focus
- Contrast ratio of 3:1 for focus indicator
Minor
Missing Skip Navigation Link
Provide a way to skip repetitive content.
✗ Don't do this
<body>
<nav>... long navigation ...</nav>
<main>Content</main>
</body>
✓ Do this instead
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<nav>... long navigation ...</nav>
<main id="main" tabindex="-1">Content</main>
</body>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #1e3a5f;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>
Tips:
- Skip link should be first focusable element
- Target should have tabindex="-1" for focus
- Make visible on focus for sighted keyboard users
- Consider multiple skip links for complex pages
Find these issues automatically
WCAG Pulse scans your website and shows exactly which fixes you need.
Try Free Scan