Visually hidden text

We use visually hidden text to provide extra assistance for screen reader users

Use this option sparingly

To be inclusive, in most situations, you should aim to show all users the same information regardless of the device that they are using.

This ensures that users will get the same experience whether or not they are using a screen, screen reader, other assistive technology, or combinations of these.

More often than not; if the text would be helpful for a screen reader user it would also be helpful for a sighted user as well.

Always add to the end of visible text

Placing the hidden text after the visible text ensures that the visible label of a control is included in its accessible name. This helps users who use speech input to be confident that their input will be recognised

A button contains visible text and hidden text that clarifies what happens when the button is clicked. Both together make up the buttons accessible name.

<ba-button>Close <span class="ba-u-visually-hidden-text"> the box</span></ba-button>

Use to clarify ambiguous link text

Users do not need to read the surrounding text of the link to determine what will happen when it is clicked.

A card contains information about a sale on flights to Amsterdam. The link in the card contains hidden text about the next page that helps a screen reader user understand the purpose of the link without reading the entire card

<ba-card>
  <ba-content>
    <h3>Amsterdam Sale</h3>
    <p>Some information about the desitination...</p>
    <a href="amsterdam-sale.html">Find out more <span class="ba-u-visually-hidden-text"> - Amsterdam sale</span></a>
  </ba-content>
</ba-card>