CODEWITHSUNDEEP
htmlaccessibilitywai-arianvda
Hemant Malpote
Hemant Malpote

Reputation: 891

Aria-label is not working in Chrome and Firefox with NVDA

I have a simple textbox:

<input type="text" aria-label="First Name" title="First Name" />

I am showing the tooltip First Name on hover of textbox.

I used the aria-label as well as aria-labelledby but neither are working with Chrome or Firefox.

It's working on selection of the textbox, but not working on mouse hover.

But it's working fine with IE on mouse hover as well as on textbox select.

I am using the screen reader NVDA.

Upvotes: 4

Views: 8664

Answers (3)

GrahamTheDev
GrahamTheDev

Reputation: 24935

Just to avoid confusion the correct method for labelling an input is to simply use a <label>.

So you should have

<label for="firstName">First Name</label>
<input id="firstName" name="firstName" type="text"/>

The way to link labels and inputs is using the for attribute and point that at the input's ID.

The added benefit of this is that if you click on the label it will focus the corresponding input, which other solutions will not.

Should you for some reason require an input without a label then the following example illustrates how to do this correctly. (please do not do this if you can avoid it, labels are important for people with anxiety disorders to be able to check that they have filled in the correct field - however I know that sometimes 'designers' just won't budge and you have to workaround them....)

In this example we 'visually hide' the label using CSS and add placeholder text to the element. Just to reiterate this is a last resort for those designers who will not listen about accessibility and you should use visible labels.

At least doing it this way the input will function correctly for screen reader users.

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
<label for="firstName" class="visually-hidden">First Name</label>
<input id="firstName" name="firstName" placeholder="First Name" type="text"/>

Edit

Finally got chance to test this, works in Firefox, Internet Explorer and not in Chrome for announce on hover.

However if the label is visible it does work fine (if you hover the label, it does not announce if you hover the input itself even with a visible label), it also works fine for if you focus the input.

Final thoughts - show the labels (third time I said this in one answer. hehe), problem solved, no need to make it complicated.

Also, I am not sure why you think this is important, if someone uses a screen reader to assist while using a mouse they will click on an input, I have never come across anyone who would find not having a form field read on hover an accessibility issue if it works correctly once you click into the field.

Also the only people possibly affected by this are:-

  • screen reader users,
  • who use the mouse,
  • who have a sight impediment,
  • who use Google Chrome,
  • who also use NVDA,
  • and do not use a screen magnifier.

pretty specific, so not likely an issue.

Upvotes: 1

Adam
Adam

Reputation: 18855

Its working on selection of textbox, but not working on mouse hover.

It's not intended to work on mouse hover.

NVDA reads the label for input elements on mouse hover, not the accessible name.

If you want something to be read, you have to add a label.

Upvotes: 1

Stefany Newman
Stefany Newman

Reputation: 524

I tested with NVDA on Firefox and Chrome and I can confirm the screen reader doesn't announce the value of aria-label on the input

I looked at 2.10 Practical Support: aria-label, aria-labelledby and aria-describedby and found out that aria-label isn't supported for input elements, but aria-labelledby and aria-describedby are. Taken from the link above:

aria-labelledby and aria-describedby are robustly supported for interactive content elements such as links and form controls including the many input types.

So I changed the code this snippet works with NVDA on Chrome and Firefox.

<input type="text"  aria-labelledby="label" />
<span id="label">First Name</span>

Make sure to enclose the input and the "label" inside form for it to work optimally.

Upvotes: -1

Related Questions