6

I have a simple text that gets updated on an action and I want that to be announced by the screen reader. But I don't want that text to be visible on the web page. I tried display: none and visibility: hidden, but seems like they are not accessible by the screen reader softwares. I found a way to make this work - that is by absolute positioning the element all the way with negative 999999 value which will make it off screen and hidden from the webpage. I am not really a fan of this solution. Is there a more elegant way to achieve this?

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}

4 Answers 4

10

A better solution to the bootstrap "sr-only" class.

There are numerous problems with the Bootstrap "sr-only" class.

  1. First of all you will see from this discussion that a negative margin can cause issues on VoiceOver.

  2. Secondly you must account for words wrapping one per line as screen readers do not read line breaks

  3. Finally clip has been deprecated.

To fix point 1 simply don't add a negative margin.

To fix point 2 add white-space: no-wrap to ensure words do not end up 'one per line' and cause words to get smushed together.

To fix point 3 we add clip-path: inset(50%) as this clips to a 0px square, we keep clip as at the moment this has great coverage, clip-path is used to future-proof your solution.

Please find below a much more robust class, as of yet I have not found a screen reader / browser combo that does not work as expected with this.

I have this class on a few different forums being tested, so far so good but if someone can find a problem with it please let me know as I will be submitting it everywhere.

.visually-hidden { 
    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 */
}
<p>visible text <span class="visually-hidden">hidden text</span></p>

6
  • 2
    There are many variations of this class across the web, and information is scattered (this pull request, that Medium blog post, etc.). It is not easy to find why some alterations were made, nor to know what you should use ultimately. This answer does a good job explaining some common alterations (at least an explanation for the white-space: nowrap hack). Do you think this code and explanation could make it to the reference page from WebAIM?
    – Maëlan
    May 8, 2021 at 11:56
  • Since you care to remove the border that may have been added by some other rule, maybe you should also remove outline and shadow? outline: none; box-shadow: none;
    – Maëlan
    May 8, 2021 at 12:05
  • Why are we using rect(1px, 1px, 1px, 1px) instead of the simpler rect(0, 0, 0, 0)? Is it because some screen reader try to be smart and have special treatment for the latter?
    – Maëlan
    May 8, 2021 at 12:50
  • 1
    Not a bad suggestion on box-shadow, I will have to test that (now the fun part of finding an old IE browser instance again!). The exact answer I can't remember, but it was to do with scroll bars or focus indicators and the way a single pixel was rendered. So if we have 0,0,0,0 it is top left and you can see it, something to do with the rendering engine meant things rendered from the top left, 1,1,1,1 is off to the bottom right, so you don't see it as if it did try to render something it starts at 1,1 - maybe someone can give a more accurate / detailed explanation as it has been a while! May 8, 2021 at 13:02
  • I think you made a good point about detailing why each step is there, like you said some of the steps are explained in one article, some in another. I might have a crack at answering those couple of questions for you and turn it into a full article to try and settle this once and for all (the typical issue with anything accessibility related - the information is there but in 25 different places!). Not sure whether WebAIM would rewrite / edit their article, not familiar with how they write / create content! May 8, 2021 at 13:04
2

I did encounter this problem in the past. Bootstrap has this sweet class sr-only that actually hides the content on the webpage but is accessible by the screen readers. You can check this link

Moreover, if you are not using bootstrap, you can simply implement the class yourself in your code.

.aria-invisible {
      border: 0; 
      clip: rect(0 0 0 0); 
      height: 1px;  
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
<span class="aria-invisible">5 selections have been made. </span>

I hope this helps.

1
  • Awesome. Thank you so much for your quick response. I have been trying to find this solution for a while now. It just works :)
    – Donut
    May 30, 2020 at 18:47
1

Using aria-label attributes is the way to do (example below)

Is there a more elegant way to achieve this?

Do not hide the element. Yes. I am not answering your question, but I am addressing the problem.

Screenreaders are only a subpart of assistive technologies used by a small part of people targeted by accessibility guidelines.

Imagine using a screen magnifier for instance where you do not have a global view on the full screen. Imagine having some cognitive disabilities which makes difficult for you to count or remember elements.

If you do consider that an information is important for blind people, then it's surely is for them AND for other people.

Now, instead of it being a long text, it can be a small counter with appropriate aria labelling:

<div role="status" aria-live="polite" aria-label="5 selections have been made.">
  5 selections
</div>
9
  • 1
    I am almost certain an area marked as aria-live will only read the contents and ignore any aria-label updates (I have it my company guidance not to use them together, however I didn't link to a fiddle so I cannot remember why, but I only write stuff like that if there is a reason!). You would probably still have to use visually hidden text here. I do agree with the sentiment that the information is useful to everyone and should probably be available visually as well though! May 31, 2020 at 8:56
  • perhaps tweak the example to have 5 selections <span class="visually-hidden"> have been made</span> and remove the aria-label, will +1 then as this is good guidance. May 31, 2020 at 8:59
  • @GrahamRitchie aria-live is a generic attribute without any implied default ARIA role semantic. So you have to explicitely set a role which supports "name from: author" like the "status" role which also does not support "name from: contents", implying that aria-label is here mandatory.
    – Adam
    May 31, 2020 at 20:54
  • (and that any content inside should be ignored)
    – Adam
    May 31, 2020 at 20:59
  • if you add an aria-label though you might be right the contents is ignored, but the update on that label will also be ignored, rendering your aria-live region pointless. I have tried to find the official docs on this and failed but I have found this answer on SO that mentions the behaviour stackoverflow.com/a/52432767/2702894. You could use the aria-label on a paragraph within the aria-live region but using as an attribute on the region itself will mean it is not announced. role="status" automatically sets aria-live="polite" so it does indeed read contents. Jun 1, 2020 at 7:29
0

I had the same problem with the text being out of position with the visually hidden class mentioned above. Some small changes to the class fixed this issue for me

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.