How to hide ASCII art from screen readers and other AT using ARIA HTML5?

Question

We are adding some nice ASCII pieces to our website. We are concerned that this may cause problems with screen programs, so I was thinking of adding aria-hidden="true"or role="presentation", therefore, screen readers do not see ASCII art. Is it correct? I don’t have a screening for testing, and it looks like the aria is hidden or the role does not completely hide the content.

It looks like this:

I could do it as an image, but it would be great to do it as actual text that cannot be selected using CSS. It seems strange to me that the characters are like an image in any case.

Answer 1

- img aria-label aria-laelledby. HTML:

, . , ASCII, , , . , , AT ASCII :

<figure role="img" aria-labelledby="fish-caption"> 
 <pre>
 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.’  ‘. \
        ‘-._  _ .-’       ‘.)
    jgs     `\__\
 </pre>
 <figcaption id="fish-caption">
  Joan G. Stark, "<cite>fish</cite>".
  October 1997. ASCII on electrons. 28×8.
 </figcaption>
</figure>

Answer 2

WAI-ARIA hidden :

, . DOM, - aria-hidden, true.

, aria-hidden , ascii-art, .