Success Criterion 4.1.2 - Level A
Name, Role, Value
Ensure a correct name, role and value is set for all interactive elements.
The name helps users to identify elements. The screen reader speaks the name and voice control uses the name for actions.
The role lets users know what to expect. The role "button" indicates which action takes place upon activation.
The value informs the user. This includes the state (disabled), properties (selected) and values (50%).
For example, give a tab the name "Home", the role "tab", the property "selected" and the value "1 of 4".
Impact
People who use assistive technologies depend on a correct name, role and value.
If a button has no name then it is not clear what action will take place.
If a button does not have the role button, then a user will not know that it can be clicked.
If the value of a switch is not indicated to assistive technologies, a user will not know whether it is on or off.
Check
“Are the name, role and value set correctly?“
This can be tested with the screen reader.
Solution
Set accessibility name
On Android, the contentDescription property is used as accessibility name.
Set accessibility role
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 a role using the setRoleDescription method. However, we recommend using the setClassName method over setRoleDescription to support multilingual roles. For example, set Button::class.java.name if an element behaves like a button. The role will be set to Button in English, and to its respective translation in other languages.
You can indicate a heading by using the setHeading method. ViewCompat also contains a convenience method: setAccessibilityHeading.
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)Set accessibility value
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)"Set accessibility state
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
}
}
)