Accessibility: aria-label not being read on hover

Question

Hovering over either an <a> or <span> with an aria-label="someText" and a role="button" does not read the label back. Here is my current example. I should note that these elements a purposely empty because they have a CSS generated shape/image.

[role="button"] {
  display: block;
  width: 4rem;
  height: 1rem;
  margin: .5rem 0;
  background-color: grey;
  cursor: pointer;
}

[role="button"]:hover {
  background-color: lightgrey
}

<a href="javascript:void(0)" aria-label="Return to Top" tabindex="0" role="button"></a>

<div>
 <span id="acc-prev-page" aria-label="Previous Page Button"></span>
 <span tabindex="0" aria-labelledby="acc-prev-page" role="button"></span>
</div>

The only way was able to get the hover to work was changing their roles to role="img". This does work but now it reads as either "graphic" (desktop/chrome/NVDA) or "image" (mobile/safari/VoiceOver). It would be desired to read as a button but I am yet to find a way to do so. Any advice is appreciated.

UPDATE 1/11/22: It isn't pretty but another possible solution is using another element with role=tooltip (ARIA: tooltip role) that overlaps the <span> or <a> and the opacity is 0. Screen reader will then read the element.

Answer 1

A curious issue. The markup is correct, this is a known bug in NVDA.

I could reproduce the issue with both Firefox and Chrome, while both of those browser correctly expose the button as such in their accessibility properties.

Windows Narrator does announce the button as such on hover.

Use text contents as a workaround

Another approach is to actually provide text contents but hide them visually via CSS. Best practice is a visually-hidden class, which s also used by Bootstrap.

This will work around the issue in NVDA.

[role="button"] {
  display: block;
  width: 4rem;
  height: 1rem;
  margin: .5rem 0;
  background-color: grey;
  cursor: pointer;
}

[role="button"]:hover {
  background-color: lightgrey
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

<a href="javascript:void(0)" role="button"><span class="visually-hidden">Return to top</span></a>

<div>
  <span tabindex="0" role="button"><span class="visually-hidden">Previous page</span></span>
</div>