Succescriterium 1.3.1 – Informatie en relaties

Zorg dat de informatie en relaties op het scherm ook voor gebruikers van hulpmiddelen duidelijk zijn.

Informatie op het scherm moet overgebracht worden aan hulpmiddelen. Zorg dat koppen bijvoorbeeld niet alleen dikgedrukt zijn, maar ook in de code als kop gemarkeerd zijn.

Relaties op het scherm moeten via hulpmiddelen te gebruiken zijn. Elementen in een lijst moeten één voor één genavigeerd kunnen worden. Elementen in een tabel moeten via rijen en kolommen kunnen worden genavigeerd.

Impact

  • Voor gebruikers van hulpsoftware is het belangrijk dat in een tabel de titels van rijen en kolommen voorgelezen worden.
  • Zorg dat alinea’s door hulpsoftware apart worden voorgelezen.
  • Zorg dat het voor hulpsoftware duidelijk is dat een lijst met bullets een lijst is.

Controleren

Is de opbouw van het scherm duidelijk bij het gebruiken van hulpmiddelen?”

Je kunt de schermlezer gebruiken om dit te controleren.

Oplossing

Bij websites wordt vaak gebruik gemaakt van WAI-ARIA attributen om informatie en relaties correct over te brengen. Bij apps kun je geen gebruik maken van deze attributen, omdat apps niet in HTML geschreven zijn. Voor een deel van deze attributen zijn er alternatieven beschikbaar, maar niet voor allemaal.

Informatie

Op Android kun je via setAccessibilityDelegate een referentie krijgen naar AccessibilityNodeInfoCompat. Vervolgens kun je informatie instellen via de volgende eigenschappen:

  • setClassName
    • Gebruik deze methode om gedrag van een object over te nemen. Stel bijvoorbeeld Button::class.java.name in als een element zich moet gedragen als een knop.
  • setCollectionInfo
    • Deze methode kun je gebruiken om informatie over collecties in te stellen. Stel bijvoorbeeld het aantal rijen en kolommen in. Als je RecyclerView gebruikt, dan wordt dit automatisch voor je gedaan.
  • setHeading
  • setLiveRegion
    • Gebruik deze methode als informatie op het scherm real-time bijgewerkt wordt. De nieuwe informatie wordt dan ook doorgegeven aan hulpmiddelen. Je kunt ook de methode ViewCompat.setAccessibilityLiveRegion gebruiken.
  • setPaneTitle
ViewCompat.setAccessibilityHeading(element, true)

ViewCompat.setAccessibilityLiveRegion(
    element, 
    ViewCompat.ACCESSIBILITY_LIVE_REGION_ASSERTIVE
)

ViewCompat.setAccessibilityPaneTitle(element, "Appt")

ViewCompat.setAccessibilityDelegate(
    view,
    object : AccessibilityDelegateCompat() {
        override fun onInitializeAccessibilityNodeInfo(
            host: View,
            info: AccessibilityNodeInfoCompat
        ) {
            super.onInitializeAccessibilityNodeInfo(host, info)
            info.className = Button::class.java.name
            info.setCollectionItemInfo(
                AccessibilityNodeInfoCompat.CollectionInfoCompat.obtain(10, 2, true)
            )
            info.isHeading = true
            info.liveRegion = ViewCompat.ACCESSIBILITY_LIVE_REGION_ASSERTIVE
            info.paneTitle = "Appt"
        }
    }
)

Op iOS kun je de accessibilityTraits eigenschap gebruiken om informatie in te stellen. De vijf meestgebruikte zijn: button voor knop, header voor kop, image voor afbeelding, link voor link en selected om een element als geselecteerd te markeren. Alle mogelijk waardes kun je bij UIAccessibilityTraits bekijken.

Daarnaast kun je de accessibilityValue gebruiken om de juiste waarde in te stellen. Tot slot kun je de accessibilityViewIsModal eigenschap gebruiken gebruiken om een deelvenster te markeren.

element.accessibilityTraits = [.button]
element.accessibilityValue = "50%"

viewController.accessibilityViewIsModal = true

Relaties

Op Android kun je elementen groeperen met de android:focusable en android:screenReaderFocusable attributen. Soms heb je ook het android:importantForAccessibility attribuut nodig. Vergeet niet om een contentDescription in te stellen voor de groep.

<LinearLayout
    android:focusable="true"
    android:contentDescription="Beschrijving"  >

    <TextView
        android:focusable="false"
        android:importantForAccessibility="no"/>

    <ImageView
        android:focusable="false"
        android:importantForAccessibility="no"/>
</LinearLayout>

Op iOS kun je de isAccessibilityElement en shouldGroupAccessibilityChildren attributen gebruiken om elementen te Vergeet niet om een accessibilityLabel in te stellen voor de groep.

group.isAccessibilityElement = true
group.shouldGroupAccessibilityChildren = true
group.accessibilityLabel = "Beschrijving"

Referenties

Meer succescriteria