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