Een instructievideo op je pagina. Met het controls-attribuut: play, pauze, volume, fullscreen. Allemaal aanwezig.
Een schermlezer zegt: “Video.” Welke video? Waarover? Geen idee.
<!-- Niet doen: video zonder naam -->
<video controls src="instructie.mp4"></video>
<!-- Wel doen: aria-label -->
<video controls src="instructie.mp4"
aria-label="Instructievideo: account aanmaken"></video>
<!-- Of: koppelen aan een zichtbare titel -->
<h2 id="video-titel">Instructievideo: account aanmaken</h2>
<video controls src="instructie.mp4"
aria-labelledby="video-titel"></video>
Waarom vergeten developers dit?
Omdat het <video>-element visueel voor zich spreekt. Je ziet de thumbnail. Je ziet de context op de pagina. Maar een schermlezer ziet alleen: “Video.”
Dit geldt ook voor <audio>:
<audio controls src="podcast.mp3"
aria-label="Podcast aflevering 12: toegankelijkheid in de praktijk">
</audio>
Eén attribuut. Tien seconden werk. Het verschil tussen “Video” en “Instructievideo: account aanmaken.”
