Accessibility

An accessible app means people of all abilities can interact with, understand, and navigate it. At Shopware, we are committed to creating inclusive and barrier-free experiences for our merchants and their customers.

Meteor components ship with built-in accessibility features: keyboard support, sensible ARIA usage, and WCAG 2.1 AA compliance. However, you still need to review your patterns, content, and interactions so your app is accessible end-to-end.

What Meteor provides out of the box

• Keyboard navigation: All interactive components are fully operable via keyboard
• ARIA attributes: Components include appropriate roles, states, and properties
• Focus management: Focus is managed correctly in modals, dropdowns, and other overlays
• Color contrast: Design tokens meet WCAG 2.1 AA contrast ratios for text and UI elements
• Dark mode: Both light and dark themes maintain accessible contrast levels
• Screen reader support: Components are tested with common assistive technologies

What you still need to consider

Keep experiences simple

Respect people's time by making apps that are easy to use and navigate.

• Avoid complex flows where simpler alternatives exist
• Use consistent patterns across pages so users don't have to relearn interactions
• Use concise, plain language. Aim for a reading level appropriate to your audience

Be inclusive

• Use inclusive language throughout your interface
• Don't make assumptions about people's abilities
• Avoid jargon, metaphors, and non-literal phrases

Provide text alternatives

Text can be seen, heard via text-to-speech, and touched with a braille reader.

• Write clear and concise labels and alt text for all meaningful images and icons
• Use the decorative prop on mt-icon for purely visual icons so they stay out of the accessibility tree
• Include transcripts or captions for any video content

Never rely on color alone

Some people cannot perceive color, and others perceive it differently.

• Always pair color with a secondary indicator such as an icon, label, or pattern
• Use semantic icon tokens (critical, positive, attention) to reinforce meaning alongside color

Use semantic HTML

Semantic HTML describes the meaning of elements to browsers and assistive technologies.

• Use landmark elements (header, nav, main, footer) to structure your pages
• Avoid using div or span as interactive elements
• Make sure headings follow a logical hierarchy

Give people control

• Ensure your layouts reflow correctly across all screen sizes
• Respect the user's reduced motion settings with prefers-reduced-motion
• Allow sufficient time for time-sensitive interactions

Test broadly

• Test with keyboard-only navigation
• Test with screen readers (VoiceOver, NVDA, or JAWS)
• Test with real users with disabilities when possible

Recommended tools

• WAVE: Visual feedback tool that overlays accessibility information directly on the page. Useful for quickly spotting heading hierarchy and contrast issues.
• Lighthouse: Built into Chrome DevTools. Useful for a quick overall accessibility score as part of a broader performance audit.

Pre-ship checklist

Run through these before shipping any new feature or page:

• All interactive elements are reachable and operable by keyboard alone
• No keyboard focus traps exist outside of intended modal or overlay patterns
• All images and meaningful icons have descriptive labels or alt text
• Color is never the only indicator of state or meaning
• Text and UI elements meet WCAG 2.1 AA contrast ratios
• Heading levels follow a logical hierarchy without skipping levels
• Form fields have visible labels connected via for/id or aria-labelledby
• Animations and transitions respect prefers-reduced-motion