Reputation: 75
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: 889
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