Puoi rendere gli indicatori più accessibili attivando la gestione degli eventi di clic, aggiungendo un testo descrittivo per gli screen reader e regolando la scala dell'indicatore.
- Quando un indicatore è selezionabile (o trascinabile), può rispondere all'input della tastiera e del mouse.
- Il testo specificato nell'opzione
titleè leggibile dagli screen reader e verrà visualizzato quando un utente tiene il puntatore del mouse sopra l'indicatore. - L'aumento delle dimensioni degli indicatori riduce la precisione necessaria per interagire con gli indicatori su tutti i dispositivi, in particolare sui dispositivi touchscreen, e migliora l'accessibilità. Gli indicatori predefiniti soddisfano lo standard Dimensioni minime delle WCAG AA, ma per gli sviluppatori che intendono rispettare lo standard Dimensioni minime delle WCAG AA, le dimensioni degli indicatori devono essere aumentate.
Consulta la sezione sulla personalizzazione di base degli indicatori per imparare a modificare la scala degli indicatori, aggiungere il testo del titolo e altro ancora.
L'esempio seguente mostra una mappa con cinque indicatori cliccabili attivabili che includono il testo del titolo e che sono stati impostati su una scala di 1,5x:
Per spostarti tra gli indicatori utilizzando la tastiera:
- Utilizza il tasto Tab per impostare lo stato attivo sul primo indicatore; se sulla stessa mappa sono presenti più indicatori, utilizza i tasti freccia per spostarti tra gli indicatori.
- Se l'indicatore è selezionabile, premi il tasto Invio per "fare clic". Se un indicatore ha una finestra informativa, puoi aprirla facendo clic o premendo il tasto Invio o la barra spaziatrice. Quando la finestra informativa si chiude, lo stato attivo torna sull'indicatore associato.
- Premi di nuovo Tab per continuare a spostarti tra il resto dei controlli della mappa.
Rendi cliccabile un indicatore
Questa sezione mostra come adattare gli indicatori agli eventi di clic. Per rendere cliccabile un indicatore:
- Imposta la proprietà
gmpClickablesutrue.
TypeScript
const marker = new AdvancedMarkerElement({
position,
map,
title: `${i + 1}. ${title}`,
content: pin.element,
gmpClickable: true,
});
JavaScript
const marker = new AdvancedMarkerElement({
position,
map,
title: `${i + 1}. ${title}`,
content: pin.element,
gmpClickable: true,
});
- Aggiungi un listener di eventi di clic per rispondere all'input dell'utente.
TypeScript
// Add a click listener for each marker, and set up the info window.
marker.addListener('click', ({ domEvent, latLng }) => {
const { target } = domEvent;
infoWindow.close();
infoWindow.setContent(marker.title);
infoWindow.open(marker.map, marker);
});
JavaScript
// Add a click listener for each marker, and set up the info window.
marker.addListener("click", ({ domEvent, latLng }) => {
const { target } = domEvent;
infoWindow.close();
infoWindow.setContent(marker.title);
infoWindow.open(marker.map, marker);
});
Per rendere nuovamente non cliccabile un indicatore, chiama
removeListenerper rimuovere il listener di eventi di clic:// Remove the listener. google.maps.event.removeListener(clickListener);
Per migliorare ulteriormente l'accessibilità:
- Imposta il testo descrittivo di un indicatore utilizzando l'opzione
AdvancedMarkerElement.title. - Aumenta la scala degli indicatori utilizzando la proprietà
scalediPinElement.
Codice di esempio completo
Visualizza il codice sorgente di esempio completo
TypeScript
async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const map = new Map(document.getElementById("map") as HTMLElement, {
zoom: 12,
center: { lat: 34.84555, lng: -111.8035 },
mapId: '4504f8b37365c3d0',
});
// Set LatLng and title text for the markers. The first marker (Boynton Pass)
// receives the initial focus when tab is pressed. Use arrow keys to move
// between markers; press tab again to cycle through the map controls.
const tourStops = [
{
position: { lat: 34.8791806, lng: -111.8265049 },
title: "Boynton Pass"
},
{
position: { lat: 34.8559195, lng: -111.7988186 },
title: "Airport Mesa"
},
{
position: { lat: 34.832149, lng: -111.7695277 },
title: "Chapel of the Holy Cross"
},
{
position: { lat: 34.823736, lng: -111.8001857 },
title: "Red Rock Crossing"
},
{
position: { lat: 34.800326, lng: -111.7665047 },
title: "Bell Rock"
},
];
// Create an info window to share between markers.
const infoWindow = new InfoWindow();
// Create the markers.
tourStops.forEach(({position, title}, i) => {
const pin = new PinElement({
glyph: `${i + 1}`,
scale: 1.5,
});
const marker = new AdvancedMarkerElement({
position,
map,
title: `${i + 1}. ${title}`,
content: pin.element,
gmpClickable: true,
});
// Add a click listener for each marker, and set up the info window.
marker.addListener('click', ({ domEvent, latLng }) => {
const { target } = domEvent;
infoWindow.close();
infoWindow.setContent(marker.title);
infoWindow.open(marker.map, marker);
});
});
}
initMap();
JavaScript
async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
"marker",
);
const map = new Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 34.84555, lng: -111.8035 },
mapId: "4504f8b37365c3d0",
});
// Set LatLng and title text for the markers. The first marker (Boynton Pass)
// receives the initial focus when tab is pressed. Use arrow keys to move
// between markers; press tab again to cycle through the map controls.
const tourStops = [
{
position: { lat: 34.8791806, lng: -111.8265049 },
title: "Boynton Pass",
},
{
position: { lat: 34.8559195, lng: -111.7988186 },
title: "Airport Mesa",
},
{
position: { lat: 34.832149, lng: -111.7695277 },
title: "Chapel of the Holy Cross",
},
{
position: { lat: 34.823736, lng: -111.8001857 },
title: "Red Rock Crossing",
},
{
position: { lat: 34.800326, lng: -111.7665047 },
title: "Bell Rock",
},
];
// Create an info window to share between markers.
const infoWindow = new InfoWindow();
// Create the markers.
tourStops.forEach(({ position, title }, i) => {
const pin = new PinElement({
glyph: `${i + 1}`,
scale: 1.5,
});
const marker = new AdvancedMarkerElement({
position,
map,
title: `${i + 1}. ${title}`,
content: pin.element,
gmpClickable: true,
});
// Add a click listener for each marker, and set up the info window.
marker.addListener("click", ({ domEvent, latLng }) => {
const { target } = domEvent;
infoWindow.close();
infoWindow.setContent(marker.title);
infoWindow.open(marker.map, marker);
});
});
}
initMap();
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
HTML
<html>
<head>
<title>Advanced Marker Accessibility</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>