Nested Element Name

Link to Nested Element Name copied to clipboard
Free Trial
note

This is an experimental rule, and therefore its result(s) are considered to be in beta testing. Learn more about experimental rules and how you can help improve them.

WCAG 2.0 - 1.3.2 A Impact - Critical

Learn how we're using artificial intelligence. Learn how we're using artificial intelligence for this rule!

A focusable view should have all visible text within its accessible name available for assistive technologies such as TalkBack and Voice Access.

Impact

People using TalkBack are most impacted. Developers may add paragraphs of text to a container accessibility element, but TalkBack may not read all text within the container. Hence, people using TalkBack may not be aware of all on-screen text.

Confirmation

  1. Turn on TalkBack
  2. Focus on the accessibility element containing the text
  3. One of the following will happen:
    • Inaccessible: TalkBack will not read the text.
    • Accessible: TalkBack will read all text contained within the focus box.

How to Fix

XML

Avoid setting the importantForAccessibility property on text views no. Views that people can access without assistive technology should be available for those using assistive technology.

Compose

Avoid marking Compose Text elements as invisibleToUser. Views that people can access without assistive technology should be available for those using assistive technology.

In the example below, remove invisibleToUser to ensure views are available to people using assistive technology.

Row {
    Text("Welcome to Deque")
    Text("I am a text element.", modifier = Modifier.semantics {
        //Remove the below API to make it accessible
        invisibleToUser()
    })
}

React Native

An issue found by this rule within React Native views indicates a misuse of the importantForAccessibility property. If using the property, ensure it's NOT set to no-hide-descendents.