html - 将屏幕阅读器文本(和元信息文本)设置为与可见文本不同的值

Question

我正在处理一个网站，作者希望几个关键标题/标题出现在大型 ASCII 艺术中。例如，如果标题说“sandwitch”，它将显示为:

 .::::::.   :::.   :::.    :::.:::::::-.  .::    .   .::::::::::::::::::  .,-:::::   ::   .:
;;;`    `   ;;`;;  `;;;;,  `;;; ;;,   `';,';;,  ;;  ;;;' ;;;;;;;;;;;'''',;;;'````'  ,;;   ;;,
'[==/[[[[, ,[[ '[[,  [[[[[. '[[ `[[     [[ '[[, [[, [['  [[[     [[     [[[        ,[[[,,,[[[
  '''    $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 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>

现在，我个人认为这是一个糟糕的选择，它会让事情变得很难阅读，而且没有任何好处。但最终这不是我的决定，所以它就卡住了。这又产生了两个我正在尝试解决的问题:

1. 通过在页面的文字源代码中包含 ASCII 艺术，屏幕阅读器将无法读取标题，而是尝试读出标点符号和随机字母的这种不匹配。
2. 由于这些字母是网页的部分标题，搜索引擎将无法看出该文本应该是一个单词。

现在，我似乎可以使用 aria-hide 向屏幕阅读器隐藏标签，但我想告诉屏幕阅读器该字符 block 应该说什么(大声说出时)。 aria-label 似乎让我给它一个可以大声朗读的标签，但它并没有隐藏所有额外的垃圾标点符号。

那么，有什么办法可以告诉屏幕阅读器和搜索引擎，这些乱七八糟的文本应该说什么(如果他们能够像人类一样看待它)，而不仅仅是作为一堆乱七八糟的东西？标点？类似于 alt 文本，但可能是 div ？

Answer 1

Now, I personally think this is a terrible choice

这是一个糟糕的选择

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.

因为它们是标题，所以会更容易

<h1 aria-label="your label">
   <!-- your text -->
</h1>

但这对 99% 的人没有帮助，例如那些使用屏幕放大镜的人。