Switch element accessibility label

The Switch element accessibility label ensures that switch controls in an app have both their name and value available to screen readers. This ensures that switch controls are fully accessible, allowing their label and state (on/off) to be accurately communicated to users who rely on screen readers. Proper labeling of switch elements helps in providing an inclusive experience for all users, including those with visual impairments.

App accessibility can automatically check for violations related to switch element labels. It analyzes the app’s interface to ensure that each switch control has a proper name and value that can be read by screen readers, highlighting any areas that need improvement.

Success criteria

The rule checks for the following potential violations:

• Missing name
  The switch control does not have a descriptive name that can be read by a screen reader.
• Missing value
  State information should be provided in accessibility labels. Including values directly can cause confusion.
• Incorrect labeling
  The switch control is not associated correctly with its label, making it difficult for screen readers to convey the correct information to users.

How to Fix?

To ensure switch elements are accessible, follow these steps:

• Provide descriptive labels
  Ensure that each switch control has a descriptive label using the contentDescription property for Android or the accessibilityLabel property for iOS. This helps screen readers to convey the purpose of the switch to users.
• Convey the state
  Modern screen readers automatically detect the state (on/off) of the switch. Therefore, developers do not need to explicitly include the state in the hint property for Android or the accessibilityLabel for iOS. Including the state in the accessibilityLabel is redundant and may confuse users.
• Associate with label
  Use properties like labelFor in Android or ensure the control is correctly associated with its label in iOS. Proper association ensures that screen readers can link the switch control with its descriptive text.

Example

The following example scan report highlights that the switch element is missing proper descriptive content. This label does not describe the function of the switch, and the element is not correctly associated with a descriptive text label, so screen readers cannot accurately convey its purpose to users.

Fix

• Provide a meaningful label
  Change the label to something more descriptive, such as Enable notifications. This can be done by setting the contentDescription property for Android or the accessibilityLabel property for iOS. This ensures that screen readers can accurately convey the switch’s purpose to users.

References

• Learn more about Resize Text WCAG: 2.1 - 1.3.1 (Level A) guideline
• Learn more about Resize Text WCAG: 2.2 - 1.3.1 (Level A) guideline