How to Hide Text from the Visual DOM but Keep It for Screen Reader?

[Slevin#7]

I have some diagrams which need extensive description for visually impaired reader to have proper ARIA support. For that reason I use aria-describedby:

<div class="diagram">
  <figure>
    <img src="../images/diagram.png" aria-describedby="diag-description"/>
  </figure>
  <span id="diag-description" class="sr-only">The image is a diagram titled “Aloha from Hawaii”. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

Since the description is only required for screen reader I want to hide it completely from from the visual DOM. I've tried the following approach, but in Google Play Books this leads to akwardly 20 blank following pages after the diagram:

.sr-only {
  position: absolute;
  display: inline-block;
  width: 1px;   /* problematic */
  height: 1px;  /* problematic */
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

The culprit seems to be the attempt to set width and height. Now as a first solution I've just stripped these properties:

.sr-only {
  position: absolute;
  display: inline-block;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

But that seems no proper solution for me, since it relies heavily on clip which might not be supported in many reader.

What is the common solution to hide text from the visual DOM but keep it alive for the accessibility DOM?

Many thanks in advance for any help.

[KevinH]

What happens when you add the hidden attribute or display:None?

[Slevin#7]

Hidden will keep the assigned space but won't display the text, which may lead to a very atrocious design. Display none will strip the content completely from the DOM both the visual and the accessibilty one.

[KevinH]

Why assign it any space? The visibility:hidden css style does but what about the hidden attribute. The hidden="hidden" attribute should not still allocate space on the page.

Or perhaps do the reverse. Use the aria hidden="true" on the normal displayed text that describes the page and add an aria label instead of aria-describedby to prevent duplication.

Perhaps try absolute positioning off the screen. Or try setting the foreground color to the background color and shrink font size to be tiny. A an accessibility reader should have no trouble reading text taken from the dom no matter the css specified font size.

[Slevin#7]

The hidden attribute (directly set inside the tag) seems to behave similar to display none regarding accessibility concerns with the result that the text will not be read by the screen reader. (tested with Thorium)

[Slevin#7]

Originally Posted by KevinH

Perhaps try absolute positioning off the screen.

I can do this with maybe top: -9999px;
Since I don't have experience with that I'd like to ask if that solution comes with any downsides?

Originally Posted by KevinH

Or try setting the foreground color to the background color.

Color settings won't get honored by all readers, some do, some don't. Especially when the user selects the theme by hand.

Originally Posted by KevinH

shrink font size to be tiny.

Many reader have a minimum font size setting, which you can't undermine.

Anyhow, thank you very much all these advices.

[KevinH]

FWIW, the Thorium ScreenReader is not the same as a real Accessibility Reader. So you have one more type of reader to worry about. Surely just using an aria-label attribute would only be read by real accessibility readers and not screen readers.

[Quoth]

I'm obviously a confused idiot. If an image has alt-text I never see it, but isn't it always read by a screen reader?

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

https://www.w3schools.com/TAGS/att_alt.asp

As an aside why didn't the original 1999 pre-epub2 (or epub2) implement the simple client side image map? Though limited use except for "plot your own adventure" type novels.

I've not read these links on the subject. https://www.w3.org/WAI/alt/

I always put alt text on any image needing it. I'd not put it on a QR code for a URL that has the QR code URL in text exactly visible.

I test TTS on Pocketbook on Android.

[Slevin#7]

Originally Posted by Quoth

I'm obviously a confused idiot. If an image has alt-text I never see it, but isn't it always read by a screen reader?

You're right, the alt attribute gets perfectly read and is only shown visually as a fallback when the image can't be presented.

However, regarding to WCAG it should only be used for short descriptions, while long descriptions should be provided via aria-describedby: https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA15

The recommended maximum size of characters for the alt attribute seems to be round about 125, though theoretically there is no limit.

To go with the recommendations and assuming WCAG knows why and what I will stick with aria-describedby for long descriptions, I my case over 1000 chars. But unfortunately they don't provide a common solution how to hide the element which contains the description.

[KevinH]

What about aria-label? It has no size limit that I know of? But neither does alt? Hell I have seen data-attributes with 5k long strings in them.

AFAICT aria-describedby is meant to be used when a description for the image is already in an existing node. It is meant to point to h1-h6 tags or a div or p that is meant to be visible to all. That way redundant pieces of text are not created for the accessibility reader.

[Slevin#7]

Originally Posted by KevinH

What about aria-label? It has no size limit that I know of? But neither does alt? Hell I have seen data-attributes with 5k long strings in them.

aria-label might be a viable solution, since it doesn't interfere with the alt-attribute and is a dedicated accessibility purpose attribute. I'll give it a try, thanks for the tip.

[RbnJrg]

Originally Posted by Slevin#7

I have some diagrams which need extensive description for visually impaired reader to have proper ARIA support. For that reason I use aria-describedby:

<div class="diagram">
  <figure>
    <img src="../images/diagram.png" aria-describedby="diag-description"/>
  </figure>
  <span id="diag-description" class="sr-only">The image is a diagram titled “Aloha from Hawaii”. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

Since the description is only required for screen reader I want to hide it completely from from the visual DOM.

What is the common solution to hide text from the visual DOM but keep it alive for the accessibility DOM?

Many thanks in advance for any help.

Watch the epub I attach; there I give you a possible solution to your issue. You would need to employ in your .xhtml file the following code:

  <div>
    <figure>
      <img src="../Images/balloon.jpg" aria-describedby="diag-description"/>

      <div id="diag-description" class="sr-only">
        The image is a diagram titled “Aloha from Hawaii”. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </figure>
  </div>

  <p>This is a dummy text to see if the "aria-describedby" is hidden but active.</p>

And you would need to style it as following:

figure {
  width: 100%;
  margin: 0;
}

img {
  width: 100% !important;
  margin: 1em 0;
}

.sr-only {
  position: relative; 
  z-index: -1;
  display: block;
  width: 100%;
  line-height: 0px !important;
  margin-top: -2em; /* here you can play with the value */
}

The text you are trying to hide is not vissible but a TTS system will read it. Do your test in Thorium.

[RbnJrg]

Here you have an even better solution; I tested it on Thorium and Calibre Viewer and works as expected.