Succescriterium 2.4.6 – Koppen en labels

Zorg dat er duidelijke koppen en labels worden gebruikt. Duidelijke koppen zijn belangrijk om te snappen hoe de inhoud is opgebouwd. Blinde gebruikers kunnen via een schermlezer via koppen navigeren. Duidelijke labels helpen gebruikers met het identificeren van inhoud. Gebruikers van stembediening spreken de labels uit om acties uit te voeren.

Impact

  • Blinde gebruikers kunnen via een schermlezer een overzicht opvragen van alle koppen op het scherm. Deze koppen moeten op zichzelf duidelijk zijn.
  • Zorg ervoor dat de labels gekoppeld zijn aan de invoervelden. Hierdoor kan de schermlezer aan gebruikers het label en het invoerveld voorlezen.

Controleren

Zijn koppen gemarkeerd als ‘kop’ en worden er labels gebruikt om inhoud te beschrijven?

Dit kan getest worden met de schermlezer.

Oplossing

Zorg dat je duidelijke koppen gebruikt: denk hier goed over na tijdens de designfase. Vergeet niet om koppen als kop te markeren, hoe je dat doet lees je bij succescriterium 1.3.1.

Op Android kun je labels aan invoervelden koppelen.

<TextView
    android:id="@+id/label"
    android:text="@string/appt_label"
    android:labelFor="@id/field">
</TextView>

<EditText
    android:id="@+id/field"
    android:hint="@string/appt_hint">
</EditText

Op iOS kun je via een omweg labels aan invoervelden koppelen. Dat doe je door isAccessibilityElement op false te zetten voor het label. Stel vervolgens het accessibilityLabel van het invoerveld in op de tekst van het label.

let label = UILabel()
label.text = "Appt label"
label.isAccessibilityElement = false

let field = UITextField()
field.placeholder = "Appt hint"
field.accessibilityLabel = label.text

Referenties

Meer succescriteria