Not the OP, but I'd just wrap it up like this: <div aria-role="img" aria-label="{your alt-text here}"> <pre>...</pre> </div> A simple approach is best

Not the OP, but I'd just wrap it up like this: <div aria-role="img" aria-label="{your alt-text here}"> <pre>...</pre> </div> A simple approach is best. I don't have a screenreader on my current machine (as far as I know) so I can't verify actual behaviour right now, but according to MDN: > ...most screenreaders will consider the element with role="img" set on it to be to be like a black box, and not access the individual elements inside it. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...)