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?

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.