CODEWITHSUNDEEP
htmlaccessibilityformsscreen-readers
webspicer
webspicer

Reputation: 1

How can I add accessibility content to HTML 'label' element?

I just want to add some more additional content inside label for accessibility purpose. I have include content inside span with visually hidden class. But, the screen reader (NVDA) doesn't recognise additional content.

<label for="nameInput"> 
  Name: <span class="sr-only">your name </span> 
</label>
<input id="nameInput" class="components-input" />

I can't replace <label> to any other like <p aria-label> or some other tag.

How can I achieve this?

Upvotes: 0

Views: 510

Answers (2)

slugolicious
slugolicious

Reputation: 17563

aria-label does work with non-semantic elements such as <div> and <span> but you must give the element a role. You need both a label and a role for the screen reader to read it.

I ran your code sample verbatim and it worked fine with firefox 61 (quantum) and nvda 20182.1. It also worked with JAWS 2018 and ie 11.

It sounds like you might have something else wrong. Do you have a working example (codepen or production site) to try? Did you try your code with another screen reader or another browser?

Upvotes: 2

Quentin
Quentin

Reputation: 944530

The aria-label attribute applies to all elements. You don't need to use a paragraph.

Upvotes: 0

Related Questions