Ways to conceal text while still allowing it to be read by a screen reader

Question

Ways to conceal text while still allowing it to be read by a screen reader

I am looking for a way to have a text updated by an action without displaying it on the webpage, but still have it announced by screen readers. I tried using display: none and visibility: hidden, however, these properties seem to not be accessible by screen reader software. I discovered a method where I can position the element off-screen with a negative 999999 value to achieve this, but I find this solution less than ideal. Is there a more elegant approach to accomplishing 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;
}

html css accessibility wai-aria

Answer 1

Answer №1

An Improved Approach to Handling Accessibility with Bootstrap Classes

Addressing the limitations of the Bootstrap "sr-only" class.

It has been noted in discussions that using a negative margin can create challenges for VoiceOver users.
Additionally, consideration must be given to prevent words from wrapping one per line as it affects screen reader functionality.
Moreover, clip is now deprecated.

To address the first point, avoid using a negative margin.

To tackle the second issue, include white-space: no-wrap to prevent words from being displayed 'one per line' and potentially causing readability issues.

For the third concern, consider implementing clip-path: inset(50%) instead of relying solely on clip for improved browser support in the future.

Below is a more reliable class that has been tested across various forums with positive results. If any problems arise, please share your feedback for further improvement.

.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>

Answer 2

An Improved Approach to Handling Accessibility with Bootstrap Classes

Addressing the limitations of the Bootstrap "sr-only" class.

It has been noted in discussions that using a negative margin can create challenges for VoiceOver users.
Additionally, consideration must be given to prevent words from wrapping one per line as it affects screen reader functionality.
Moreover, clip is now deprecated.

To address the first point, avoid using a negative margin.

To tackle the second issue, include white-space: no-wrap to prevent words from being displayed 'one per line' and potentially causing readability issues.

For the third concern, consider implementing clip-path: inset(50%) instead of relying solely on clip for improved browser support in the future.

Below is a more reliable class that has been tested across various forums with positive results. If any problems arise, please share your feedback for further improvement.

.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>

Answer 3

Answer №2

Dealing with a similar issue in the past, I found a neat solution. Bootstrap provides a handy class called sr-only which conceals content on the webpage while still being accessible to screen readers. For more information, you can refer to this resource

Even if you're not utilizing bootstrap, you can easily incorporate the same functionality into your code by adding a custom class.

.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 trust that this suggestion will be beneficial to you.

Answer 4

Dealing with a similar issue in the past, I found a neat solution. Bootstrap provides a handy class called sr-only which conceals content on the webpage while still being accessible to screen readers. For more information, you can refer to this resource

Even if you're not utilizing bootstrap, you can easily incorporate the same functionality into your code by adding a custom class.

.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 trust that this suggestion will be beneficial to you.

Answer 5

Answer №3

Utilizing the aria-label attributes is the recommended approach (see example below)

Is there a more elegant solution to this?

Avoid hiding the element. While I may not directly answer your question, I am addressing the underlying issue.

Screenreaders are just one type of assistive technology used by a small percentage of individuals targeted in accessibility guidelines.

Consider using a screen magnifier, where seeing the entire screen at once is not possible. Also, think about those with cognitive disabilities who struggle with counting or remembering elements.

If you believe certain information is crucial for blind individuals, it's likely important for them as well as others.

Instead of a lengthy text, opt for a concise counter with appropriate aria labeling:

<div role="status" aria-live="polite" aria-label="5 selections have been made.">
  5 selections
</div>

Answer 6

Utilizing the aria-label attributes is the recommended approach (see example below)

Is there a more elegant solution to this?

Avoid hiding the element. While I may not directly answer your question, I am addressing the underlying issue.

Screenreaders are just one type of assistive technology used by a small percentage of individuals targeted in accessibility guidelines.

Consider using a screen magnifier, where seeing the entire screen at once is not possible. Also, think about those with cognitive disabilities who struggle with counting or remembering elements.

If you believe certain information is crucial for blind individuals, it's likely important for them as well as others.

Instead of a lengthy text, opt for a concise counter with appropriate aria labeling:

<div role="status" aria-live="polite" aria-label="5 selections have been made.">
  5 selections
</div>

Answer 7

Answer №4

Encountering a similar issue, I tackled the misalignment problem caused by the hidden class mentioned earlier. Making minor adjustments to the class resolved this 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;
}

Answer 8

Encountering a similar issue, I tackled the misalignment problem caused by the hidden class mentioned earlier. Making minor adjustments to the class resolved this 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;
}

Ways to conceal text while still allowing it to be read by a screen reader

Answer №1

An Improved Approach to Handling Accessibility with Bootstrap Classes

Answer №2

Answer №3

Answer №4

Similar questions

Fade out the div element when clicked

Switch up the linear gradient background periodically

Are you seeing empty squares in place of Font Awesome icons?

Insert the element both before and after it is referenced

The perfect method for creating template literals using a function

What factors influence the timing of Chrome's spell-check feature for a particular word?

When I try to open my modal in Electron by clicking on the button, it doesn't work

How can I position text next to an input within a <td> element in a vertical arrangement?

JavaScript to toggle the visibility of elements when they move outside of a specified container

How can I use absolute positioning and scrolling with an Iframe?

Is it possible to resume CSS animation when the page is first loaded?

`how to insert finished HTML & CSS header into WordPress PHP documents`

Showing JSON data using CSS and HTML

Ways to prevent a Div from shifting its position due to dynamic changes in height of another element

Why is it that this code can upload photos successfully, but not text files?

Navigation Bar Search Box Alignment Problem

Discovering the row that was clicked: A step-by-step guide

Trigger a random tune when hovering the mouse

Calculating the time gap between two consecutive "keyup" occurrences

Presenting data in various formats