NVDA reader doesn't read icon on mouse hover

[Thomas5588]

<button role="button" class="edit"  aria-label="Edit Employee">
      <i class="fas fa-edit" aria-hidden="true" title="Edit"></i>
</button>

Actual behavior:

No response from NVDA reader on mouse hover over the icon

Expected behavior:

Should read aria-label or title(i tag)

System configuration

NVDA : 2020.3

[Thomas5588]

@josephsl - could you please clarify the above issue, why NVDA does not read icon aria-label on mouse hover?

[feerrenrut]

@Thomas5588 could you please elaborate on this issue, please answer the following:

• Does the title get read when navigating with a keyboard?
• Have you confirmed this is exposed by the browser as you expect, check the accessibility tools in Chrome, Firefox, or Edge to confirm?

[feerrenrut]

Since this snippet relies on font-awesome, I have created the following sample: https://codepen.io/reefturner/pen/PobGWrv

Mouse tracking does not seem to read the accName for the button, however NVDA reads this correctly in browse mode with the keyboard.

I tested this with Edge Version 88.0.705.63 (Official build) (64-bit)

[Thomas5588]

Thanks for reply @feerrenrut

Does the title get read when navigating with a keyboard? - NVDA read button aria-label when navigation with keyboard. Have you confirmed this is exposed by the browser as you expect, check the accessibility tools in Chrome, Firefox, or Edge to confirm? - Could you please let me know which settings need to be check?

When I navigation with keyboard the NVDA read button's aria-label, but when I mouse hover on the button the NVDA did not read the button aria-label.

[zersiax]

Aria-label pretty much overrides whatever other label is on the button, so that bit makes sense. That the icon is not being read is probably because you set aria-hidden=true on it, although I don't have time to test, currently.

[wwwXpert]

I originally tested and reproduced the issue just with the icons themselves (no tags wrapped around them) Here's a test page with just the icons without aria-hidden="true" that can be used to test and reproduce the issue. The screen reader fails to read the aria-label and title attributes that are present. https://davidnguyen.us/wcag2.1-aa-v2/ <i class="bi-alarm fs-3 text-dark" aria-label="Bootstrap Alarm Clock" title="Bootstrap Alarm Clock"></i>

[jcsteh]

This was originally reported in #5600. It's worse here though because there's no content at all, so nothing gets read. In contrast, if you do something like this: data:text/html,<button aria-label="label">content</button> you'll at least hear "content".

Contrary to the justification for closing #5600, I'd argue that the accName should be read in this case. For buttons, accName should override the content just like it does in browse mode.

In terms of implementation, NVDA would need to look to see if there is an ancestor with a particular role and an explicit author-supplied name (IA2 explicit-name:true attribute).

[tmiaa]

@Thomas5588

This should not be expected to work:

aria-hidden="true" title="Edit"

because well, the element is aria-hidden="true".

And side note: you don't have to use role="button" on <button>, that's the implicit role.

---

I have this case:

<button aria-label="Zoom in">
  <span aria-hidden="true">+</span>
</button>

With or without aria-hidden="true" NVDA never announces zoom in from aria-label on hover.

[StefanRetief]

I have this case:

<button aria-label="Zoom in">
  <span aria-hidden="true">+</span>
</button>

With or without aria-hidden="true" NVDA never announces zoom in from aria-label on hover.

@tmiaa I'm running into the same issue. Though, I have found that cases where if there is a ::before psuedo element, the label will be read by NVDA:

<button aria-label="Zoom in">
  ::before
  <span aria-hidden="true">+</span>
</button>

[andypillip]

I could reproduce the issue with NVDA 2022.4 in Firefox and Chrome latest.

Whether the button has any text contents does not matter, the accName will not get announced if calculated from either aria-label or aria-labelledby.

I couldn’t get the ::before pseudo-element workaround to work.

Windows Narrator correctly announces the name on hover.

For more details see: https://stackoverflow.com/questions/75064724/accessibility-aria-label-not-being-read-on-hover/75107868#75107868

[nolimitdev]

By my testing NVDA absolutely does not read title and arial-label attributes on hover. Solution is to use "invisible" text which works for tags A and BUTTON...

<style>
button { padding: 0; border: none; }
.blue { background: blue; display: block; width: 32px; height: 32px; cursor: pointer; }
.orange { background: orange; display: block; width: 32px; height: 32px; cursor: pointer; }
.hidden { font-size: 1000%; color: transparent; display: block; height: 100%; width: 100%; overflow: hidden; }
</style>

<a href="" class="blue" onclick="return false;"><span class="hidden">BLUE</span></a>

<button class="orange"><span class="hidden">ORANGE</span></button>