Contents
Accessibility - Plugixa Image Map
A picture with clickable areas is easy to build in a way that shuts people out. This page says what the plugin does by itself and what is up to you.
What the plugin does
| For | Behaviour |
|---|---|
| Keyboard users | Every hotspot with a tooltip or a link can be reached with Tab, in the order of the layers. The tooltip opens on focus and Esc closes it. Zoom, full screen and the list are buttons and fields like any other. |
| Screen readers | Each hotspot is announced by its name, and its tooltip is attached to it as its description. Floors are real tabs. The count of search results in the list is announced as it changes. |
| Touch | Tap to open, tap elsewhere to close; pinch to zoom, drag to pan. |
| Reduced motion | Page-load effects and hotspot animations are switched off for visitors who ask their device for less motion. |
| No JavaScript | The picture, the shapes, the links and the text of every tooltip are in the page. Links still work. |
What you should fill in
The image description. In Map settings, describe what the picture shows: Floor plan of the ground floor, not map.
Names. Give every hotspot a name that makes sense on its own. Kitchen is a good name; Rectangle 4 is not. The name is what a screen reader says and what the location list shows.
The Access tab. Select a hotspot and open Access.
| Field | When to use it |
|---|---|
| Accessible label | When the layer name is not enough. Describe where the hotspot is or what it opens. If blank, the name is used. |
| Description | Anything extra a screen reader user needs, such as Step-free entrance on the south side. |
Colour
A faint fill on a pale picture can be invisible to someone with low vision. Give hotspots a visible outline, and check that the hover colours differ by more than hue alone.
The location list
Turning on the location list is the single most useful thing you can do for accessibility: it gives every visitor a plain, searchable list of everything on the map.