Training Toegankelijke video players. 28 Maart 2019

Transcriptie

1 Training Toegankelijke video players 28 Maart 2019

2 Introductie Stichting Accessibility 17 jaar internationaal expertisecentrum voor toegankelijke ICT Not-for-profit instelling Lid van W3c, oa NLse vertaling WCAG2.0 Mede-auteur Webrichtlijnen Oprichter van Waarmerk drempelvrij.nl

3 Toegankelijke Video s Auditieve beschrijving, ondertitels en andere eisen

4 Video s Multimedia is een boodschap verteld in combinatie van beeld en geluid Als je niet kunt horen: Alle relevante informatie in beeld (ondertiteling) Als je niet kunt zien: Alle relevante informatie in het geluid (audiodescriptie) 4

5 Ondertitels 5

6 Ondertitels Geen automatische ondertitels Niet alleen conversaties maar ook belangrijke geluiden SRT formaat ter download aanbieden Automatische ondertitels gebruiken als startbasis In dezelfde taal als de video 6

7 Auditieve beschrijving 7

8 Auditieve beschrijving Geen beschrijving van de audio! Maar: een beschrijving van het beeld met behulp van audio Sowieso alle (informatieve tekst) moet binnen auditieve beschrijving genoemd worden In dezelfde taal als de video De video hoeft niet stopgezet te worden. MP3 ter download 8

9 Auditieve beschrijving ontwijken Laat ieder in het filmpje zich voorstellen Voiceover voor splash screens 9

10 Auditieve beschrijving Talking head Bij slechts 1 persoon die spreekt (mogelijk met een begin en eind splash screen) is auditieve beschrijving niet nodig. 10

11 Geluidsbediening Automatisch startend geluid moet stopgezet of zachter gezet kunnen worden helemaal boven aan de pagina. Zodat screenreader gebruikers het onmiddellijk kunnen uitzetten. Dit betekent het eerste element dat focus ontvangt. Dit geld ook voor reclame. Uitzondering: Als het niet langer duurt dan 3 seconden. Reguliere gebruikers hebben ook een hekel aan automatisch startend geluid.

12 Beweging Zorg dat je bewegende of knipperende content kunt pauzeren als dit: Automatisch start EN Langer duurt dan 5 seconden Zorg dat je automatisch actualiserende content kunt: Stoppen of pauzeren OF Frequentie kunt instellen

13 Contrast Zorg voor voldoende contrast tussen de tekst en de achtergrond. Contrast van tekst: minimaal 4,5:1 Uitzonderingen: Grote tekst (24px of 19px dikgedrukt): 3:1 Decoratief of inactief: geen contrasteis Logo s of merknaam: geen contrasteis

14 Colour Contrast Analyser Download de Colour Contrast Analyser. Test het contrast van verschillende onderdelen (vooral de ondertitels bij zowel lichte als donkere scenes) Is het contrast voldoende? Download:

15 Flitsen Niet meer dan 3 keer per seconden Liever volledig vermijden

16 Toegankelijke Player Kiezen voor een toegankelijke video player

17 Eisenlijst Een Volledig toegankelijke video player heeft: Ondertitels (met een hoog genoeg contrast) Auditieve beschrijving Toetsenbord toegankelijkheid Naam Rol Waarde aangegeven in de code voor alle knoppen Geen automatisch starten (Tenzij pauze knop de eerste knop is op de pagina)

18 Naam, rol, waarde - Naam Zorg dat de naam van interface componenten helder zijn voor hulpsoftware De naam van een formulierveld is zijn label <label for="text_1">soort fruit</label> <input id="text_1" type="text" value=""> De naam van een link is de linktekst (of alt-attribuut) <a href="/home.html">homepage</a> De naam van een knop is de tekst tussen de button elementen of de value <button>indienen</button>

19 Missende naam voorbeeld De iconen zijn klikbaar, maar missen een naam. Wat de screenreader opleest: Was dit antwoord nuttig? Knop Knop

20 Naam, rol, waarde - Rol Zorg dat hulpsoftware weet wat de rol is van interface componenten De rol wordt bepaald door het HTML element (eventueel met type) De rol bepaald standaardacties en eigenschappen Bijvoorbeeld : <input type="button value="afronden"> De rol is knop. Een knop: kan je indrukken met Enter en Spatiebalk; heeft een naam; kan toetsenbordfocus ontvangen; is niet om te navigeren.

21 Naam, rol, waarde - Waarde Als een gebruiker de toestanden, eigenschappen en waarden kan instellen, dan kan hulpsoftware dit ook. Veranderd de toestand, dan is dat door de gebruiker op te merken Bijvoorbeeld: <label for="cb_1">rode wijn</label> <input id="cb_1" type="checkbox" checked="checked"> De toestand is 'aangevinkt'.

22 Naam, rol, waarde - Veranderde toestand Let op: het openen van een lightbox / dialoogvenster, uitklappen van een extra toelichting en het aanvinken van een zelfgemaakte checkbox zijn veranderingen waarvan die de gebruiker moet kunnen bemerken.

23 Toetsenbord Alle content moet via het toetsenbord te bedienen zijn. Let op: Menu s Filmpjes en videospelers Extra informatie icoontjes bij formulieren Formulierknoppen

24 Website bedienen Een website bedienen met het toetsenbord kan met Tab, Enter, spatiebalk en pijltjestoetsen. Zelf ervaren: 1. Ga naar een website. 2. Gebruik alleen het toetsenbord om te navigeren. 3. Wat valt je op? Is alles bedienbaar?

25 Case study - Youtube Youtube bied: Ondertitels (met een hoog genoeg contrast) Geen(!) Auditieve beschrijving Toetsenbord toegankelijkheid Naam Rol Waarde aangegeven in de code voor alle knoppen Geen automatisch starten

26 Case study Youtube alsnog gebruiken Een filmpje geplaatst met Youtube heeft dan dus nog nodig: Handmatige ondertiteling OF een filmpje waar auditieve beschrijving niet nodig is OF een downloadbaar alternatief waarbij auditieve beschrijving alsnog aangeboden is OF het filmpje is twee keer geupload op youtube (1 keer met en 1 keer zonder auditieve beschrijving)

27 Stichting Accessibility Christiaan Krammlaan AX Utrecht Telefoon: