Accessibility in e-commerce is far from a nice-to-have – it’s becoming a global imperative. Around the world, countries are adopting legislation to ensure that digital services are inclusive and accessible to everyone. In the European Union, this shift is driven by the European Accessibility Act (EAA), which must be implemented into national law by mid-2025. For online businesses, this means more than just legal compliance: accessible e-commerce sites open the door to entirely new customer groups and deliver better user experiences for all. This article explores what’s behind these regulatory changes, what e-commerce providers should consider, and how a Progressive Web App (PWA) can help meet accessibility requirements quickly, flexibly, and cost-effectively.
-
The Intershop PWA 7.0: Accessibility features for legal compliance
-
Conclusion: Accessibility is an investment in future readiness
What is the European Accessibility Act (EAA)?
The European Accessibility Act (EAA) is a legislative framework introduced by the European Union to improve accessibility across digital products and services. It sets out clear requirements for how websites and other digital content must be designed to ensure usability for people with and without disabilities. The EAA is based on the international standard WCAG 2.2 AA (Web Content Accessibility Guidelines), developed by the World Wide Web Consortium (W3C). This standard outlines twelve key guidelines structured around four core principles: perceivable, operable, understandable, and robust. These guidelines are further detailed by 61 success criteria that organizations are expected to meet.
EU member states are required to translate the EAA into national legislation by mid-2025. Even for businesses that may not yet be legally required to comply, aligning with these standards is increasingly important – because today’s customers expect inclusive digital experiences, regardless of regulation.
Checklist: Key criteria for an accessible e-commerce site
To understand what online merchants need to consider when implementing the WCAG 2.2 AA standards, the following section breaks down key criteria for accessibility and explains how they can be addressed in practice. The next section explores how a modern Progressive Web App (PWA), such as the Intershop PWA 7.0, can help meet these requirements at a technical level.
-
Logical structure and navigation: An e-commerce site’s navigation should be streamlined, not overloaded. The main menu should include only a few clearly structured categories that reflect the shop’s product offerings. Submenus can open via click, but the structure should remain simple and intuitive. Careful planning of the site architecture is essential to ensure a smooth user experience.
-
Clear, calm, and organized visual design: Visual noise – like flashing elements, autoplay videos, or sudden drop-downs – can be overwhelming, particularly for users with epilepsy, ADHD, or cognitive sensitivities. Even older users or those unfamiliar with dynamic web interfaces may find such content disorienting. Subheadings, paragraph spacing, and lists help make content easier to scan and digest.
-
Plain and understandable language: All content on an e-commerce site should be written in clear, simple language. Technical jargon or foreign terms should be replaced with commonly understood vocabulary. Sentences should be short and to the point. Complex, nested sentence structures are best avoided – this applies to landing page content, product descriptions, and instructional texts alike.
-
Contrast and readability: Text must stand out clearly from its background to ensure legibility. Using images behind text is generally discouraged, and background colors should offer sufficient contrast to the font color. For example, white text on a light blue background can be difficult to read even for users without visual impairments. Font sizes should be adequately large, and links should be distinguished not just by color, but also by underlining or bolding.
-
Accessible forms at checkout: Forms – especially during checkout – must be fully accessible. Input fields, buttons, and error messages need to be clearly labeled and easy to understand. Password fields should include an option to toggle visibility. Missing or incorrect entries should be immediately noticeable, with clear visual indicators and prominent error messaging.
-
Screen reader compatibility: Content must be structured so that screen readers can accurately interpret and vocalize it. This ensures that users who cannot read visually –whether due to physical or cognitive limitations – can still interact with the site. Compatibility depends on using appropriate semantic HTML and ARIA labels in the site’s source code to guide assistive technologies through the interface.
-
Alternative content formats: Images, icons, videos, and animations should include alternative text, captions, or transcripts. This enables users with visual impairments to understand visual content via screen readers. Similarly, audio content must be supplemented with written transcripts to ensure accessibility for people who are deaf or hard of hearing.
-
Robust web technologies: The WCAG defines “robust” as a system’s ability to function reliably across a variety of current and future technologies – including screen readers, browsers, and other assistive tools. The codebase must therefore be clean and standardized to guarantee compatibility over time.
-
Keyboard navigation and voice control: Users with motor impairments, or those who are blind or low-vision, often rely on keyboard navigation. Every part of the site should be operable via keyboard – typically using the Tab key to move from element to element in a logical order defined in the source code. Keyboard shortcuts can also enhance usability. The same goes for voice control, which relies on the website’s compatibility with third-party speech recognition software.
-
Use of ARIA labels and semantic HTML: ARIA labels (Accessible Rich Internet Applications) are essential for enhancing the usability of web elements by assistive technologies. They provide additional context to screen readers – for example, labeling a button marked only with an “X” as “Close window.” Without ARIA attributes, such buttons may be ignored by assistive tools, leading to a frustrating user experience. Semantic HTML elements, such as properly structured headings and landmarks, further improve accessibility by giving screen readers meaningful navigation cues.
What technological capabilities must a shop system provide?
To meet the accessibility criteria outlined above, e-commerce platforms often require various technical or software-level adjustments – ARIA labels are just one example.
Depending on the underlying software architecture, implementing such changes can range from straightforward to complex. This directly impacts both the cost and the time needed for adaptation. Older e-commerce systems built on legacy technology typically require more extensive overhauls. In these systems, the frontend (user interface) and backend (logic and data handling) are tightly coupled. As a result, even small adjustments to the frontend often require significant changes to the backend as well.
How headless architectures support flexibility and accessibility
API-based architectures, in which frontend and backend components operate independently and communicate via defined interfaces (APIs), offer a powerful alternative. In such headless setups, the backend handles business logic and data management, while the frontend can be tailored to meet the specific needs of a brand, target group, or sales channel.
This architectural model allows businesses to develop and modify frontend experiences without disrupting backend operations. Various “heads” or frontends – such as online marketplaces, voice assistants, IoT devices, or Progressive Web Apps (PWAs) – can be connected via APIs. Companies gain the agility to respond quickly to market changes, launch innovative features, and deliver better-performing websites. This flexibility also applies to implementing accessibility standards, which often require frontend-specific adjustments.
The benefits of using a PWA frontend – and what it means for accessibility
Progressive Web Apps offer numerous advantages beyond accessibility. Unlike native apps, PWAs are indexed by search engines and deliver broader reach. On mobile devices, they load faster thanks to service workers, which enable intelligent caching, background updates, and even offline availability – an important feature in regions with unstable internet connections.
From an accessibility standpoint, PWAs offer a key advantage: new features and improvements can be added directly to the frontend, without requiring deep changes to the backend. Businesses already running a headless architecture with a PWA frontend are therefore in a much better position to implement accessibility features quickly, efficiently, and cost-effectively.
That said, the actual effort involved still depends on the specific PWA in use. Some platforms require significant customization to fully meet the WCAG 2.2 AA standards. Intershop anticipated this need early on and developed the Intershop PWA 7.0 with full compliance in mind. Out of the box, it delivers all essential accessibility features as defined by WCAG 2.1 AA (aligned with current legal requirements), making it much easier for merchants to align their shops with national and international accessibility standards.
The Intershop PWA 7.0: Accessibility features for legal compliance
The latest updates to the Intershop PWA 7.0 are designed to make e-commerce content more accessible for all users – especially those relying on assistive technologies. With these enhancements, Intershop reaffirms its commitment to digital inclusion. At the same time, the platform ensures full compliance with internationally recognized accessibility standards such as WCAG 2.2 AA, as well as local legislation such as Germany’s BFSG.
The following improvements are delivered as part of the default configuration in Intershop PWA 7.0:
-
Show password option by default: Input fields for passwords include a visible "eye" icon that allows users to toggle password visibility.
-
Sticky headers deactivated by default: Sticky headers are turned off to prevent screen readers from repeating navigation content on every page load.
-
Clear error highlighting in forms: Invalid form entries are prominently highlighted and always remain visible in the viewport.
-
Descriptive H1 headings: Primary headings are clearly defined in the source code for easier recognition by screen readers and improved SEO indexing.
-
Meaningful labels for all pop-ups: Dialogs such as login prompts, cookie banners, and cart pop-ups include clear ARIA labels like “Open cart,” “Close dialog,” or “Cookie settings” so screen readers can correctly identify them.
-
Removal of animated buttons: Animated or blinking buttons have been replaced with more visually stable alternatives to reduce stress for users with epilepsy or ADHD.
-
Improved screen reader support: Buttons and links are now described with meaningful ARIA labels in the code. Instead of simply saying “button,” screen readers now specify actions like “Go to checkout” or “Open cart.”
-
Enhanced keyboard navigation: Pages are now fully operable via keyboard using Tab, Enter, and arrow keys. This was not always consistently possible in previous versions.
-
Clear group labels in forms: Form sections such as billing and shipping addresses are grouped with clear titles to support better navigation and understanding.
-
Skip-to-main-content link: A hidden but screen reader–accessible link allows users to jump directly to the main content area – e.g., product listings – without navigating through other page elements.
-
Accessible link styling: Hyperlinks are not only color-coded but also underlined or bolded to ensure visibility for users with color vision deficiencies.
-
Larger clickable areas: Buttons and interactive elements are visually enlarged for better visibility and easier interaction – especially for users with low vision.
-
High-contrast color schemes: Default color settings ensure strong contrast between text and background, improving readability even in bright environments.
-
Logically ordered headings: Heading structures (H1, H2, H3, etc.) now follow a clean, logical hierarchy, enabling easier navigation for assistive technologies.
-
Visible keyboard focus states: Keyboard navigation highlights the currently focused element more clearly, making it easier to understand where the user is on the page.
-
Semantically defined main content area: The main content of each page is now correctly marked using a <main> tag instead of instead of <div role="main">, so screen readers can immediately recognize and jump to it.
-
Additional ARIA, lang, and title attributes: The code includes additional attributes to support screen readers with information on language, section titles, and descriptions – significantly improving usability for users with assistive needs.
Conclusion: Digital accessibility is an investment in future readiness
At first glance, accessibility requirements may seem like just another compliance challenge – but in reality, they offer a powerful opportunity: to foster inclusion, enhance the user experience, and tap into broader customer segments. Businesses that act early not only gain a competitive edge but also actively contribute to digital participation for all.
Modern technologies like the Intershop PWA 7.0 make it possible to meet accessibility requirements in a flexible, efficient, and future-proof way – without major changes to backend systems. In particular, headless architectures offer the agility needed to adapt quickly to legal updates and evolving user expectations.
Accessibility is not a one-time task – it’s an ongoing commitment and a mindset that improves the digital experience for everyone.
Accessibility check: Support for Intershop platform customers
A dedicated accessibility check service package is available to all users of the Intershop Commerce Platform. As part of this service, Intershop experts assess existing Progressive Web Apps (PWAs) and Responsive Starter Stores (RSS) for accessibility. The insights gained form the basis for targeted optimization recommendations to ensure legal compliance and improved usability.
More information about Intershop PWA, the accessibility check, and accessible e-commerce implementation is available on request. The Intershop team is happy to help.
