CODEWITHSUNDEEP
accessibilitywai-ariascreen-readers
user3745539
user3745539

Reputation: 7

How to make screen reader read different content from the content within the span

If I have the following span in the html,

<span>10:45</span>

Is there a way to let screen reader reads "Document value at 10:45"? At first I thought I could use aria-label="Document value at 10:45" but it does not seem to work. Also, I feel like aria-label is not supposed to be used in this way. Dose anyone know if there is any other aria related attribute that can achieve this?

Upvotes: 1

Views: 849

Answers (1)

Adam
Adam

Reputation: 18875

The aria-label is only useful for interactive elements

Currently you have to use something like :

 <span class="sr-only">Document value at 10:45</span>
 <span aria-hidden="true">10:45</span>

Or the following

 <span class="sr-only">Document value at </span>10:45

With sr-only being a css class you have to design to be visible only by screenreaders (like the one in bootstrap).

Upvotes: 1

Related Questions