How to find and fix accessibility issues on your product pages (for free)

1. Missing alt text on images

“Image elements do not have [alt] attributes”

Alt text is the description read aloud by screen readers when images can’t be seen. On product pages, it’s how customers using a screen reader understand what’s being sold. When lighthouse reports "Image elements do not have [alt] attributes", a product photo has no alt text, and your customer using assistive technology hears only "image", or worse - the filename.

How to fix this issue: Add short, useful descriptions for every product image, focusing on what would help someone decide to buy. If you're not sure - imagine you're describing the image to a friend in the next room. For example: "Navy waterproof jacket with zippered pockets and a large hood." For a deeper guide, see how to write good alt text for product images.

2. Low colour contrast

"Background and foreground colours do not have a sufficient contrast ratio"

Low contrast makes text incredibly hard to read, especially on mobile or in bright light. I think everyone has struggled with this at some point. Whether you're reading the webpage in strong light, or have an eye condition. Faint grey text on a light background might look sleek, but if customers can’t read your content or button labels - they can’t buy.

How to fix this issue: Use a free contrast checker and aim for at least a 4.5:1 ratio between text and background. If your palette is light, darken the text slightly or lighten the background. The design will still feel on-brand, just more readable.

And if you're wondering where the 4.5:1 comes from - you can read more about WCAG colour contrast guidelines

3. Missing form labels

"Form elements do not have associated labels"

Form fields without labels confuse assistive technologies and frustrate customers. A screen reader user might hear "edit text" with no hint it's for a name, email address or quantity.

A common accepted pattern is to use visible labels above each field, with optional hint text below. This works well for everyone, as clicking the label also focuses the field.

How to fix this issue: Make sure every field has a visible label which is clearly associated with and linked to the input. Avoid relying solely on placeholders, which disappear once you type.

4. Vague link text

"Links do not have a discernible name"

Links like “Click here” or “Read more” don’t tell your customers where they're about to go. Screen reader users will often hear a list of links on the page, so descriptive wording matters. Even sighted users skim links to decide what's relevant.

How to fix: Write link text that makes sense on its own. For instance, “View size guide for this jacket” instead of “View details.” It’s clearer for everyone (and helps SEO too).

5. Icon buttons without accessible names

"Buttons do not have an accessible name"

Buttons that only show icons - like a shopping bag or heart icon - are extremely confusing. They might look visually appealing, but without proper labeling, assistive tech can't interpret them. Someone using a screen reader just hears “button, button, button,” with no clue which one opens the basket or adds the item to their favorites.

How to fix: Give every icon button an accessible name such as “Add to basket,” “Search,” or “Remove item.” Your developer can do this with a hidden label or an aria-label - no design change needed.

6. Inconsistent heading structure

"Headings do not have a consistent structure"

Headings help people (and assistive tech) understand the page structure. If the code jumps from a top-level heading (H1) straight to a H4, or skips sections entirely, navigation becomes confusing.

How to fix: Use one H1 for the page title, then H2s for major sections and H3s for subsections. Ask your developer to check that the heading levels in code match the visual layout customers see.

7. Missing or hidden focus indicators

"Focus indicators are not visible"

When navigating with a keyboard, users will move between links and buttons using the Tab key. If there’s no visible outline showing where they are, it’s easy to get lost - especially on complex product pages.

How to fix: Make sure every interactive element shows a visible outline when selected. Avoid removing browser outlines with outline: none. If your brand design hides them, replace them with a custom focus style instead.

8. Touch targets too small or close together

"Touch targets are too small or close together"

Tiny or tightly packed buttons cause mistaps on mobile. If customers accidentally remove items instead of adding them, frustration builds quickly — and they abandon the basket.

How to fix: Ensure clickable areas are at least 48×48 pixels with enough spacing between them. Test your pages on a phone: if you have to zoom in to tap, it’s too small.

9. Buttons without accessible names

"Buttons do not have an accessible name"

Some sites build “buttons” using generic HTML elements like divs or spans. They look clickable but don’t behave like real buttons for assistive technologies, meaning customers can’t trigger key actions.

How to fix: Use semantic <button> elements wherever possible. If your design system uses custom components, ensure they include an accessible name and proper role in the code so they can be detected by assistive tech.

10. Missing page landmarks

"Page does not have a main landmark"

Landmarks (like <nav>, <main>, and <footer>) help screen reader users navigate quickly through a page. For assistive technologies, without them, users have to tab through everything to reach key content areas.

How to fix: Ensure each page includes standard HTML landmarks for navigation, main content, and footer. Developers can check this easily using the Accessibility panel in Chrome DevTools.