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

Question

我正在处理一个网站，该网站的作者希望几个关键标题/ header 采用大型 ASCII 艺术。例如，如果标题为“三明治”，它将显示为:

 .::::::.   :::.   :::.    :::.:::::::-.  .::    .   .::::::::::::::::::  .,-:::::   ::   .:
;;;`    `   ;;`;;  `;;;;,  `;;; ;;,   `';,';;,  ;;  ;;;' ;;;;;;;;;;;'''',;;;'````'  ,;;   ;;,
'[==/[[[[, ,[[ '[[,  [[[[[. '[[ `[[     [[ '[[, [[, [['  [[[     [[     [[[        ,[[[,,,[[[
  '''    $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% 的人没有帮助，例如那些使用屏幕放大镜的人。