Introduction
This document outlines key UX patterns used in our Intershop Progressive Web App, with a focus on accessibility and user guidance.
The goal is to provide a consistent and inclusive experience across all user journeys, while supporting users with a wide range of needs — including those who rely on screen readers, keyboard navigation, or other assistive technologies.
This guide focuses on design-level decisions and interaction patterns that go beyond technical compliance, aiming to improve clarity, predictability, and efficiency in the user experience.
Fundamental accessibility rules for development — such as color contrast, focus handling, semantic structure, and keyboard operability — are already covered in our Accessibility Easy Check Checklist and aligned with the Web Content Accessibility Guidelines (WCAG 2.2.).
For more general information about accessibility in the PWA, see Accessibility.
UX Patterns
Navigation Patterns
Skip Links for Long Listings
What we do:
On pages with multiple content blocks, we provide "Skip listing" links before long sections, such as the filter list, account navigation, or quick order form.
The "Skip listing" link is generated by the <ish-skip-content-link> component that can be wrapped around any long listing or content block.
Why we do it:
- Allows users to bypass repetitive or scroll-intensive content.
- Especially useful for keyboard and screen reader users.
- Makes navigation faster and less tiring.
Form Patterns
Focus Management on Validation Errors
What we do:
On form submission, the focus automatically jumps to the first invalid field.
Why we do it:
- Reduces cognitive load and improves error recovery.
- Assist screen reader users in identifying errors efficiently.
Component Behavior
Links with Icons Do Not Require Underlines
What we do:
Text links that include a decorative icon, either leading or trailing (e.g., arrow, external link), are not underlined.
Why we do it:
- Icons serve as a clear visual affordance for clickability.
- Avoids visual clutter while maintaining clarity.
- Still meets contrast and recognition standards for visual users.
Popovers Open on Click Instead of Hover
What we do:
Interactive popovers (e.g., info bubbles) now open on click, not on hover.
Why we do it:
- Hover interactions are not accessible on touch devices.
- Keyboard and screen reader users can now reliably trigger and dismiss popovers.
- Improves overall predictability and control for all users.
Summary
The patterns described here help ensure that our PWA is not only accessible in a technical sense, but also usable, predictable and efficient for everyone.
Consistently applying these guidelines creates better experiences for all users while reducing friction for those who rely on accessible design.