How to hide a text and make it accessible by screen reader?

by

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>

More Related Contents:

  1. Browser is not displaying images
  2. How can I select an element with multiple classes in jQuery?
  3. Why is there an unexplainable gap between these inline-block div elements? [duplicate]
  4. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  5. height: 100% or min-height: 100% for html and body elements?
  6. Render a string in HTML and preserve spaces and linebreaks
  7. How to make a div 100% height of the browser window
  8. How do I get a div to float to the bottom of its container?
  9. Use css gradient over background image
  10. Bootstrap 3 collapsed menu doesn’t close on click
  11. How to change text transparency in HTML/CSS?
  12. Using :before and :after CSS selector to insert HTML [duplicate]
  13. Prevent “overscrolling” of web page
  14. Styling an anchor tag to look like a submit button
  15. Hide html horizontal but not vertical scrollbar
  16. How can I put DIV in P?
  17. Different CSS for each browser?
  18. Why is there vertical scroll on the main container?
  19. CSS: image link, change on hover
  20. Scrolling to an Anchor using Transition/CSS3
  21. Can a ::before selector be used with a ?
  22. How to make a stable two column layout in HTML/CSS
  23. CSS grid wrapping
  24. Selecting the last element among various nested containers
  25. Why is translateY(-50%) needed to center an element which is at top: 50%?
  26. Transparent scrollbar with css
  27. Make A List Item Clickable (HTML/CSS)
  28. Element with “display: inline-flex” has a strange top margin
  29. How to center and crop an image to always appear in square shape with CSS?
  30. Table vertical header?

Leave a Comment