How do I make a screenshot image accessible?

Question

I'm trying to make my website fully accessible for devices like screen readers. In one page on my site, I have a screenshot of an application showing a lot of text. For reference, here's my image:

On my page, I'm expecting the user to have read/skimmed the text in this image, so I need screen readers to essentially be able to read all the text in this image. However, there's far too much information to fit in the <img>'s alt attribute -- I wouldn't be able to preserve the structure of the text as it appears in the screenshot.

I'm willing to transcribe the entire image, of course, but I don't know quite how to format the transcription. Is there some way I can use aria-label or one of the other ARIA attributes on the <img> tag, or should I just include the transcription separately in an invisible block? Would it be best to recreate the image in plain text using a <pre> tag, or to create it with semantic HTML? Or is there some other approach entirely that I should be taking?

Answer 1

Be aware that you must provide both a short text alternative and a long text alternative

Your concern is covered within 1.1.1 Non-text Content of the WCAG:

Situation B: If a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):

G95: Providing short text alternatives that provide a brief description of the non-text content using one of the following Short text alternative techniques for Situation B AND one of the following Long text alternative techniques for Situation B :

[...]

Like longdesc, descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML.

After setting the label (=short description) of the image using the alt attribute for instance, you can set its description by using the aria-describedby attribute, using the following technique: ARIA15: Using aria-describedby to provide descriptions of images

<img src="screenshot.jpg"
   alt="Screenshot of my application"
   aria-describedby="long-alternative" />

<div id="long-alternative">insert your full text here</div>

Answer 2

Please see the following technique to meet WCAG 2.0 success criteria 1.3.1 (Info and Relationships) and 3.3.2 (Labels and Instructions):

https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html

Basically you set aria-describedby attribute on your image, pointing to an element with the corresponding id and the desired information, as in:

<img src="image.png" aria-describedby="description" />

<div id="description">
My description.
</div>

The div can have visibility hidden or display none to hide it from users not requiring accessibility assistance.