CODEWITHSUNDEEP
htmlcsshoveraccessibilityscreen-readers
M.E.Amrani
M.E.Amrani

Reputation: 83

In HTML, how can I hide text that is only accessible for screen readers on hover?

I'm improving accessibility for a website. There are edit and delete buttons with an icon in them. We used this trick to make them readable by screen readers, but it only works when tabbing:

.screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

html:

<button class="btn-link">
   <span class="screenreader">edit e-mail</span>
   <span class="icon icon-md icon-create"></span>
</button>

But I want visually impaired users, who use a mouse, to be read to when hovering over the buttons. I cannot get it to work however. Hope someone can help me out!

Upvotes: 1

Views: 1939

Answers (2)

slugolicious
slugolicious

Reputation: 17563

First off, kudos for trying a combination that is rarely tested by accessibility professionals. Using mouse tracking with a screen reader is certainly a combination that some users require but it's not often tested.

I think you found this NVDA bug - https://github.com/nvaccess/nvda/issues/12047

Your original code and @graham's code both work with JAWS on Firefox, Chrome, and Edge. I hear "edit e-mail" when I hover the mouse over the button. You have to enable mouse echo in JAWS to hear the text under the mouse hover because mouse echo is not on by default.

jaws settings center mouse echo

However, with NVDA, it only works on Firefox. Both Chrome and Edge don't read the "edit e-mail" text with mouse hover. (Edge is based on the chromium engine so it makes sense that if Chrome doesn't work, Edge won't work either. The NVDA bug mentioned at the top also says it doesn't work in Edge).

By default, NVDA has mouse tracking on. You can toggle it with Ins+M or go into Settings and toggle the "Enable mouse tracking" checkbox.

nvda mouse setting

The accessibility properties of the "edit e-mail" button are correct on Chrome.

chrome accessibility properties for the edit e-mail button

Notice the "Name" (which is the accessible name) is "edit e-mail" and comes from "Contents". The accessible name should be read when the element receives focus. As you noted originally, it works fine with TAB but not with mouse hover.

So if the accessibility properties look correct in Chrome and JAWS works correctly with Chrome by announcing "edit e-mail" when you hover with the mouse, why doesn't NVDA read the text? NVDA certainly has access to the accessible name. NVDA reads the accessible name just fine in Firefox. So why does NVDA work on Firefox but not Chrome? I'm not sure (sorry). Potentially Chrome is not surfacing some information that NVDA needs, although JAWS works perfectly fine without this other information, which is why I think this is an NVDA bug.

So now you have to decide if you want to code around the NVDA bug. Sometimes that can lead to very messy code that potentially causes other problems. My recommendation is to use the code you currently have, since it's coded properly, and update the aforementioned NVDA bug.

Upvotes: 0

GrahamTheDev
GrahamTheDev

Reputation: 24935

There is only one subtle change you should need to make for this to work.

If you hide the icon with aria-hidden then the screen reader will fall back to the visually hidden text that you have provided (as at the moment it is probably attempting to decipher the icon).

The example below works in JAWS and NVDA after a quick test.

.screenreader { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<button class="btn-link">
   <span class="screenreader">edit e-mail</span>
   <span class="icon icon-md icon-create" aria-hidden="true">ICON</span>
</button>

As an aside I used a slightly different screen reader only class that is more robust for edge cases and future proofed, if you are able to then I would suggest replacing it with the visually hidden class detailed in this answer I gave.

Upvotes: 3

Related Questions