Accessible elements

Accessible elements guidelines ensure that your mobile application does not rely solely on sensory cues, such as shape, size, visual location, orientation, or sound to convey information or instructions. This guideline is crucial for making your app accessible to all users, including those with disabilities that affect their sensory perceptions.

Different aspects of Accessible elements

The Accessible elements guideline involves the following key aspects:

• Interactive elements in the accessibility tree: All interactive elements that are visible on the screen and can be interacted with via touch should also be accessible through assistive technologies like screen readers and voice control.
• Clear text labels for interactive elements: Provide descriptive text labels for all interactive elements. Avoid relying solely on color, shape, or sound to convey information or functionality.
• Descriptive text for non-text content: For images, provide descriptive alt text. For videos, include captions or transcripts to ensure all users can access the content.

Currently, App Accessibility focuses on supporting the interactive elements in the accessibility tree aspect. This ensures that all interactive elements are part of the accessibility tree. This is a foundational step toward meeting both SC 1.3.3 and SC 4.1.2.

This rule is important for the following reasons:

• Visual impairments: Users with visual impairments, including blindness and low vision may not perceive colors, shapes, sizes, or spatial orientations. If your app relies solely on these visual cues (e.g., “Press the green button on the right”), these users may struggle to navigate or interact with your app.

• Hearing impairments: Users who are deaf or hard of hearing may miss auditory cues or instructions. Relying exclusively on sounds (e.g., a beep indicating an error) can prevent these users from receiving essential information.

• Cognitive impairments: Users with cognitive disabilities may find it challenging to understand information presented only through complex visuals or sounds without accompanying textual explanations.

By ensuring that information and instructions are presented in ways that do not depend solely on Accessible elements, you enhance usability for a broader audience and comply with accessibility standards.

Success criteria

The rule checks if isImportantForAccessibility (Android) or isWDAccessibile (iOS) is set as true for controls or views that should be accessible.

This makes interactive elements perceivable and operable for users who rely on assistive technologies like screen readers.

Different aspects of Accessible elements

The Accessible elements guideline involves the following key aspects:

• Interactive elements in the accessibility tree: All interactive elements that are visible on the screen and can be interacted with via touch should also be accessible through screen readers and voice control.
• Clear text labels for interactive elements: Provide descriptive text labels for all interactive elements. Avoid relying solely on color, shape, or sound to convey information or functionality.
• Descriptive text for non-text content: For images, provide descriptive alt text. For videos, include captions or transcripts to ensure all users can access the content.

Currently, App Accessibility focuses on supporting the interactive elements in the accessibility tree aspect. This ensures that all interactive elements are part of the accessibility tree. This is a foundational step toward meeting both SC 1.3.3 and SC 4.1.2.

How to fix

To address issues related to Accessible elements, ensure that all interactive elements are properly integrated into the accessibility tree. Here’s how you can do this across different platforms:

• Ensure accessibility properties are set correctly: Make sure that interactive elements are not excluded from the accessibility tree by default properties or custom implementations.
• Avoid sensory-dependent instructions: Refrain from using instructions that rely solely on sensory characteristics (e.g., “Tap the square icon to proceed”). Instead, use text labels (e.g., “Tap the ‘Next’ button”).

Example

The following example scan report shows accessible interactive elements violation in the app’s interface.

Fix

Reference

• Learn more about Sensory Characteristics WCAG: 2.2 - 1.3.3 (Level A) guideline
• Learn more about Sensory Characteristics WCAG: 2.2 - 4.1.2 (Level A) guideline
• Learn more about Sensory Characteristics WCAG: 2.1 - 1.3.3 (Level A) guideline
• Learn more about Sensory Characteristics WCAG: 2.1 - 4.1.2 (Level A) guideline