Accessibility basics for online stores: 6 fixes that matter

An accessible store is one that people using screen readers, keyboards or voice control can browse and buy from. It also tends to be clearer for everyone else. Most of the basics are small HTML fixes, and the six below cover the problems seen most often on product and checkout pages.

1. Add alt text to informative images

Every product image that conveys information needs an alt attribute describing it, such as "Navy waterproof jacket, front view". Purely decorative images should carry an empty alt="" so screen readers skip them. A missing alt attribute is different from an empty one: the first is an error, the second is intentional.

2. Label every form field

Each input, select and textarea needs a visible <label> linked to it, or an aria-label when a visible label is not practical. Placeholder text alone does not count: it disappears when typing starts and is not reliably announced.

<label for="email">Email address</label>
<input id="email" type="email" name="email">

3. Give every link accessible text

An icon-only link, such as a cart or social icon, is announced as just "link" unless it has text. Add visible text inside it, or an aria-label describing the destination: aria-label="View your cart".

4. Replace "click here" and "read more"

Screen-reader users often navigate by a list of links read out of context. A list of ten "Read more" links is useless. Write link text that stands alone, for example "Read our shipping policy".

5. Declare the page language

Set the lang attribute on the <html> element, for example <html lang="en">. Screen readers use it to choose the right pronunciation. On a multilingual store, each language version should carry its own value.

6. Mark up the main content

Wrap the primary content of each page in a <main> element. It lets keyboard and screen-reader users skip the header and navigation and jump straight to the products or article.

What these fixes do not cover

These are the basics that can be checked from a page's HTML. Colour contrast, visible focus states, keyboard-only navigation and accessible pop-ups need manual testing, ideally with a real screen reader. Legal accessibility requirements vary by country and sector, so check the rules that apply to you.

Alt text and clear page structure also help search engines and AI assistants understand your pages, as covered in product page titles and meta descriptions.

How Averifly helps

Averifly's accessibility rules check for images missing alt text, form fields without a label, links with no text or generic text, a missing lang attribute and a missing main landmark. See them all in our rules, then run a free scan to find the pages that need fixing.