← Back to Semnal
RO IT EN

Common web accessibility errors and how to fix them

The most frequent issues detected by axe-core (the engine also used by Chrome DevTools, Google Lighthouse, and Semnal) — with a concrete code example, not just theory.

1. Images without alt text (image-alt) 2. Form fields without a label (label) 3. Insufficient text/background contrast (color-contrast) 4. Buttons without an accessible name (button-name) 5. Links without descriptive text (link-name) 6. Page missing the lang attribute (html-has-lang)
axe-core: image-alt

1. Images without alt text

The most common error found on the web. A screen reader can't "see" an image — without an alt attribute, it just announces "image", with no context. For someone navigating with a screen reader, a page full of "image, image, image" is unusable.

Wrong
<img src="our-team.jpg">
Right
<img src="our-team.jpg" alt="The Semnal team at our Porto Viro office">

If the image is purely decorative (adds no information), use alt="" — empty, but present — so the screen reader skips it, instead of reading out the filename letter by letter.

axe-core: label

2. Form fields without a label

A placeholder is not a label. It disappears the moment the user starts typing, and some screen readers don't announce it at all. Without a properly linked <label>, someone navigating by keyboard or screen reader doesn't know what to enter in the field.

Wrong
<input type="email" placeholder="Your email">
Right
<label for="email">Your email</label> <input type="email" id="email">
axe-core: color-contrast

3. Insufficient contrast between text and background

WCAG 2.1 AA requires a minimum of 4.5:1 for normal text and 3:1 for large text (18px+ bold, or 24px+ normal). Light gray text on a white background, trendy in a lot of "minimalist" design, often fails this test — and it's hard to read for anyone with reduced vision, not just people with a diagnosed visual disability.

Wrong — 2.3:1 ratio
color: #999999; background: #ffffff;
Right — 4.6:1 ratio
color: #595959; background: #ffffff;
axe-core: button-name

4. Buttons without an accessible name

A button with only an icon (e.g. an X for "close", a magnifying glass for "search") is silent to a screen reader if it has no visible text or aria-label. The user just hears "button", with no idea what it does.

Wrong
<button><svg>...</svg></button>
Right
<button aria-label="Close dialog"><svg>...</svg></button>
axe-core: html-has-lang

6. Page missing the lang attribute

Without lang="en" on the <html> tag, a screen reader doesn't know which pronunciation to use and may read the entire page with the wrong accent — a page in one language read with another language's pronunciation is practically unintelligible.

Wrong
<html>
Right
<html lang="en">

These are just 6 of the dozens of WCAG 2.1 AA rules checked automatically.

Scan your site free with Semnal →

© 2026 semnal.cloud. All rights reserved.