Google Maps-kaarten toegankelijk insluiten

Google Maps is een veelgebruikt platform voor het weergeven van een locatie op een website. In dit artikel lees je hoe je Google Maps toegankelijk kunt insluiten op een webpagina.

De insluitcode

Met een insluitcode kun je Google Maps op een webpagina plaatsen. De code bestaat uit een <iframe>-element met daarin de URL van de kaart.

Je kunt de insluitcode ophalen via Google Maps: zoek een locatie op, kies “Delen” en kopieer de code. Wil je meer controle over de URL-parameters, gebruik dan de Maps Embed API. Hiervoor heb je wel een API-sleutel nodig.

<iframe
  src="https://www.google.com/maps/embed/v1/place?key=[API_SLEUTEL]&q=[LOCATIE]"
  width="600"
  height="450"
  style="border:0;"
  loading="lazy"
  allowfullscreen
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Met de Maps Embed API kun je parameters toevoegen aan de URL:

q=: de locatie als adres of plaatsnaam.
center=: coördinaten voor het midden van de kaart.
zoom=: het zoomniveau (0 = de hele wereld, 21 = gebouwniveau).
maptype=roadmap: de weergave van de kaart. Kies roadmap of satellite.
language=nl: toont de kaart in het Nederlands.

Lees meer over Maps Embed API-parameters

Toegankelijke naam

Geef het <iframe>-element een duidelijke toegankelijke naam. Schermlezers kunnen <iframe>-elementen presenteren in een overzicht, zodat mensen sneller door de content kunnen navigeren.

Gebruik hiervoor het title-attribuut. Google voegt standaard géén title-attribuut toe aan de insluitcode. Voeg het altijd zelf toe. Beschrijf de locatie die de kaart toont.

<iframe title="Kaart met locatie van Voorbeeldbedrijf aan Keizersgracht 123 in Amsterdam" src="..." width="600" height="450" style="border:0;" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade">
</iframe>

Schrijf niet “Google Maps” of “Kaart”, maar beschrijf wát de kaart toont. Als je meerdere kaarten op één pagina hebt, geef elke kaart een unieke titel.

Toetsenbordgebruik

Wanneer de focus in het Google Maps-iframe terechtkomt, kan een toetsenbordgebruiker vastlopen. Na het laatste bedieningselement in de kaart springt de focus naar de adresbalk van de browser, niet naar het volgende element op de pagina. Dit is een toetsenbordval.

Een toetsenbordval schendt succescriterium 2.1.2 Geen toetsenbordval (niveau A). Dit criterium valt onder non-interferentie. Dat betekent: één toetsenbordval maakt de héle pagina niet-conform.

Test altijd of je met de Tab-toets het iframe kunt verlaten na het doorlopen van de bedieningselementen.

Tekstueel alternatief

Een ingesloten kaart is niet-tekstuele content. Straatnamen, wegen en markeringen zijn afbeeldingstegels. Een schermlezer kan deze niet lezen.

Zet het volledige adres als tekst op de pagina, naast of boven de kaart. Dit valt onder succescriterium 1.1.1 Niet-tekstuele content (niveau A). Voeg ook een directe link naar Google Maps toe, zodat bezoekers zelfstandig een routebeschrijving kunnen opvragen.

<address>
  Voorbeeldbedrijf B.V.<br>
  Keizersgracht 123<br>
  1015 CJ Amsterdam
</address>

<p>
  <a href="https://www.google.com/maps/search/?api=1&query=Keizersgracht+123,+Amsterdam" target="_blank" rel="noopener noreferrer">
    Routebeschrijving via Google Maps
    <span class="sr-only">(opent in een nieuw tabblad)</span>
  </a>
</p>

Schermlezers kondigen target="_blank" niet automatisch aan. Voeg de tekst “(opent in een nieuw tabblad)” altijd zelf toe. Verberg de tekst visueel met een sr-only-klasse.

Responsief insluiten

Gebruik de CSS-eigenschap aspect-ratio voor een responsieve kaart:

iframe[src*="google.com/maps"] {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  border: 0;
}

Houd de width– en height-attributen op het <iframe>-element, ook als je CSS gebruikt voor de responsieve weergave. Browsers gebruiken deze attributen om de juiste ruimte te reserveren voordat de CSS is geladen. Dit voorkomt een onverwachte verschuiving van de pagina-inhoud.

Vereisten en aanbevelingen voor een toegankelijke Google Maps-kaart

Dit zijn de vereisten en aanbevelingen voor het toegankelijk insluiten van Google Maps:

WCAG-vereisten

Geef het <iframe>-element een beschrijvend title-attribuut met de naam en het adres van de locatie.
Zet het volledige adres als tekst op de pagina, naast of boven de kaart.
Zorg dat de focus het iframe kan verlaten na het doorlopen van de bedieningselementen.

Aanbevolen

Voeg een directe link naar Google Maps toe naast de kaart.
Zet een skiplink vóór het iframe, zodat toetsenbordgebruikers de kaart kunnen overslaan.
Gebruik language=nl om de kaart in het Nederlands te tonen (vereist API-sleutel).
Maak de kaart responsief met aspect-ratio: 4 / 3.
Laad het iframe pas na toestemming van de bezoeker.