Audit digitale toegankelijkheid van Mave videoplayer

#1 - Status van menuknop niet programmatisch beschikbaar

Deze videospeler bevat een knop met drie puntjes die een menu voor ondertitels opent. De toestand van dit menu (uitgeklapt of ingeklapt) is bij het laden van de pagina niet programmatisch bepaald. Het aria-expanded-attribuut wordt pas aan de knop toegevoegd nadat deze is geactiveerd.

Daardoor kan hulpsoftware niet bepalen of het menu in eerste instantie is uitgeklapt of ingeklapt.

Dit probleem geldt ook voor de knop voor de instellingen van audiosporen.

Oplossing

Zorg ervoor dat de status van het menu vanaf het begin programmatisch beschikbaar is. Gebruik het aria-expanded-attribuut op de menuknop en stel deze standaard in op "false" wanneer het menu gesloten is. Werk de waarde bij naar "true" wanneer het menu wordt geopend.

#2 - Tijdslider is niet goed bedienbaar met het toetsenbord

Binnen de videospeler kan de voortgangsbalk (tijdslider) met de muis correct worden gebruikt om naar een ander moment in de video te springen. Bij gebruik van het toetsenbord werkt dit echter niet goed.

Wanneer de slider focus heeft en de gebruiker de pijltoetsen gebruikt om de positie aan te passen, springt de slider direct terug naar de oorspronkelijke positie. Hierdoor is het niet mogelijk om de afspeelpositie betrouwbaar met het toetsenbord te wijzigen.

Dit zorgt ervoor dat toetsenbordgebruikers de functionaliteit niet op dezelfde manier kunnen gebruiken als muisgebruikers.

Oplossing

Zorg ervoor dat de voortgangsbalk ook goed werkt met het toetsenbord. Wanneer een gebruiker de positie aanpast met de pijltoetsen, moet deze wijziging behouden blijven en zichtbaar zijn.

De slider mag tijdens deze interactie niet automatisch terugspringen naar de oorspronkelijke positie.

#3 - Knoppen met alleen iconen hebben een onduidelijke betekenis

In de bedieningsbalk van de videospeler worden knoppen voor ondertiteling en audiotracks uitsluitend weergegeven met iconen, zonder zichtbare tekst.

Hoewel deze knoppen een correcte toegankelijke naam hebben via aria-label, is hun betekenis visueel niet duidelijk. Het pictogram voor ondertiteling (spraakballon met drie puntjes) lijkt bijvoorbeeld op een generieke "meer opties"-knop en wijkt af van gangbare conventies zoals "CC".

Dit kan leiden tot verwarring bij gebruikers, met name voor mensen met cognitieve beperkingen of gebruikers die minder vertrouwd zijn met deze iconen.

Oplossing

Zorg ervoor dat de functie van de knoppen visueel duidelijk is.

Mogelijke oplossingen zijn:

• gebruik van meer herkenbare, gestandaardiseerde iconen (bijvoorbeeld "CC" voor ondertiteling)
• toevoegen van zichtbare tekstlabels (bijvoorbeeld "CC" of "Audio")

Andere oplossingen zijn ook mogelijk.

#4 - Onvoldoende contrast voor gemarkeerde tekst in transcript

In het onderdeel "Transcript (mave-text)" wordt het woord dat op dat moment wordt uitgesproken gemarkeerd met een achtergrondkleur. Deze beige kleur (#F9DAAF) heeft een te lage contrastverhouding van 1,3:1 ten opzichte van de omliggende grijze achtergrond (#F9FAFB). Hierdoor is de actieve toestand moeilijk waar te nemen.

De contrastverhouding tussen de markering en de aangrenzende kleuren moet minimaal 3,0:1 zijn.

Oplossing

Zorg ervoor dat de visuele aanduiding van het actieve (uitgesproken) woord voldoende contrast heeft ten opzichte van de achtergrond. De contrastverhouding tussen de highlight en de omliggende achtergrond moet minimaal 3,0:1 zijn.

#5 - Transcriptregels zijn niet bedienbaar met het toetsenbord

In het onderdeel "Transcript (mave-text)" kunnen de regels met woorden met een muis worden geactiveerd. Deze aanklikbare elementen zijn echter niet met het toetsenbord bereikbaar. Hierdoor kunnen toetsenbordgebruikers de transcriptfunctionaliteit niet gebruiken.

Alle interactieve elementen moeten volledig met het toetsenbord te bedienen zijn.

Oplossing

Zorg ervoor dat dit element met het toetsenbord kan worden bediend, bijvoorbeeld met de Enter-, Return- of spatiebalktoets.

#6 - Elementen hebben geen toegankelijke rol

In het onderdeel "Transcript (mave-text)" kunnen transcriptregels met de muis worden geactiveerd om de video naar een specifiek tijdstip te verplaatsen. Deze regels zijn geïmplementeerd als <p>-elementen met klikfunctionaliteit. Deze elementen hebben geen programmatisch bepaalde interactieve rol. Hierdoor worden ze door schermlezers niet herkend als interactieve bedieningselementen.

Elk HTML-element heeft van zichzelf standaard een rol die zijn functie en gedrag beschrijft. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Voorbeelden zijn <button> en <a> (link), die automatisch een rol hebben die door browsers en hulpmiddelen zoals schermlezers wordt herkend.

Oplossing

Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Als een rol niet toegankelijk is, dan betekent dit dat de rol niet correct is ingesteld of dat niet de juiste code is gebruikt.

Zorg ervoor dat elk interactief element een correcte, programmatisch bepaalde rol heeft.

Omdat het activeren van een transcriptregel een actie uitvoert, is een <button>-element de meest geschikte keuze. Vervang de klikbare <p>-elementen door <button>-elementen.

Andere oplossingen zijn ook mogelijk.

#7 - Zichtbare linktekst ontbreekt in toegankelijke naam

Op deze pagina staan in het onderdeel "Downloadable Files (mave-files)" links. De zichtbare tekst van deze links is echter niet opgenomen in de toegankelijke naam. De link met de tekst "MP4 Video Video | 3-23-2026 | 0:27 | mp4 | 14.5 MB" heeft bijvoorbeeld de volgende toegankelijke naam: "Download video". De toegankelijke namen van deze links komen uit het aria-label-attribuut. Daardoor wordt de zichtbare tekst overschreven en ontstaat er een afwijkende toegankelijke naam.

De zichtbare tekst van de link komt niet voor in de toegankelijke naam. Daardoor kan de link niet worden bediend met spraakbediening. De uitgesproken commando's komen niet overeen met de toegankelijke naam van de link en activeren de link niet.

Oplossing

Zorg ervoor dat de zichtbare tekst van de link voorkomt in de toegankelijke naam, bij voorkeur aan het begin. Pas in dit geval het aria-label aan zodat de zichtbare tekst daarin wordt opgenomen.

Zorg er als mogelijke oplossing voor dat de zichtbare titel (zoals "MP4 Video") van het bestand wordt gebruikt als de hoofdtekst van de link, zodat deze direct de toegankelijke naam vormt. Aanvullende informatie, zoals datum, tijd, formaat en bestandsgrootte, kan als aanvullende beschrijving worden aangeboden. Koppel deze informatie indien nodig programmatisch aan de link met behulp van aria-describedby, zodat schermlezers deze context kunnen voorlezen zonder de hoofdnaam van de link te overschrijven.

Op deze manier blijft de zichtbare tekst leidend voor de toegankelijke naam, terwijl extra informatie beschikbaar is als aanvullende beschrijving.

<a
  class="link"
  href="https://space-trial.video-dns.com/oM1YMcsGRb/h264_hd.mp4"
  download="steve test.mov.mp4"
  aria-describedby="file-meta-video"
>
  MP4 Video
</a>

<div id="file-meta-video" class="file-meta">
  Video | <span>3-23-2026</span> | <span>0:27</span> | <span>mp4</span> |
  <span>14.5 MB</span>
</div>