Alternative text with multiple lines

Hi,

I've met a blind developer who suffers when reading posts which include
source code within images.

The best solution would be to replace those images by text. According to
https://www.w3.org/TR/WCAG21/#images-of-text: "If the technologies being
used can achieve the visual presentation, text is used to convey
information rather than images of text". However, he's thinking about an
option to show that beautiful image with source code in the visual
rendering and, at the same time, to have the text of the source code only
visible to assistive technology.

I admire he's looking for that solution, respecting the use of the image,
in other words, respecting the development behind the functionality of
getting images with colored and formatted source code.

The problem is having an alternative text with multiple lines.

Please, what do you think about this option?

  <img src="source-code-1.jpg" alt="Source code about ..."
aria-details="source-code-1">
  <div id="source-code-1" hidden>
      /* source code */
  </div>

However, according to https://www.w3.org/TR/wai-aria-1.1/#aria-details:
"Authors SHOULD ensure the element referenced by aria-details is visible to
all users". This option hides that element.

I found several examples in https://www.w3.org/WAI/tutorials/images/complex/.
However, longdesc seems not fully supported and other options don't support
multiple lines of alternative text.

Another option could be to add a HTML details element below the image,
which don't interfere too much with the visual aspect, because its content
is only visible when it's toggled into an "open" state. Furthermore, offers
the possibility of copying the source code. However, we're thinking about
not showing another element in the page, in order to offer 2 options (with
an additional visible element and without an additional visible element)
and to be a proposal readily accepted for everybody.

I looked for information in ATAG, thinking about a user who has to add an
alternative text with multiple lines to an image. However, those guidelines
refer to WCAG: https://www.w3.org/TR/ATAG10/#def-alt-eq

Thanks in advance for your time,
Raquel