Skip to main content

The accessibility issues that show up most (and how to fix them)

· 5 min read
The VeriWasp Team
Automated testing for indie SaaS

Accessibility can feel like an endless spec, but in practice a small number of issues account for the large majority of what any scan finds. Fix these and you clear most of the gap to WCAG 2.1 AA. Here is the short list, what each one means, who it hurts, and how to fix it.

1. Low color contrast

What it is. Text or interactive elements that do not stand out enough from their background. WCAG asks for a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text and for user interface components like icons and input borders.

Who it affects. Anyone with low vision or color vision differences, and honestly everyone on a dim laptop screen in a bright room.

How to fix it. Check your palette with a contrast checker and darken text or lighten backgrounds until it passes. The common trap is light gray "secondary" text and faint placeholder text, both of which fail constantly. Brand colors used for buttons and links are the next most frequent offender.

2. Missing or meaningless alt text

What it is. Images that carry information but have no text alternative, so a screen reader announces nothing useful (or reads out a filename like IMG_2157.jpeg).

Who it affects. Screen reader users, and anyone on a slow connection where images fail to load.

How to fix it. Give every meaningful image alt text that describes its purpose, not its appearance. A logo's alt should be the company name, a chart's alt should state the takeaway. Decorative images that add nothing should have an empty alt (alt="") so assistive technology skips them rather than announcing clutter.

3. Form fields without labels

What it is. Inputs where the only visible cue is a placeholder, or a label that is not programmatically connected to its field.

Who it affects. Screen reader users, who hear an unlabeled "edit text" with no idea what to type, and anyone relying on voice control to target fields by name.

How to fix it. Every input needs a real label associated with it (a <label for> tied to the input's id, or an aria-label). Placeholders are not labels: they vanish the moment someone starts typing, and their contrast is usually too low anyway.

4. No keyboard access

What it is. Interfaces you can only use with a mouse: custom dropdowns that do not open on Enter, modals that trap focus, scrollable regions a keyboard cannot reach, or elements with no visible focus outline.

Who it affects. People who cannot use a mouse, including many motor-impaired users and most screen reader users, plus keyboard power users.

How to fix it. Tab through your whole app without touching the mouse. Every interactive element should be reachable, operable with Enter or Space, and should show a clear focus ring. Do not remove focus outlines in CSS without replacing them with something equally visible.

5. Broken heading order

What it is. Headings that skip levels (an h1 followed by an h3) or are used for styling rather than structure.

Who it affects. Screen reader users navigate by heading the way sighted users skim by eye. A broken outline makes a page hard to navigate and hard to understand.

How to fix it. Use one h1 per page, then nest headings in order without skipping. If you want a smaller heading, style it with CSS. Do not reach for a lower heading level just to get smaller text.

What it is. Inline links that look identical to the surrounding text except for their color. WCAG requires that links in a block of text be distinguishable by something other than color alone, unless the color contrast against the surrounding text is at least 3:1.

Who it affects. People with color vision differences, who may not see the color cue at all.

How to fix it. Underline inline links, or ensure the link color has enough contrast against the body text (not just the background). Underlines are the simplest, most universally understood signal.

Where to start

If you do nothing else, run an automated scan first. These six categories are exactly what an automated pass detects reliably and quickly, which is why it is the right first step before any manual review: the machine handles the mechanical, high-volume failures, and you spend human attention on the judgment calls it cannot make.

VeriWasp's free accessibility scanner crawls your site, runs a real WCAG check on each page, and groups the results by rule so you see "12 images missing alt text across 3 pages" as one line item to work through, not a scattered list. Knowing which of these six is actually hurting you is most of the battle.