Ga naar hoofdinhoud
Logo Appt Light

Succescriterium 4.1.2 - Niveau A

Naam, rol, waarde

Zorg dat een juiste naam, rol en waarde is ingesteld voor alle interactieve elementen.

De naam helpt gebruikers om elementen te identificeren. De schermlezer spreekt de naam uit en met stembediening kun je acties uitvoeren.

De rol laat gebruikers weten wat ze kunnen verwachten. De rol "knop" geeft aan welke actie plaatsvindt bij activatie.

De waarde informeert de gebruiker. Dit omvat de status (uitgeschakeld), eigenschappen (geselecteerd) en waarden (50%).

Geef een tabblad bijvoorbeeld de naam "Home", de rol "tabblad", de eigenschap "geselecteerd" en de waarde "1 van 4".

Impact

  • Mensen die gebruik maken van hulpmiddelen zijn afhankelijk van een correcte naam, rol en waarde.

  • Als een knop geen naam heeft dan is het niet duidelijk welke actie er plaatsvindt.

  • Als een knop niet de rol knop heeft, dan weet een gebruiker niet dat er op geklikt kan worden.

  • Als de waarde van een schakelaar niet doorgegeven wordt, dan weet een gebruiker niet of deze aan of uit staat.

Controleren

Zijn de naam, rol en waarde correct ingesteld?

Dit kan getest worden met de schermlezer.

Oplossing

Accessibility naam instellen

On Android, the contentDescription property is used as accessibility name.

element.contentDescription = "Appt"
Bijdragen

Accessibility rol instellen

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)

            // Custom
            info.roleDescription = "Custom role"

            // Button
            info.className = Button::class.java.name

            // Heading
            info.isHeading = true

            // Image
            info.className = ImageView::class.java.name
        }
    }
)

// Convenience method
ViewCompat.setAccessibilityHeading(view, true)
Bijdragen

Accessibility waarde instellen

Android has limited support to provide a dedicated accessibility value for assistive technologies. The AccessibilityNodeInfoCompat object contains a couple of methods, such as the setChecked method.

Unfortunately the desired value is often not available. If your desired value is not included, you can append it to the contentDescription attribute.

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

element.contentDescription = "Name (Value)"
Bijdragen

Accessibility status instellen

On Android, you can use the setAccessibilityDelegate method of ViewCompat to get a reference to AccessibilityNodeInfoCompat. This object contains many useful accessibility related methods.

You can set an accessibility state by using the setStateDescription method. A convenience method is available in ViewCompat, which is also named setStateDescription.

You can also use the setChecked method to indicate a checked state and the setSelected method to indicate a selected state.

ViewCompat.setStateDescription(view, "Expanded")

ViewCompat.setAccessibilityDelegate(
    view,
    object : AccessibilityDelegateCompat() {
        override fun onInitializeAccessibilityNodeInfo(
            host: View,
            info: AccessibilityNodeInfoCompat
        ) {
            super.onInitializeAccessibilityNodeInfo(host, info)

            // Custom state
            info.stateDescription = "Expanded"

            // Checked
            info.isChecked = true

            // Selected
            info.isSelected = true
        }
    }
)
Bijdragen

Bronnen

Feedback?

Laat 't ons weten!