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