CODEWITHSUNDEEP
htmlwai-ariascreen-readers
Jozef
Jozef

Reputation: 75

Screenreader should read both aria-label and original content

I need screen-readers to first read the text in the aria label and then also the element's content. So in this example:

<p aria-label='Participant'>Martin Clark</p>

I'd need it to read "Participant Martin Clark". Unfortunately screen-readers read only the text in the aria-label when one is present. I mustn't put the name in an aria label. Any idea please?

Upvotes: 0

Views: 895

Answers (1)

Laurel
Laurel

Reputation: 6173

This is not a proper use of aria labels:

The aria-label attribute is intended for interactive elements only. When placed on non-interactive elements, such as those listed above [including paragraph], it may not be read or may confuse your users as a non-interactive element that acts like an interactive one. — MDN Web docs

But why is "participant" hidden in the first place? How do visual users learn that someone is a participant?

If the information is important enough to add for AT users, consider making it visible for all users. — ibid

If you still want it to be only visible to screen reader users, use another element that's visually hidden:

<p><span class="visually-hidden">Participant</span>
  Martin Clark</p>

Many CSS libraries provide a class for that. Here's the code for Bootstrap 5's visually-hidden to give you an idea what to do if you're rolling your own CSS:

@mixin visually-hidden() {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Scott O'Hara wrote a great article explaining all the details that go into that code to hide elements visually but make sure that AT can access it: Inclusively Hidden

Upvotes: 3

Related Questions