Content Description: wat het is, principes en hoe in te stellen voor accessibility

Wat is Content Description in accessibility

Content Description — een tekenreekseigenschap van een interface-element die een tekstuele weergave van visuele inhoud doorgeeft aan ondersteunende technologieën. De screen reader (VoiceOver in iOS, TalkBack in Android) leest de beschrijving in plaats van te proberen het element visueel te herkennen. De beschrijving wordt toegepast op afbeeldingen zonder tekstlaag, pictogrammen, grafieken, aangepaste bedieningselementen en alle niet-tekstuele elementen.

Volgens Google Material Design, 2024 schenden elementen zonder contentDescription de regel WCAG 1.1.1 (Non-text Content). Controle met Accessibility Scanner toont aan dat tot 40% van de pictogrammen in winkelapps geen beschrijving hebben. Een VoiceOver-gebruiker hoort alleen “afbeelding” of “knop” zonder specificatie — zo’n interface wordt onbruikbaar voor navigatie.

Content Description vervangt niet de zichtbare tekst van het element. Als een knop een tekstlabel “Verzenden” bevat, is een extra beschrijving niet nodig — de screen reader leest de tekst. Voor afbeeldingen, pictogrammen en invoervelden is een beschrijving verplicht.

De tools Accessibility Scanner (Android) en Xcode Accessibility Inspector (iOS) controleren automatisch de aanwezigheid van beschrijvingen. Het wordt aanbevolen deze controles op elk scherm uit te voeren vóór de release.

Waarom Content Description nodig is: gebruikersscenario’s

Een gebruiker met een visuele beperking vertrouwt op VoiceOver om de interface te begrijpen. Als het winkelwagenpictogram geen beschrijving heeft, hoort hij alleen “knop”. Om te weten wat de knop doet, moet hij er blind op drukken — risico op onomkeerbare actie. De beschrijving “Product uit winkelwagen verwijderen” lost dit probleem in een seconde op.

Een gebruiker met tijdelijke beperkingen (fel zonlicht buiten, kapot scherm) gebruikt ook VoiceOver. Volgens Apple Accessibility Report, 2023 heeft ongeveer 20% van de VoiceOver-gebruikers geen permanente visuele beperkingen — ze schakelen deze functie situationeel in.

WCAG 1.1.1: Non-text Content

Het WCAG 1.1.1-criterium (niveau A) vereist dat elke niet-tekstuele inhoud een tekstalternatief heeft. Uitzondering: inhoud die decoratief is, alleen voor visuele vormgeving wordt gebruikt of geen informatie draagt. Decorativiteitstest: als we het element verwijderen, verandert dan de betekenis van de pagina? Zo niet — dan kan het worden verborgen voor de screen reader.

Hoe verschilt Content Description van Label

Accessibility Label (accessibilityLabel in iOS) — de naam van het element die de screen reader uitspreekt bij focus. Content Description (accessibilityHint in iOS) — een extra toelichting die na de naam wordt uitgesproken en het resultaat van de actie meldt.

Het verschil is goed te zien aan het voorbeeld van de “Winkelwagen”-knop. Label: “Winkelwagen”. Description: “Opent het bestelscherm”. VoiceOver zegt: “Winkelwagen. Opent het bestelscherm”. Als alleen Label wordt ingesteld, weet de gebruiker niet wat er na het indrukken gebeurt.

Tabel: Label versus Description

Regel: Label beantwoordt de vraag “Wat is dit?”, Description — “Wat gebeurt er?”. In Android kan contentDescription beide rollen vervullen, maar in de praktijk is het beter ze te scheiden: gebruik concatenatie “[naam], [toelichting]”.

Wanneer Description belangrijker is dan Label

Voor complexe gebaren (vegen om te verwijderen, lang indrukken voor contextmenu) is accessibilityHint verplicht. Een VoiceOver-gebruiker weet niets van verborgen gebaren als ze niet worden beschreven. Geef aan: “Veeg naar links om te verwijderen” in de hint van het element.

iOS: attribuut accessibilityHint

In het iOS-platform wordt accessibilityHint ingesteld via de gelijknamige eigenschap van UIView of NSObject. Waarde — een tekenreeks tot 80 tekens. VoiceOver leest de hint na de label als de modus voor gedetailleerde beschrijvingen is ingeschakeld (in VoiceOver-instellingen — “Verbosity”).

Voorbeeld van het instellen van een hint voor een aangepaste knop:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Toevoegen aan favorieten"
        self.accessibilityHint = "Bewaart het product in de favorietenlijst"
    }
}

Voor UIImageView zonder tekstuele inhoud is het verplicht om isAccessibilityElement = true en accessibilityHint in te stellen:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Verkoopgrafiek laatste kwartaal"

VoiceOver leest: “Verkoopgrafiek laatste kwartaal”. Als de hint leeg is — alleen “afbeelding”. Apple HIG, 2024 raadt af om werkwoorden zoals “druk” of “raak” in de hint te gebruiken — VoiceOver voegt automatisch een gebareninstructie toe.

SwiftUI: modifier accessibilityHint

In SwiftUI wordt de hint ingesteld via een chain-modifier:

Image(systemName: "trash")
    .accessibilityLabel("Verwijderen")
    .accessibilityHint("Verwijdert het geselecteerde element definitief")

SwiftUI combineert automatisch modifiers voor samengestelde views. Als Image zich binnen Button bevindt, gebruikt SwiftUI het label van de knop als primaire accessibilityLabel.

Android: eigenschap contentDescription

In Android wordt contentDescription ingesteld in XML-opmaak of programmatisch via setContentDescription(). TalkBack spreekt de beschrijving uit bij focus op het element.

Voorbeeld in XML:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Producten zoeken" />

Programmatische instelling voor dynamische elementen:

binding.iconSearch.contentDescription =
    "Zoeken. Opent het zoekscherm met filters"

Voor decoratieve afbeeldingen (scheidingstekens, achtergronden, decoratieve pictogrammen) stelt u contentDescription = "@null" of setContentDescription(null) in — TalkBack slaat zo’n element over. In XML: android:contentDescription="@null". Een lege tekenreeks "" werkt niet — TalkBack zegt nog steeds “afbeelding”.

Android: belangrijke details voor ImageButton en CheckBox

Stel voor ImageButton altijd contentDescription in — TalkBack ziet de tekst op de afbeelding niet. Voor CheckBox moet de beschrijving dynamisch veranderen: “Geselecteerd” / “Niet geselecteerd” in plaats van een statische beschrijving. Gebruik setContentDescription in de statuslistener.

Regels voor het schrijven van beschrijvingen

Informatief — de beschrijving moet de betekenis overbrengen, niet het uiterlijk. Niet “Blauw pictogram met vinkje”, maar “Product toegevoegd aan winkelwagen”. De screen reader geeft niet om kleuren — hij geeft om het resultaat.

Beknopt — optimale lengte 2–4 woorden (tot 80 tekens). Lange beschrijvingen vertragen de navigatie: VoiceOver leest sequentieel, elk woord is een seconde van de gebruikerstijd. Volgens Apple WWDC 2023, “Accessibility by Design” onderbreekt een frase langer dan 5 seconden leestijd de cognitieve stroom.

Uniek — er mogen geen twee elementen met dezelfde beschrijving op één scherm staan. De gebruiker kan niet onderscheiden welk resultaat focus op het eerste en tweede element oplevert. Als er meerdere “Koop”-knoppen zijn — voeg een identificatie toe: “Koop iPhone 15”, “Koop iPhone 15 Pro”.

Lokalisatie — Content Description wordt vertaald naar alle talen die de app ondersteunt. Een lokalisatiefout van de beschrijving is een van de veelvoorkomende oorzaken van het mislukken van de Accessibility Review in de App Store.

Lengte van beschrijving: onderzoek

Onderzoek van Nielsen Norman Group, 2024 toonde aan dat de optimale beschrijvingslengte voor screen readers 3–5 woorden (tot 50 tekens) is. Langere beschrijvingen verminderen de navigatiesnelheid met 30%, omdat de gebruiker moet wachten tot het uitspreken is voltooid voordat hij de volgende stap kan zetten.

Veelgemaakte fouten bij gebruik

Overbodigheid — de beschrijving herhaalt de zichtbare tekst. Als de knop de tekst “Verzenden” bevat, stel dan niet accessibilityHint = “Verzendknop” in. VoiceOver leest de tekst automatisch en de hint voegt onnodige ruis toe.

Verwarring met Label — gebruik van contentDescription in plaats van label voor tekstknoppen. In iOS moet accessibilityLabel overeenkomen met de knoptekst (of leeg zijn als de tekst al zichtbaar is), en hint alleen de actie toelichten. Volgens Google Testing Blog, 2024 heeft 23% van de onderzochte apps in de Play Store dubbele beschrijvingen.

Negeren van dynamiek — de beschrijving wordt niet bijgewerkt bij statuswijziging. Bijvoorbeeld, bij de “Wi-Fi”-schakelaar blijft de beschrijving “Wi-Fi inschakelen”, zelfs na inschakeling. Correct: verander de beschrijving dynamisch naar “Wi-Fi uitschakelen” door statusobservatie.

Render cycli en regressies

Na een ontwerpupdate (wijzigen van pictogrammen, herschikken van elementen) gaat Content Description vaak verloren. Oorzaak: de ontwerper vervangt de afbeelding, de ontwikkelaar controleert de toegankelijkheidseigenschappen van de nieuwe asset niet. Oplossing: maak toegankelijkheidscontrole een verplichte stap in code review — voeg een checklist toe met het punt “Content Description bijgewerkt?”.

Hoe Content Description te controleren

• In iOS: Xcode → Accessibility Inspector — selecteer het element, controleer de velden Label en Hint
• In Android: installeer Accessibility Scanner uit de Play Store — voer uit op uw scherm
• Op beide platforms: schakel VoiceOver/TalkBack in en doorloop het hele scherm met gebaren
• Schrijf een UI-test die contentDescription controleert voor alle ImageView

Voorbeeld UI-test voor iOS

func testContentDescriptionExists() {
    let app = XCUIApplication()
    app.launch()
    let image = app.images["chart-sales"]
    XCTAssertNotNil(image.label)
    XCTAssertGreaterThan(image.label.count, 0)
}