WCAG Fix Templates

Common accessibility issues with copy-paste code solutions

Major

Incorrect ARIA Usage

WCAG 4.1.2 Level A

ARIA attributes must be used correctly.

Don't do this
<div aria-label="Menu">
  <button aria-hidden="true">Open</button>
</div>

<input aria-required="yes">
Do this instead
<nav aria-label="Main navigation">
  <button aria-expanded="false" aria-controls="menu">
    Open Menu
  </button>
  <ul id="menu" hidden>...</ul>
</nav>

<input aria-required="true" required>
Tips:
  • First rule of ARIA: don't use ARIA if you can use HTML
  • Use aria-hidden carefully - hides from screen readers
  • Boolean ARIA values are "true" or "false", not "yes"
  • Test with actual screen readers

Find these issues automatically

WCAG Pulse scans your website and shows exactly which fixes you need.

Try Free Scan