Succescriterium 4.1.2 – Naam, rol, waarde

Zorg dat het voor gebruikers van hulpmiddelen duidelijk is welke acties er kunnen worden uitgevoerd.

Stel een naam in. De naam wordt gebruikt ter identificatie. Door een naam in te stellen kunnen hulpmiddelen zoals stembediening gerichter acties uitvoeren.

Stel een rol in. Bij de rol “knop” is het duidelijk dat er een actie plaatsvindt bij het activeren. Bij de rol “link” is het duidelijk dat je naar een andere locatie wordt verwezen. Door een rol in te stellen is het voor gebruikers van hulpmiddelen duidelijk wat ze kunnen doen.

Stel een waarde in. Bij een selectievakje is de waarde “geselecteerd” of “niet geselecteerd”. Bij een volumeregelaar kan de waarde “50%” zijn. Door een waarde in te stellen kan dit ook tekstueel aan hulpmiddelen worden doorgegeven.

Impact

Mensen die gebruik maken van hulptechnologie zijn afhankelijk van een correcte naam, rol en waarde. Als een afbeelding die gebruikt wordt als knop niet de rol knop heeft zal de schermlezer dit verkeer voorlezen waardoor het onduidelijk is dat deze knop gebruikt kan worden.

Controleren

Wordt de juiste naam, rol en waarde gegeven?

Dit kan getest worden met de schermlezer.

Oplossing

Naam

Op Android wordt het contentDescription attribuut gebruikt voor de naam van het element.

element.contentDescription = "Name"

Op iOS wordt het accessibilityLabel attribuut gebruikt voor de naam van het element.

element.accessibilityLabel = "Name"

Rol

Op Android kun je handmatig een rol instellen via de setRoleDescription methode van AccessibilityNodeInfoCompat. Maar vaak is het beter om de setClassName methode te gebruiken om de rol van een bestaand element over te nemen. Stel bijvoorbeeld Button::class.java.name in als een element zich moet gedragen als een knop.

ViewCompat.setAccessibilityDelegate(
    element,
    object : AccessibilityDelegateCompat() {
        override fun onInitializeAccessibilityNodeInfo(
            host: View,
            info: AccessibilityNodeInfoCompat
        ) {
            super.onInitializeAccessibilityNodeInfo(host, info)
            info.roleDescription = "Role"
            info.className = Button::class.java.name
        }
    }
)

Op iOS wordt het accessibilityTraits attribuut gebruikt om de rol te bepalen. Je kunt bijvoorbeeld de rol “knop” instellen met de button trait. Of stel de rol “link” in via de link trait. Alle mogelijk waardes kun je bij UIAccessibilityTraits bekijken.

element.accessibilityTraits = .button
element.accessibilityTraits = .link

Waarde

Op Android is er beperkte ondersteuning om handmatig een waarde in te stellen. Binnen het AccessibilityNodeInfoCompat object zijn een aantal methodes beschikbaar, zoals de setChecked methode. Helaas zit de juiste methode er vaak niet tussen. Neem de waarde dan op in de contentDescription.

ViewCompat.setAccessibilityDelegate(
    element,
    object : AccessibilityDelegateCompat() {
        override fun onInitializeAccessibilityNodeInfo(
            host: View,
            info: AccessibilityNodeInfoCompat
        ) {
            super.onInitializeAccessibilityNodeInfo(host, info)
            info.isChecked = true
        }
    }
)

element.contentDescription = "Name. Value."

Op iOS kun je de waarde instellen via het accessibilityValue attribuut. Meestal klopt de accessibilityValue al als je het juiste element gebruikt. Een UISwitch stelt de waarde “geselecteerd” of “niet geselecteerd” automatisch in. Een UISlider stelt bijvoorbeeld de accessibilityValue in op de huidig geselecteerde waarde. Mocht de standaarde waarde niet kloppen of onduidelijk zijn, dan kun je de waarde handmatig instellen.

element.accessibilityValue = "Value"

Referenties

Meer succescriteria