Skip to content

Visually Hidden

Visually Hidden is used to give context to screen reader users.

Overview

Web Only

Screen reader users do not always have visual context or information needed to interpret what a control should be used for. Visually Hidden allows screen readers to read this aloud whilst remaining hidden for sighted users. Interactive elements without text should include visually hidden text.

React Native should instead use the accessibilityLabel property.

Usage

Content

  • Always add concise and relevant information for the user.

Accessibility

  • Always include a space at the beginning of visually hidden text.