Accessibility

The maps of Maps can be used with the keyboard and a screen reader, for the WCAG 2.2 level AA and the European Accessibility Act (EAA, in force since June 2025). Most of it works without any change to your templates. (from v5.0.0)

What every map does

• A name: the map is a region with a name for screen readers, Map by default. Give it a better one with aria:label.
• A link to skip the map: before every map there is a "Skip the map" link, only visible when it has the focus. It lets keyboard users jump over the map (and its markers) at once.
• Keyboard: tab to the map and move it with the arrow keys, zoom with + and -. Tab to a marker or cluster and press Enter to open its popup or to zoom in on the cluster, Escape closes the popup.
• Focus: when a popup is opened with the keyboard, the focus goes into the popup (so a screen reader reads it and its links can be used), and back to the marker when it closes. The map, the markers and the popups have a clearly visible focus.
• Names of the markers: a marker is called by its title, or by its address or location when it has none (instead of "Marker"). A cluster is called by its number of markers, e.g. "3 locations, press Enter to zoom in".
• Less movement: when the visitor asks for less motion in the system settings (prefers-reduced-motion), the map zooms and pans without animations.

TIP

Give every marker a title: "Utrecht Centraal" is much clearer for a screen reader than its address or coordinates. For entries, use title="{title:attr_safe}" on {maps:entry}.

A list as text alternative

A map is hard to use for someone who can't see it. With list="yes" the map gets a list of its markers below it, with the content of their popups and a button that shows the marker on the map:

{exp:reinos_maps:map list="yes" list:title="Our offices" aria:label="Map of our offices"}
    {maps:add_marker address="Domplein, Utrecht" title="Utrecht office" popup:content="Domplein 1, open 9-17"}
{/exp:reinos_maps:map}

The list is a <details> element (.maps-list) that is closed by default, so it doesn't take space on the page.

Your own list

Write the list yourself with data-maps-list="reinos_map_{map_id}" (the id of the map, reinos_map_1 for the first map on the page). Maps fills the element with data-maps-list-items (or the element itself) with an item per marker, from your <template data-maps-list-item>:

<div data-maps-list="reinos_map_1">
    <h3>Stores</h3>
    <ol data-maps-list-items></ol>
    <template data-maps-list-item>
        <li>
            <strong data-maps-list-title></strong>
            <span data-maps-list-content></span>
            <button type="button" data-maps-list-show>Show on the map</button>
        </li>
    </template>
</div>

Attribute
data-maps-list-title	Filled with the title of the marker
data-maps-list-content	Filled with the content of its popup
data-maps-list-show	A button that shows the marker on the map and opens its popup

Tag parameters

On the map tag:

aria:label

The name of the map for screen readers. Describe what is on the map.

aria:label="Map of our stores in the Netherlands" [OPTIONAL]

aria:cluster

The name of a cluster, [count] is its number of markers.

aria:cluster="[count] locations, press Enter to zoom in" [OPTIONAL]

skip_link

The link to skip the map, no to leave it out (e.g. when the page has its own).

skip_link="yes" [OPTIONAL]
skip_link:text="Skip the map" [OPTIONAL]

list

The list of the markers below the map, see A list as text alternative.

list="no" [OPTIONAL]
list:title="The locations on the map" [OPTIONAL]
list:show="Show on the map" [OPTIONAL]

Your part

Maps takes care of the map itself. For the whole page:

• Give the map a name (aria:label) and the markers a title.
• Make the content of your popups accessible as well: headings, link texts that say where they go, alt texts on images.
• Use enough contrast in your own marker icons and in the colors of lines and areas.
• Translate the texts (aria:label, aria:cluster, skip_link:text, list:title, list:show) when your site is not in English.