Succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Audiodescriptie is een bewerkt audiospoor van de video, waarbij via gesproken tekst belangrijke visuele details beschreven zijn. Om te voldoen aan dit succescriterium moet je audiodescriptie aanbieden voor alle video’s met geluid.

Het doel van dit succescriterium is dat mensen die blind of slechtziend zijn de visuele informatie volledig tot zich kunnen nemen.

Indien je bij succescriterium 1.2.3 hebt gekozen voor audiodescriptie, voldoe je al aan succescriterium 1.2.5.

Audiodescriptie toevoegen

Android

Vanaf Android 4.1 heeft de MediaPlayer ondersteuning voor meerdere audiosporen. Gebruik de selectTrack methode om het juist audiospoor te selecteren. De basis implementatie met MediaPlayer:

val player = MediaPlayer.create(this, R.raw.video)
try {
    player.trackInfo.forEachIndexed { index, trackInfo ->
        if (trackInfo.trackType == TrackInfo.MEDIA_TRACK_TYPE_AUDIO) {
            player.selectTrack(index)
            return@forEachIndexed
        }
    }
    player.start()
} catch (e: Exception) {
    e.printStackTrace()
}

iOS

Op iOS heeft AVPlayer ondersteuning om audiodescriptie toe te voegen. Gebruikers kunnen via de systeemvoorkeuren audiodescriptie automatisch laten inschakelen. Dit werkt als je de public.accessibility.describes-video karakteristiek toevoegt aan het audiospoor met audiodescriptie.

Je kan op de volgende manier audiodescriptie toevoegen aan een video:

let videoComposition = AVMutableComposition()

// Add video track
guard let videoTrack = videoComposition.addMutableTrack(withMediaType: .video, preferredTrackID: kCMPersistentTrackID_Invalid) else { return }
guard let videoUrl = Bundle.main.url(forResource: "Video", withExtension: "mp4") else { return }
let videoAsset = AVURLAsset.init(url: videoUrl)
try? videoTrack.insertTimeRange(CMTimeRangeMake(start: .zero, duration: videoAsset.duration),
                                 of: videoAsset.tracks(withMediaType: .video)[0],
                                 at: .zero)

// Find & add audio description track
for track in videoAsset.tracks {
    if track.hasMediaCharacteristic(.describesVideoForAccessibility) {
        guard let audioTrack = videoComposition.addMutableTrack(withMediaType: track.mediaType, preferredTrackID: kCMPersistentTrackID_Invalid) else { return }
        try? audioTrack.insertTimeRange(CMTimeRange(start: .zero, duration: videoAsset.duration),
                                        of: track,
                                        at: .zero)
        break
    }
}

Audiodescriptie voorbeeld

Luister naar een fragment van Gordon & Paddy met audiodescriptie.

Referenties

Succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Live video’s moeten voorzien zijn van real-time ondertiteling.

Het doel van dit succescriterium is dat doven en slechthorenden de inhoud van live video’s begrijpen.

Live ondertiteling toevoegen

De uitdaging bij live ondertiteling is organisatorisch en technisch. Er moet namelijk een ondertitelaar aanwezig zijn die via de juiste software de live video direct kan voorzien van ondertiteling.

Android

We raden aan om gebruik te maken van een codebibliotheek zoals ExoPlayer. ExoPlayer is ontwikkeld door Google en biedt een open-source alternatief voor de MediaPlayer van Android voor het afspelen van audio en video. In de documentatie zijn veel codevoorbeelden te vinden. Je kunt DefaultTrackSelector gebruiken voor het tonen van ondertiteling.

val trackSelector = DefaultTrackSelector(baseContext)
trackSelector.setParameters(
    trackSelector.buildUponParameters().setPreferredTextLanguage("nl")
)

val exoPlayer = SimpleExoPlayer.Builder(baseContext)
                    .setTrackSelector(trackSelector)
                    .build()

val dataSourceFactory: DataSource.Factory = DefaultHttpDataSourceFactory(
    Util.getUserAgent(baseContext, "Appt"), null,
    DefaultHttpDataSource.DEFAULT_CONNECT_TIMEOUT_MILLIS,
    1800000,
    true
)

val mediaUri = Uri.parse("https://live.video")
val mediaSource = HlsMediaSource.Factory(dataSourceFactory).createMediaSource(mediaUri)

exoPlayer.prepare(mediaSource)

iOS

Op iOS heeft AVPlayer ondersteuning voor live video met ondertiteling. Gebruikers kunnen via de systeemvoorkeuren ondertiteling automatisch laten aanzetten. De makkelijkste manier om een live video te streamen is via AVPlayerViewController.

guard let url = URL(string: "https://live.video") else { return }
let player = AVPlayer(url: url)

let playerViewController = AVPlayerViewController()
playerViewController.player = player

present(playerViewController, animated: true) {
    player.play()
}

Referenties

Succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Audiodescriptie is een bewerkt audiospoor van de video, waarbij via gesproken tekst belangrijke visuele details beschreven zijn. Om te voldoen aan dit succescriterium moet je voor alle video’s met geluid een variant met audiodescriptie aan bieden. Je kunt er ook voor kiezen om een volledig uitgeschreven transcript toe te voegen.

Het doel van dit succescriterium is dat mensen die blind of slechtziend zijn de visuele informatie volledig tot zich kunnen nemen.

Let op: als je kiest voor een transcript voldoe je niet aan succescriterium 1.2.5 (niveau AA).

Audiodescriptie toevoegen

Android

Vanaf Android 4.1 heeft de MediaPlayer ondersteuning voor meerdere audiosporen. Gebruik de selectTrack methode om het juist audiospoor te selecteren. De basis implementatie met MediaPlayer:

val player = MediaPlayer.create(this, R.raw.video)
try {
    player.trackInfo.forEachIndexed { index, trackInfo ->
        if (trackInfo.trackType == TrackInfo.MEDIA_TRACK_TYPE_AUDIO) {
            player.selectTrack(index)
            return@forEachIndexed
        }
    }
    player.start()
} catch (e: Exception) {
    e.printStackTrace()
}

iOS

Op iOS heeft AVPlayer ondersteuning om audiodescriptie toe te voegen. Gebruikers kunnen via de systeemvoorkeuren audiodescriptie automatisch laten inschakelen. Dit werkt als je de public.accessibility.describes-video karakteristiek toevoegt aan het audiospoor met audiodescriptie.

Je kan op de volgende manier audiodescriptie toevoegen aan een video:

let videoComposition = AVMutableComposition()

// Add video track
guard let videoTrack = videoComposition.addMutableTrack(withMediaType: .video, preferredTrackID: kCMPersistentTrackID_Invalid) else { return }
guard let videoUrl = Bundle.main.url(forResource: "Video", withExtension: "mp4") else { return }
let videoAsset = AVURLAsset.init(url: videoUrl)
try? videoTrack.insertTimeRange(CMTimeRangeMake(start: .zero, duration: videoAsset.duration),
                                 of: videoAsset.tracks(withMediaType: .video)[0],
                                 at: .zero)

// Find & add audio description track
for track in videoAsset.tracks {
    if track.hasMediaCharacteristic(.describesVideoForAccessibility) {
        guard let audioTrack = videoComposition.addMutableTrack(withMediaType: track.mediaType, preferredTrackID: kCMPersistentTrackID_Invalid) else { return }
        try? audioTrack.insertTimeRange(CMTimeRange(start: .zero, duration: videoAsset.duration),
                                        of: track,
                                        at: .zero)
        break
    }
}

Audiodescriptie voorbeeld

Luister naar een fragment van de Lion King met audiodescriptie.

Referenties

Succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Video’s met geluid moeten voorzien worden van ondertiteling. De ondertiteling moet het volgende bevatten:

  1. Volledige dialoog
  2. Sprekers identificeren
  3. Informatie die niet door spraak wordt overgedragen beschrijven, zoals geluidseffecten.

Het doel van dit succescriterium is dat doven en slechthorenden ook video’s kunnen bekijken.

Ondertiteling toevoegen

Android

Vanaf Android 4.1 heeft de MediaPlayer ondersteuning voor TimedText. De basis implementatie met MediaPlayer ziet er als volgt uit:

val player = MediaPlayer.create(this, R.raw.video)
try {
    player.addTimedTextSource("path/to/timed/text/source", MediaPlayer.MEDIA_MIMETYPE_TEXT_SUBRIP)

    player.trackInfo.forEachIndexed { index, trackInfo ->
        if (trackInfo.trackType == TrackInfo.MEDIA_TRACK_TYPE_TIMEDTEXT) {
            player.selectTrack(index)
            return@forEachIndexed
        }
    }

    player.setOnTimedTextListener(this)
    player.start()
} catch (e: Exception) {
    e.printStackTrace()
}

iOS

Op iOS heeft AVPlayer ondersteuning om ondertiteling toe te voegen. Gebruikers kunnen via de systeemvoorkeuren ondertiteling automatisch laten aanzetten. Je kan op de volgende manier ondertiteling toevoegen aan een video:

// Add video track
guard let videoTrack = videoComposition.addMutableTrack(withMediaType: .video, preferredTrackID: kCMPersistentTrackID_Invalid) else { return }
guard let videoUrl = Bundle.main.url(forResource: "Video", withExtension: "mp4") else { return }
let videoAsset = AVURLAsset.init(url: videoUrl)
try? videoTrack.insertTimeRange(CMTimeRangeMake(start: .zero, duration: videoAsset.duration),
                                 of: videoAsset.tracks(withMediaType: .video)[0],
                                 at: .zero)

// Add subtitle track
guard let subtitleUrl = Bundle.main.url(forResource: "Video", withExtension: ".mp4.vtt") else { return }
guard let subtitleTrack = videoComposition.addMutableTrack(withMediaType: .text, preferredTrackID: kCMPersistentTrackID_Invalid) else { return }
let subtitleAsset = AVURLAsset(url: subtitleUrl)
try? subtitleTrack.insertTimeRange(CMTimeRangeMake(start: .zero, duration: videoAsset.duration),
                              of: subtitleAsset.tracks(withMediaType: .text)[0],
                              at: .zero)

Referenties

Succescriterium 1.2.1 Louter-geluid en louter-videobeeld

Indien er alleen geluid of alleen videobeeld is, moet er een uitgeschreven tekst worden aangeboden.

  • Bij alleen geluid moet een uitgeschreven tekst aangeboden worden.
  • Bij alleen video moet een uitgeschreven tekst of geluidsspoor aangeboden worden. Het geluidsspoor moet alle visuele informatie beschrijven.

Het doel van dit succescriterium is om de inhoud ook begrijpelijk te maken voor gebruikers die moeite hebben met horen en/of zien.

Uitgeschreven tekst toevoegen

Android

Er zijn veel manieren om uitgeschreven tekst toe te voegen. Het handigste is om de tekst direct onder de video te plaatsen. Zorg er voor dat de tekst goed scrollbaar is, bijvoorbeeld met een ScrollView. Je kan er ook voor kiezen om via een knop naar de uitgeschreven tekst te verwijzen.

Voorbeeld van scrollbare tekst:

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/video_transcript" />
</ScrollView>

iOS

Voor iOS is het ook het handigste om tekst direct onder de video te plaatsen. Zorg er voor dat de tekst goed scrollbaar is, bijvoorbeeld met een UIScrollView. Je kan ook via een knop naar de uitgeschreven tekst verwijzen.

Voorbeeld van scrollbare tekst:

ScrollView {
    Text("Video description")
        .fixedSize(horizontal: false, vertical: true)
}

Referenties

Succescriterium 1.1.1 Niet-tekstuele content

Alle niet-tekstuele content moet een tekstueel alternatief hebben.

  • Een afbeelding moet bijvoorbeeld voorzien zijn van een tekstuele beschrijving, tenzij deze puur decoratief is.
  • Bedieningselementen en invoer moeten voorzien zijn van een naam die het doel er van beschrijft. In succescriterium 4.1.2 staan aanvullende eisen.
  • Op tijd gebaseerde media zoals audio en video moeten tenminste voorzien zijn van een beschrijving. In richtlijn 1.2 staan aanvullende eisen.

Het doel van dit succescriterium is om informatie die wordt overgebracht door niet-tekstuele inhoud toegankelijk te maken voor iedereen.

Tekstalternatief toevoegen

Android

Op Android kun je de contentDescription eigenschap gebruiken:

element.contentDescription = "Voorbeeld"

iOS

Op iOS kun je de accessibilityLabel eigenschap gebruiken:

element.accessibilityLabel = "Voorbeeld"

Doel beschrijven

Android

Op Android kun je de hint eigenschap gebruiken:

element.hint = "Beschrijving"

iOS

Op iOS kun je de placeholder eigenschap gebruiken:

element.placeholder = "Beschrijving"

Actie beschrijven

Android

Op Android kun je de actie beschrijven via een AccessibilityActionCompat object:

ViewCompat.setAccessibilityDelegate(view, object : AccessibilityDelegateCompat() {
    override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
        super.onInitializeAccessibilityNodeInfo(host, info)

        val action = AccessibilityNodeInfoCompat.AccessibilityActionCompat(AccessibilityNodeInfoCompat.ACTION_CLICK, "Actie")
        info.addAction(action)
    }
})

iOS

Op iOS kun je de actie beschrijving via de accessibilityHint eigenschap:

element.accessibilityHint = "Actie"

Referenties

Richtlijnen voor toegankelijkheid van apps

De internationale richtlijnen voor digitale toegankelijkheid zijn de Web Content Accessibility Guidelines (WCAG). Deze richtlijnen gelden ook voor apps. Je kunt de huidige richtlijnen hier vinden: WCAG 2.1 (Nederlandstalig).

De richtlijnen zijn opgedeeld in vier principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Elk principe heeft richtlijnen. Elke richtlijn heeft succescriteria.

Er zijn drie niveau’s: A, AA en AAA. Voor elk niveau geldt dat je aan de voorgaande niveau’s moet voldoen. Om aan niveau AAA te voldoen, moet je dus aan de succescriteria van niveau A, A én AAA voldoen.

Klik op het succescriteria om te lezen hoe je er voor zorgt dat jouw app hier aan voldoet. Let op: nog niet alle succescriteria zijn door ons beschreven.

Principe 1. Waarneembaar

Het principe waarneembaar omvat richtlijnen over het toonbaar maken van informatie en componenten van de gebruikersinterface aan gebruikers op een voor hen waarneembare wijze.

Richtlijn 1.1 Tekstalternatieven

Lever tekstalternatieven voor alle niet-tekstuele content, zodat die veranderd kan worden in andere vormen die mensen nodig hebben, zoals grote letters, braille, spraak, symbolen of eenvoudigere taal.

Niveau A:

Richtlijn 1.2 Op tijd gebaseerde media

Lever alternatieven voor op tijd gebaseerde media.

Niveau A:

Niveau AA:

Niveau AAA:

  • Succescriterium 1.2.6 Gebarentaal (vooraf opgenomen)
  • Succescriterium 1.2.7 Verlengde audiodescriptie (vooraf opgenomen)
  • Succescriterium 1.2.8 Media-alternatief (vooraf opgenomen)
  • Succescriterium 1.2.9 Louter-geluid (live)

Richtlijn 1.3 Aanpasbaar

Creëer content die op verschillende manieren gepresenteerd kan worden (bijvoorbeeld eenvoudiger lay-out) zonder verlies van informatie of structuur.

Niveau A:

  • Succescriterium 1.3.1 Info en relaties
  • Succescriterium 1.3.2 Betekenisvolle volgorde
  • Succescriterium 1.3.3 Zintuiglijke eigenschappen

Niveau AA:

  • Succescriterium 1.3.4 Weergavestand
  • Succescriterium 1.3.5 Identificeer het doel van de input

Niveau AAA:

  • Succescriterium 1.3.6 Identificeer het doel

Richtlijn 1.4 Onderscheidbaar

Maak het voor gebruikers gemakkelijker om content te horen en te zien, waaronder scheiding van voorgrond en achtergrond.

Niveau A:

  • Succescriterium 1.4.1 Gebruik van kleur
  • Succescriterium 1.4.2 Geluidsbediening

Niveau AA:

  • Succescriterium 1.4.3 Contrast (minimum)
  • Succescriterium 1.4.4 Herschalen van tekst
  • Succescriterium 1.4.5 Afbeeldingen van tekst
  • Succescriterium 1.4.10 Reflow
  • Succescriterium 1.4.11 Contrast van niet-tekstuele content
  • Succescriterium 1.4.12 Tekstafstand
  • Succescriterium 1.4.13 Content bij hover of focus

Niveau AAA:

  • Succescriterium 1.4.6 Contrast (versterkt)
  • Succescriterium 1.4.7 Weinig of geen achtergrondgeluid
  • Succescriterium 1.4.8 Visuele weergave
  • Succescriterium 1.4.9 Afbeeldingen van tekst (geen uitzondering)

Principe 2. Bedienbaar

Het principe bedienbaar omvat richtlijnen over het bedienbaar maken van componenten van de gebruikersinterface en navigatie.

Richtlijn 2.1 Toetsenbordtoegankelijk

Maak alle functionaliteit beschikbaar vanaf een toetsenbord.

Niveau A:

  • Succescriterium 2.1.1 Toetsenbord
  • Succescriterium 2.1.2 Geen toetsenbordval
  • Succescriterium 2.1.4 Enkel teken sneltoetsen

Niveau AAA:

  • Succescriterium 2.1.3 Toetsenbord (geen uitzondering)

Richtlijn 2.2 Genoeg tijd

Geef gebruikers genoeg tijd om content te lezen en te gebruiken.

Niveau A:

  • Succescriterium 2.2.1 Timing aanpasbaar
  • Succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Niveau AAA:

  • Succescriterium 2.2.3 Geen timing
  • Succescriterium 2.2.4 Onderbrekingen
  • Succescriterium 2.2.5 Herauthentisering
  • Succescriterium 2.2.6 Time-outs

Richtlijn 2.3 Toevallen en fysieke reacties

Ontwerp content niet op een manier waarvan bekend is dat die toevallen of fysieke reacties veroorzaakt.

Niveau A:

  • Succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Niveau AAA:

  • Succescriterium 2.3.2 Drie flitsen
  • Succescriterium 2.3.3 Animatie uit interacties

Richtlijn 2.4 Navigeerbaar

Lever manieren om gebruikers te helpen navigeren, content te vinden en te bepalen waar ze zijn.

Niveau A:

  • Succescriterium 2.4.1 Blokken omzeilen
  • Succescriterium 2.4.2 Paginatitel
  • Succescriterium 2.4.3 Focus volgorde
  • Succescriterium 2.4.4 Linkdoel (in context)

Niveau AA:

  • Succescriterium 2.4.5 Meerdere manieren
  • Succescriterium 2.4.6 Koppen en labels
  • Succescriterium 2.4.7 Focus zichtbaar

Niveau AAA:

  • Succescriterium 2.4.8 Locatie
  • Succescriterium 2.4.9 Linkdoel (alleen link)
  • Succescriterium 2.4.10 Paragraafkoppen

Richtlijn 2.5 Input Modaliteiten

Maak het eenvoudiger voor gebruikers om de functionaliteit te bedienen met andere vormen van invoer dan alleen het toetsenbord.

Niveau A:

  • Succescriterium 2.5.1 Aanwijzergebaren
  • Succescriterium 2.5.2 Aanwijzerannulering
  • Succescriterium 2.5.3 Label in naam
  • Succescriterium 2.5.4 Bewegingsactivering

Niveau AAA:

  • Succescriterium 2.5.5 Grootte van het aanwijsgebied
  • Succescriterium 2.5.6 Input gelijktijdige invoermechanismen

Principe 3. Begrijpelijk

Het principe begrijpelijk omvat richtlijnen over het begrijpelijk maken van informatie en de bediening van de gebruikersinterface.

Richtlijn 3.1 Leesbaar

Maak tekstcontent leesbaar en begrijpelijk.

Niveau A:

  • Succescriterium 3.1.1 Taal van de pagina
  • Succescriterium 3.1.2 Taal van onderdelen

Niveau AAA:

  • Succescriterium 3.1.3 Ongebruikelijke woorden
  • Succescriterium 3.1.4 Afkortingen
  • Succescriterium 3.1.5 Leesniveau
  • Succescriterium 3.1.6 Uitspraak

Richtlijn 3.2 Voorspelbaar

Maak het uiterlijk en de bediening van webpagina’s voorspelbaar.

Niveau A:

  • Succescriterium 3.2.1 Bij focus
  • Succescriterium 3.2.2 Bij input

Niveau AA:

  • Succescriterium 3.2.3 Consistente navigatie
  • Succescriterium 3.2.4 Consistente identificatie

Niveau AAA:

  • Succescriterium 3.2.5 Verandering op verzoek

Richtlijn 3.3 Assistentie bij invoer

Help gebruikers om fouten te vermijden en ze te verbeteren.

Niveau A:

  • Succescriterium 3.3.1 Foutidentificatie
  • Succescriterium 3.3.2 Labels of instructies

Niveau AA:

  • Succescriterium 3.3.3 Foutsuggestie
  • Succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Niveau AAA:

  • Succescriterium 3.3.5 Hulp
  • Succescriterium 3.3.6 Foutpreventie (alle)

Principe 4. Robuust

Het principe robuust omvat richtlijnen over het voldoende robuust maken van content om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala van user agents, met inbegrip van hulptechnologieën.

Richtlijn 4.1 Compatibel

Maximaliseer compatibiliteit met huidige en toekomstige user agents, met inbegrip van hulptechnologieën.

Niveau A:

  • Succescriterium 4.1.1 Parsen
  • Succescriterium 4.1.2 Naam, rol, waarde

Niveau AA:

  • Succescriterium 4.1.3 Statusberichten

Implementatie

Het lezen van alle richtlijnen en succescriteria roept vast veel vragen op. De belangrijkste is waarschijnlijk: hoe zorg ik dat mijn app aan de richtlijnen voldoet?

Gaat het om een bestaande app? Met een quickscan kun je er snel achter komen hoe toegankelijk een app is. Middels een audit krijg je een volledig overzicht aan welke richtlijnen en succescriteria een app wel en niet voldoet.

Gaat het om een nieuwe app? Zorg dan dat er tijdens het volledige ontwikkelproces rekening gehouden wordt met richtlijnen, en niet pas achteraf.

Je kunt altijd contact met ons opnemen voor advies.