Skip to main content
Logo Appt Light

Success Criterion 1.3.1 - Level A

Info and Relationships

Make sure that the information and relationships on the screen are not only 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 usable with 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.

ViewCompat.setAccessibilityPaneTitle(view, "Appt pane")

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>

Resources

Feedback?

Let us know!