CODEWITHSUNDEEP
htmlvoiceovertalkback
Marcel
Marcel

Reputation: 167

how to control what voiceover reads when developing a website

I am designing a website for people with visual impairments with focus on mobile usage. For now I have some simple buttons like "play", "stop" and voice over reads what I have put between <button></button> tags. However, I want to make it as precise as possible because older people might be using it as well and include something like "press this button to play recording" but then it becomes really long and the button just looks awful. Is there a way to include this information in a button without having to display this text on a website?

<button>Play</button>

I would like to have a button like this, but so the voice over reads a hidden tag like "press this button to play recording". How can I do that?

Upvotes: 3

Views: 2525

Answers (2)

davidtingsu
davidtingsu

Reputation: 1180

If you are not intending to display the label text on the screen, you can use aria-label

<button 
  id="play-button" 
  aria-label="Press this button to play recording"
>
  Play
</button>

Upvotes: 1

jonrsharpe
jonrsharpe

Reputation: 122154

You can use aria-describedby for this:

.help-text {
  color: gray;
  font-size: 0.75rem;
}
<button 
  id="play-button" 
  aria-describedby="play-button-explanation"
>
  Play
</button>
<span 
  id="play-button-explanation" 
  class="help-text"
>
  Press this button to play recording.
</span>

When I use VoiceOver on this button, I get:

Play, button. Press this button to play recording. You are currently on a button ...

This would work even if the element wasn't being displayed, but I think it's good to have that context for people who can read it, too.

Upvotes: 2

Related Questions