♿ Accessibility in online shops – why screen reader users are your customers 🗣️

What accessibility means in e-commerce

Accessibility means that everyone can use your shop, regardless of sight, hearing, motor skills, cognition, or technology. This includes structure, semantics, keyboard navigation, error messages, contrast, media, emails, PDFs, and the entire customer journey up to order confirmation. Accessibility isn't about styling; it's about information and interaction.

For screen reader users, the structure of the DOM is crucial. They "see" heading hierarchies, landmark roles, labels, states, and focus flows. What isn't in the code doesn't exist. That's why semantic HTML is your most powerful tool. After that come meaningful ARIA attributes that fill in gaps, but never mask incorrect HTML.

To get started, I recommend two solid foundational texts:
WCAG Overview (W3C WAI) and BITV 2.0.

Screen readers in practice: How JAWS, NVDA and VoiceOver "think"

Screen readers follow focus and semantic structure. They announce roles, names, and states. Examples: "Link," "Button expanded," "Checkbox not activated," "Heading level 2," "List with 5 items." You control these announcements with native HTML and clean attributes. ARIA only supplements them when the HTML doesn't provide enough information.

Important rules of conduct:

• Always provide a visible and logical keyboard focus. The order corresponds to the visual reading order.
• No focus capture in the overlay. Escape closes. Focus returns to the triggering element.
• Interactive elements are natively interactive. None. <div>-Buttons. Use <button> and <a>.
• Icons without text need a text alternative or a aria-labelDecorative icons are aria-hidden="true".

The 12 most important problem areas in the shop and how to solve them

1. Heading hierarchy

Only one H1 heading per page. Then H2 and H3 headings at logical depth. No jumps between headings. Category and product pages need a clear structure. Filters are not H2 headings if they don't structure the content.

2. Landmarks

use <header>, <nav>, <main>, <aside>, <footer>For multiple navigations, set aria-label such as "Main Navigation" or "Breadcrumb". This allows screen reader users to jump to specific points.

3. How to build product cards correctly

Each card needs a unique product link with the title as the link text. Prices should be text, not just graphics. Avoid nested links. Example:

<article>
  <h3><a href="/p/slug">Sneaker Orion</a></h3>
  <p>Preis: <span aria-label="Preis">89,90 €</span></p>
  <button type="button" aria-label="In den Warenkorb: Sneaker Orion">In den Warenkorb</button>
</article>

Screen reader online shop – E-commerce News – Tips & Tricks – ♿ Accessibility in online shops – why screen reader users are your customers 🗣️

4. Images and alt text

Informational images have a meaningful purpose. alt-Texts. Purely decorative. Pictures get empty alts (alt=""). For variant images, you describe the variant, for example "Red sneakers, side view".

5. Forms, labels, errors

Each field has a connected <label for>Required fields are marked with a label. Errors appear directly next to the field and are linked programmatically. aria-describedby The error message is displayed. A summary of the errors at the beginning of the form is also helpful.

<label for="email">E-Mail</label>
<input id="email" name="email" type="email" aria-describedby="email-error">
<p id="email-error" role="alert">Gültige E-Mail angeben.</p>

6. Keyboard control

Everything is accessible via tabs. No tab indexes except... 0 For dynamically inserted content. Menus, accordions, and carousels follow established keyboard patterns. Arrow keys for menu lists, space and enter for actions.

7. Live regions for dynamic UI

You can cancel shopping cart updates, price changes, or filter results with aria-live="polite" No constant spam. Only new, relevant information.

<div aria-live="polite" id="cart-status"></div>
<script>
  function added(name){
    document.getElementById('cart-status').textContent = name + ' im Warenkorb';
  }
</script>

8. Modal and Offcanvas

Set focus to the modal upon opening. Keep tab focus within the modal. aria-modal="true", role="dialog", descriptive title with aria-labelledbyClose using Escape and the Close button.

9. Contrasts and states

Text contrast at least 4.5:1. Interactive states are recognizable: focus, hover, active. Contrast also applies to error messages, badges, and prices.

10. Tables and Sorting

Comparison tables are needed <th scope="col"> and <th scope="row">Sortable columns have aria-sortNo columns as <div> fake.

11. Media: Video, Audio

Product videos have subtitles. Tutorials have transcripts. Avoid autoplay without sound. The play button is a physical button with text, not just an icon.

12. Captcha and Security

Use accessible solutions. Offer alternatives. Don't force tasks that require sight or hearing. Smooth is better than hard.

Legal framework: What applies to shops

In Germany, public bodies must comply with BITV 2.0. For private companies, the Accessibility Strengthening Act is relevant. It implements EU regulations and also applies to online shops for defined products and services. The goal is a unified market with clear minimum standards. You can find more details in the overview provided by the Federal Ministry of Labor and Social Affairs (BMAS). BFSG at the BMAS.

E-Commerce News - Tips & Tricks These are the things online customers really expect from you

Your development workflow with accessibility checks

Planning

• Defining user journeys: Search, product, variant, shopping cart, checkout, account, Returns.
• Define accessible patterns: Navigation, Filters, Sorting, Modals, Toasts, Tabs, Steps.
• Document the component library with its semantics and keyboard behavior.

Design handshake

• Define contrast and focus states. Save sizes and clickable areas.
• Design error messages, empty states, charging states, and confirmations.
• Record text replacements for icons and media.

Implementation

• Semantic HTML first. ARIA only as a supplement.
• Components with tests: Focus, Roles, Labels, Live Regions, Escape, Tab Order.
• Consistently bind server errors and client errors.

Testing

• Keyboard: Operate the shop completely without a mouse.
• Screen reader Smoke test: Open NVDA or VoiceOver, find product, add to cart, start checkout, cancel order.
• Automated checks for low-hanging fruit. Manual testing for interaction.

For more detailed criteria, if in doubt, use the official specification: E-commerce guidelines from the Federal Agency.

Product detail pages: the most common pitfalls

• Variant selection as spans without rollers. Better buttons with aria-pressed for conditions or real radios with group labels.
• Price is only visually emphasized. Better a clear textual anchor, currency integrated into the reading flow.
• Reviews Star icons without text are fine. "4,6 out of 5 stars, 128 reviews" would be better as text plus visual stars.
• Sticky CTA without focus maintenance. Better to check the focus sequence, avoid jumps.
• Lightbox without semantics. A better option is a dialog pattern with escape, focus trap, and labeling.

Checkout: Zero-friction with screen reader

The checkout process should be calm and uncluttered. Avoid abrupt layout changes. A clear progress indicator, such as a list, is essential. Each section should have a level 2 heading. Inline validation should be subtle and non-aggressive. Status messages should be displayed in a live area. The "Buy Now" button should clearly describe the action and the amount.

<button type="submit" aria-label="Jetzt kaufen, Betrag 89,90 Euro">Jetzt kaufen</button>

Address fields have autocomplete attributes. Example: autocomplete="given-name", family-name, address-line1, postal-code, countryThis saves time and reduces errors. Payment methods are displayed as radio stations with labels. Additional information is only shown after selection and is then accessible in the focus area.

Performance helps accessibility

Screen readers suffer from unstable DOMs. Large re-renders, late hydration, and nested offscreens slow things down. Optimize the critical rendering path. Keep the DOM lean. Avoid "invisible" duplicate trees. Load images responsively. Use prefetch wisely. Anything that improves stability also improves accessibility.

Mobile: TalkBack and VoiceOver

Mobile users work with swipe gestures. Focus management is even more important here. Interactive elements need sufficient screen space. Slide-only carousels are problematic. Provide alternative navigation. Thoroughly review your off-canvas menus. Check the keyboard opening order. Review the "Back" button in the browser and app shell.

Team setup and QA

• Definition of Done contains accessibility checks.
• Design Review checks contrast, focus, and error messages.
• Code Review checks semantics, roles, labels, keyboard, and ARIA.
• The release checklist includes keyboard run and screen reader run.
• Regression tests cover modals, toasters, filters, and forms.

Here's how to get feedback from real users:

Ask your community: "What's holding you back? Which messages are unclear? What's missing in the product images?" Offer a short, accessible feedback form. Respond. Build. Publish. Thank them. You'll see better conversions because friction is reduced.

Your mini-audit to get started

1. Is the H-structure clean and unambiguous?
2. Is there <main>, navigation with labels and a jump link "To content"?
3. Is every action controllable via keyboard?
4. Will dynamic changes get a subtle live region?
5. Do all form fields have labels, autocomplete, and clear errors?
6. Are subtitles and transcripts available for media?
7. Is the focus visible and logical?
8. Are the variations, tabs, and accordions implemented according to the pattern?
9. Are prices and discounts understandable when presented as text?
10. Is there an easily accessible accessibility statement?

Now it's your turn: Comment and provide examples

Show me a product from your shop. Describe where the screen reader encounters difficulties. Ask about a pattern. Share your "aha!" moment. I'll respond with concrete snippets. Let's work together to break down barriers. Your customers will notice.

Finally, here's a well-founded resource with practical tips for online shops: E-commerce and BFSG.