How-to

Step-by-step fixes for common accessibility issues

Most accessibility issues are not new ideas. They are the same handful of patterns showing up across sites in different costumes. Each guide below covers the symptom, why it fails WCAG, the wrong pattern to avoid, and the right pattern to copy. No filler.

Run a free scan

Critical — fix immediately

missing alt text on images

1.1.1

Screen readers announce "graphic" or read out the file path. Images convey no meaning.

keyboard trap in modal or widget

2.1.2

Tab inside a modal cycles forever; no way to escape with the keyboard.

video without captions

1.2.2

Deaf users cannot access audio content.

Serious — high priority

low color contrast

1.4.3

Body text in pale gray on white, sale prices in faint red, focus rings invisible against background.

form fields without labels

3.3.2

Screen readers announce "edit text, blank" with no idea what to enter.

empty links and image-only links

2.4.4

Screen reader announces "link" with no destination context.

empty buttons / icon-only buttons

4.1.2

Screen reader announces "button" with no purpose.

auto-playing video with sound

1.4.2

Video plays sound on page load with no immediate pause control.

data table without headers

1.3.1

Screen readers announce table cells with no column or row context.

invisible focus indicator

2.4.7

Tabbing through the page shows nothing about which element has focus.

missing or duplicate page titles

2.4.2

Browser tab shows "Untitled" or every page has the same title.

session timeouts without warning

2.2.1

Form data is lost when an idle session expires without warning.

placeholder used as label

3.3.2

Once typing starts, the field has no visible label.

Moderate — schedule next sprint

missing H1 / wrong heading order

2.4.6

No H1 on the page, or multiple H1s, or skipped levels (H2 → H4).

missing skip-to-main-content link

2.4.1

Tab on every page goes through 20+ nav items before reaching content.

missing lang attribute on <html>

3.1.1

Screen readers read content with the wrong language phonetics.

ARIA misuse and conflicting roles

4.1.2

Custom components break in screen readers because of conflicting or invalid ARIA.

missing autocomplete attributes

1.3.5

Browsers cannot autofill names, addresses, or payment fields.

iframe without title

4.1.2

Screen readers announce "frame" with no description.

lists not marked up as lists

1.3.1

Screen readers do not announce list count or position.

duplicate id attributes

4.1.1

aria-describedby and label-for break unpredictably.

small touch targets

2.5.5

Mobile users miss-tap small icons.

Minor — cleanup pass

respect prefers-reduced-motion

2.3.3

Vestibular-disorder users see animations they cannot disable.

redundant title attributes

2.4.6

Hover tooltips redundantly repeat visible text or hide critical info from keyboard users.

Run a free Certvo scan first to see which of these issues actually exist on your site, sorted by impact. The audit takes 60 seconds and points to the exact page and element for each finding.

Get a real audit, not an overlay.

Free 60-second AI scan, every issue mapped to a WCAG rule.

Run my free scan Compare plans