Skip to main content

WCAG fix guides

The accessibility problems Accessibility Pro's scanner reports most often, one page each: what fails, who it affects, and the change that fixes it. Every example was run through the scanner before and after the fix, and the fixed version came back with no findings. For the full list of criteria, see the WCAG 2.2 checklist.

  • WCAG 1.4.3 · Level AA

    Fixing low colour contrast

    Why text below 4.5:1 contrast fails WCAG 1.4.3, how to measure it, and a fix the Accessibility Pro scanner verified before and after.

  • WCAG 2.5.8 · Level AA

    Fixing small click and touch targets

    WCAG 2.2 Target Size (Minimum) asks for 24 by 24 pixel targets or enough spacing. What counts, the exceptions, and a scanner-verified fix.

  • WCAG 1.1.1 · Level A

    Giving SVG images a text alternative

    An SVG with role="img" needs an accessible name, or it must be hidden if decorative. The markup that fails WCAG 1.1.1 and a verified fix.

  • WCAG 1.3.1 · Level A

    Fixing skipped heading levels

    Why jumping from h1 to h4 misrepresents a page's structure, how scanners report it, and a heading fix Accessibility Pro verified before and after.

  • WCAG 1.3.1 · Level A

    Fixing duplicate IDs that break labels

    WCAG 2.2 removed 4.1.1 Parsing, but duplicate IDs still break labels and ARIA references. How it fails 1.3.1 and a fix verified by the scanner.

  • WCAG 4.1.2 · Level A

    Fixing invalid ARIA attribute values

    aria-expanded="open" is not a valid state, so assistive technology cannot report it. The WCAG 4.1.2 failure and a fix verified by the scanner.

  • Best practice

    Putting page content inside landmarks

    Content outside header, nav, main and footer is harder to reach with a screen reader. A best-practice fix, with markup the scanner verified.

  • WCAG 2.5.3 · Level A

    Fixing label-in-name mismatches

    A button that shows "Pay now" but is named "Complete purchase" fails WCAG 2.5.3 for voice control users. The rule and a fix verified by the scanner.

  • WCAG 2.4.1 · Level A

    Adding a skip link

    Keyboard users should not tab through the whole navigation on every page. How a skip link satisfies WCAG 2.4.1, with markup the scanner verified.

  • WCAG 1.1.1 · Level A

    Adding alternative text to images

    Every <img> needs an alt attribute: a description when it informs, empty when it decorates. The WCAG 1.1.1 failure and a scanner-verified fix.

  • WCAG 4.1.2 · Level A

    Fixing icon links with no name

    A link that contains only an icon has no name for screen readers or voice control. Why it fails WCAG 4.1.2 and 2.4.4, and a scanner-verified fix.

  • WCAG 4.1.2 · Level A

    Labelling form fields

    A placeholder is not a label: it disappears as people type and is often not announced. How to label form fields properly, with a verified fix.

Before you buy a tool

An overlay script and a scanner solve different problems. Accessibility overlays versus scanners explains what each can and cannot do, and to find these problems on every pull request, see the GitHub Action documentation.