Accessibility

Maps are built to work for everyone, not only for mouse users. The module follows WCAG practices for interactive images; how accessible a page is in the end also depends on your theme and on how you name your shapes.

Keyboard#

• Every hotspot and shape that does something (opens a card or follows an action) can be reached with Tab.
• Enter or Space does the same as a click: it opens the card or follows the link.
• Escape closes the card.
• Filter chips, product list items, scene tabs, dots and the previous/next scene arrows are ordinary buttons, so they work with the keyboard too.
• A clear focus ring shows where the keyboard is, on shapes, card buttons, list items and scene controls. It appears only for keyboard use, not on mouse clicks.

Screen readers#

• The map image has a text alternative taken from the map's name, and the shape layer is announced as an image with the same name.
• Each interactive shape is announced as a button (or an image, if it only shows a card) with its name, for example "Oak coffee table". Shapes with a card also tell the screen reader that they open one.
• When a card opens, its content is announced politely, without interrupting what the reader is saying.
• The active scene tab is marked as selected, and the list's scroll arrows have labels that follow the shop language.

Touch and motion#

• On touch screens every hotspot gets an invisible tap area of at least 44 px, so small dots are still easy to hit with a finger.
• If the visitor's device asks for reduced motion, pulsing hotspots, animated transitions and smooth scrolling are switched off.

What you can do#

• Name every shape. The name is what a screen reader says, so use the product or what the area shows ("Arc floor lamp"), not "Shape 3". With product actions, the synced card title does this for you.
• Give each map a descriptive name, such as "Living room with sofa, lamp and rug". It becomes the image's text alternative.
• Keep enough contrast when you change hotspot or card colours in Styling: text on cards and buttons should stay easy to read.
• Don't rely on colour alone to tell areas apart; the card text should say what each area is.