Sectie 1 · Hoofdstuk 8
iFrames
Een iframe embedt externe content. Geef elk iframe een beschrijvende title zodat gebruikers weten wat erin staat.
Wat is een iframe?
Een <iframe> plaatst een complete externe pagina binnen jouw pagina. Bijvoorbeeld YouTube-video’s, Google Maps-kaarten, betaalformulieren of chatwidgets. De content in een iframe heeft een eigen document, eigen focusvolgorde en vaak een eigen oorsprong.
Voor hulpsoftware is een iframe een blok dat je kunt betreden of overslaan. Maar dan moet de gebruiker wel weten wat er in dat blok zit. Zonder beschrijving meldt een schermlezer alleen “frame” – en dan moet de gebruiker erin navigeren om te ontdekken wat het is.
Waarom het ertoe doet
WCAG succescriterium 4.1.2 (Naam, Rol, Waarde) vraagt dat elk onderdeel van de interface een programmatisch bepaalbare naam heeft. Voor iframes betekent dat: een title-attribuut dat de inhoud beschrijft.
Daarnaast speelt SC 2.4.1 (Blokken omzeilen) een rol. Een iframe is een blok content. De gebruiker moet kunnen beslissen: ga ik dit blok in, of sla ik het over? Dat kan alleen als het iframe een duidelijke naam heeft.
De H64-techniek van het W3C beschrijft precies deze aanpak: gebruik het title-attribuut op <frame> en <iframe> om de inhoud te beschrijven.
Het title-attribuut
Elk iframe dat content bevat, heeft een title-attribuut nodig. Dat attribuut moet beschrijven wat er in het iframe staat – niet dat het een iframe is.
Fout
<iframe src="https://www.youtube.com/embed/abc123"></iframe>
Geen title. De schermlezer zegt alleen “frame” of leest de URL voor.
Goed
<iframe
src="https://www.youtube.com/embed/abc123"
title="YouTube-video: Hoe werkt een schermlezer?"
></iframe>
De schermlezer zegt “frame, YouTube-video: Hoe werkt een schermlezer?” en de gebruiker weet direct wat erin staat.
Fout
<iframe
src="https://www.google.com/maps/embed?..."
title="iframe"
></iframe>
De title “iframe” beschrijft het element, niet de inhoud. Dat helpt niemand.
Goed
<iframe
src="https://www.google.com/maps/embed?..."
title="Kaart met locatie van ons kantoor in Amsterdam"
></iframe>
Beschrijf wat de kaart toont, niet dat het een kaart is.
Beschrijvende titles
Een goede iframe-title beantwoordt de vraag: “Wat vind ik als ik dit blok binnenstap?” Vermijd generieke titles als “video”, “kaart” of “extern formulier”. Wees specifiek: “Contactformulier van Typeform” of “YouTube-video: Toetsenbordnavigatie in 3 minuten”.
Decoratieve of verborgen iframes
Soms bevat een iframe geen content die voor de gebruiker relevant is – bijvoorbeeld een trackingpixel of een verborgen technisch frame. In dat geval wil je voorkomen dat een schermlezer het aankondigt.
Fout
<iframe src="https://tracking.example.com/pixel"></iframe>
Zonder title en zonder verberging meldt de schermlezer een naamloos frame.
Goed
<iframe
src="https://tracking.example.com/pixel"
aria-hidden="true"
tabindex="-1"
title=""
></iframe>
Het iframe is volledig verborgen voor hulpsoftware en niet bereikbaar met het toetsenbord.
Veelvoorkomende iframe-types
Elk type iframe heeft specifieke aandachtspunten:
| Type | Aandachtspunt |
|---|---|
| YouTube / Vimeo | Beschrijf de video in de title. YouTube voegt standaard een title toe, maar die is vaak generiek. |
| Google Maps | Beschrijf de locatie, niet alleen “Google Maps”. |
| Betaalformulieren | De title moet duidelijk maken dat het een betaalstap is. De focus moet correct verplaatsen naar het iframe. |
| Chatwidgets | Vaak meerdere iframes – elk moet een beschrijvende title hebben. |
| Social media embeds | Beschrijf wat de embed toont: “Instagram-post van @bedrijfsnaam” of “Twitter-tijdlijn”. |
Lazy loading
Moderne browsers ondersteunen loading="lazy" op iframes. Dat is goed voor performance en heeft geen negatieve impact op toegankelijkheid. Het iframe wordt pas geladen als het in beeld komt.
<iframe
src="https://www.youtube.com/embed/abc123"
title="YouTube-video: Toetsenbordnavigatie uitgelegd"
loading="lazy"
></iframe>
tabindex="-1"
Gebruik tabindex="-1" alleen op iframes die geen interactieve content bevatten. Een iframe met een video, formulier of kaart moet gewoon bereikbaar blijven met het toetsenbord. Anders sluit je gebruikers buiten.
WCAG-succescriteria
| Succescriterium | Niveau | Toelichting |
|---|---|---|
| 4.1.2 Naam, Rol, Waarde | A | Elk iframe moet een programmatisch bepaalbare naam hebben (title-attribuut) |
| 2.4.1 Blokken omzeilen | A | Een beschrijvende title helpt gebruikers om iframes te begrijpen en eventueel over te slaan |