1

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!

M.E.Amrani
  • 53
  • 5
  • 1
    Why don't you make it appear for everyone, regardless of if using a screen reader ? You could show a tooltip with set aria-live attribute so that the content is announced when it is shown. – QuentinC Nov 18 '21 at 12:04

2 Answers2

3

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.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • Somehow it still doesn't work. It only works when using TAB, not when hovering. – M.E.Amrani Nov 18 '21 at 13:38
  • Does the above example not work for you that I have created? If my example works and yours doesn't then that will help us work out why is different in your project. If my example doesn't work for you then it is likely a screen reader setting that needs changing and your example is now fine. Let me know and I will help further (let me know if my example does or doesn't work for you and your screen reader)! – GrahamTheDev Nov 18 '21 at 13:47
  • Yes, your example doesn't work unfortunately. I use NVDA in default settings. – M.E.Amrani Nov 18 '21 at 14:27
  • https://codepen.io/inhuofficial/pen/porGLQB here, the problem might be that you can't access it within a frame, this codepen should work, otherwise you might have to change the "mouse settings" in NVDA. – GrahamTheDev Nov 18 '21 at 15:07
0

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43