Success Criterion 1.3.1 - Level A
Info and Relationships
Ensure that the information and relationships on the screen are not just conveyed visually.
Information on the screen must be conveyed to assistive technologies. For example, make sure that headings are not only bold, but also marked as headings in the code.
Relationships on the screen must be indicated to assistive technologies. Elements in a list must be navigable one by one. Elements in a table must be navigable by rows and columns.
Impact
It is important for users of assistive technology that titles of rows and columns are conveyed in tables.
Make sure paragraphs can be navigated separately by screen reader users.
Convey visual indications, such as bullet points in a list, to assistive technologies to let users know they are in a list.
Check
“Is the structure of the screen clear when using assistive technologies?”
You can use a screen reader to check the structure of the screen.
Solution
Websites often use WAI-ARIA attributes to convey information and relationships. You cannot use these attributes in apps, because apps are not written in HTML. Alternatives are available for some of these attributes, but not for all.
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)Indicate accessibility modal
On Android, there is no method to indicate an accessibility modal. However, you can can indicate an accessibility pane by using the setPaneTitle method. ViewCompat also contains a convenience method: setAccessibilityPaneTitle. Please keep in mind that is focus is not trapped when a pane title has been set.
Group elements
On Android you can group elements by using the android:focusable and android:screenReaderFocusable attributes. Sometimes you also need the android:importantForAccessibility attribute. Don't for get to set an android:contentDescription for the group.
Keep in mind that android:focusable is not only used by assistive technologies, but also by other means of interaction.
<LinearLayout
android:focusable="true"
android:screenReaderFocusable="true"
android:contentDescription="Appt group">
<TextView
android:focusable="false"
android:importantForAccessibility="no"/>
<ImageView
android:focusable="false"
android:importantForAccessibility="no"/>
</LinearLayout>