title: How do I make a screenshot image accessible?
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/n5AzT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n5AzT.png" alt="Screenshot of text"></a></p>
  
  <p>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 <code>&lt;img&gt;</code>'s alt attribute -- I wouldn't be able to preserve the structure of the text as it appears in the screenshot.</p>
  
  <p>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 <code>&lt;img&gt;</code> 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 <code>&lt;pre&gt;</code> tag, or to create it with semantic HTML? Or is there some other approach entirely that I should be taking?</p>