Set screen reader text (and meta-information text) to a different value than visible text

Question

I am dealing with a website where the author wants several key titles/headers to be in big ASCII art. For example, if a title said "sandwitch", it would show up as:

 .::::::.   :::.   :::.    :::.:::::::-.  .::    .   .::::::::::::::::::  .,-:::::   ::   .:
;;;`    `   ;;`;;  `;;;;,  `;;; ;;,   `';,';;,  ;;  ;;;' ;;;;;;;;;;;'''',;;;'````'  ,;;   ;;,
'[==/[[[[, ,[[ '[[,  [[[[[. '[[ `[[     [[ '[[, [[, [['  [[[     [[     [[[        ,[[[,,,[[[
  '''    $c$$$cc$$$c $$$ "Y$c$$  $$,    $$   Y$c$$$c$P   $$$     $$     $$$        "$$$"""$$$
 88b    dP 888   888,888    Y88  888_,o8P'    "88"888    888     88,    `88bo,__,o, 888   "88o
  "YMmMY"  YMM   ""` MMM     YM  MMMMP"`       "M "M"    MMM     MMM      "YUMMMMMP"MMM    YMM

And the code is just:

<div class="head" id="a">
   .::::::.   :::.   :::.    :::.:::::::-.  .::    .   .::::::::::::::::::  .,-:::::   ::   .:
  ;;;`    `   ;;`;;  `;;;;,  `;;; ;;,   `';,';;,  ;;  ;;;' ;;;;;;;;;;;'''',;;;'````'  ,;;   ;;,
  '[==/[[[[, ,[[ '[[,  [[[[[. '[[ `[[     [[ '[[, [[, [['  [[[     [[     [[[        ,[[[,,,[[[
    '''    $c$$$cc$$$c $$$ "Y$c$$  $$,    $$   Y$c$$$c$P   $$$     $$     $$$        "$$$"""$$$
   88b    dP 888   888,888    Y88  888_,o8P'    "88"888    888     88,    `88bo,__,o, 888   "88o
    "YMmMY"  YMM   ""` MMM     YM  MMMMP"`       "M "M"    MMM     MMM      "YUMMMMMP"MMM    YMM
</div>

Now, I personally think this is a terrible choice and makes things really hard to read without any benefit. But ultimately it wasn't my call and so it stuck. This has created two additional problems that I'm trying to address:

1. By including the ASCII art in the literal source code for the page, screen readers are unable to read the header, and instead try to read out this mismatch of punctuation and random letters.
2. Because these letters are the section titles of the webpage, a search engine will not be able to see that this text is supposed to be a word.

Now, it seems like I can hide the label from screen readers using aria-hide, but I would like to tell the screen reader what that blob of characters should say (when spoken aloud). aria-label seems to let me give it a label that's read aloud, but then it doesn't hide all of the extra junk punctuation.

So, is there any way I can tell both screen readers, and search engines, what this mess of text is supposed to say (if they were able to look at it like a human), rather than just as a mess of punctuation? Something like alt text, but for a div maybe?

Answer 1

aria-label on a heading will not help because the heading is not focusable with a keyboard.

The design you have is fine. Having ascii art is creative, albeit only readable to a subset of the population. I have decent eyesight but still have to think about what I'm looking at to find the word.

But, be that as it may be, if that's what the client wants, then go with it. It's easy to make it accessible.

<div aria-hidden="true">
  <!-- ascii art here -->
</div>

<h2 class="sr-only">Sandwich</h2>

So the ascii art is visible to sighted users but hidden from screen readers. The heading is visible to screen readers (and SEO) but hidden from sighted users.

You can search for the "sr-only" class (sometimes called the "visually-hidden" class). Here's one example. It basically pushes the text off the screen or makes it one pixel tall.

If you're talking about food, just make sure "sandwich" is spelled correctly in the ascii art :-)