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