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

You can find your product-page issues in under 5 minutes using PageSpeed Insights.

If you’re ready to improve your product page accessibility and open up your store to more customers, but aren’t sure where to start, Google’s free PageSpeed Insights is a great first step.

Head over to PageSpeed Insights and paste in one of your product page URLs. In seconds, it will analyse your page for accessibility, performance, SEO, and best practices. You don’t need to understand the technical details - PageSpeed flags the issues, and this guide explains what they mean in plain English.

Below are the most common accessibility issues I see on ecommerce sites, what each one means, and why fixing them makes your product pages easier, faster, and more profitable for everyone.

  1. 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. 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. 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. 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 list out the links on the page when browsing your site, so descriptive wording matters. Even sighted users skim links to decide what's relevant.

    Clearer links reduce misclicks and speed up product discovery.

    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. 5. Buttons without accessible names

    "Buttons do not have an accessible name"

    This issue appears in two common ways on product pages, and both are extremely confusing and block customers from completing key actions.

    Icon-only buttons: are buttons that only show icons - like a shopping bag, heart, or search icon - without any visible or invisible label. They might look clean, but without proper labeling, assistive technologies can't interpret them. Someone using a screen reader often just hears "button, button, button," with no clue which one opens the basket or adds the item to their favorites.

    Fake buttons built from divs: are also an increasingly common issue. If your "buttons" are built using generic HTML elements like <div> or <span>. These fake buttons look clickable, but they don't behave like real buttons for assistive technologies, meaning customers can't trigger key actions like adding to basket or selecting product options.

    How to fix: First, use semantic code like <button> elements wherever possible - not divs or spans. Then, give every button (especially icon buttons) an accessible name such as "View basket," "Favorites," or "Search." This doesn't even require a design change - just proper naming.

  6. 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. And avoid skipping heading levels.

  7. 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 very easy to get lost - especially on complex product pages. To see this in action, watch how poor focus visibility leaves keyboard users guessing where they are.

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

  8. 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 24×24 CSS pixels (and ideally 48×48 for mobile comfort) with enough spacing between them. Test your pages on a phone: if you have to zoom in to tap, it’s too small.

  9. 9. 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.

    Better structure reduces frustration and speeds up product scanning.

    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.

  10. 10. Incorrect or missing ARIA roles

    "ARIA attributes do not have valid values"

    ARIA roles are often added to make custom components (like tabs, modals, or dropdowns) accessible - but if they’re missing required attributes or used incorrectly, they can confuse instead of helping. A Lighthouse report might show "ARIA attributes do not have valid values" or "Elements with ARIA roles must use a valid, non-abstract role."

    How to fix: Use native HTML elements wherever possible instead of recreating them with divs and spans. When ARIA is needed, follow the WAI-ARIA Authoring Practices to ensure roles, states, and properties are valid and correctly associated. Every ARIA control should have a clear accessible name, label, and defined relationships to its parent and child elements.