将屏幕 reader 文本（和 meta-information 文本）设置为与可见文本不同的值

Question

我正在处理一个网站，作者想要几个关键 titles/headers 在大 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>

现在，我个人认为这是一个 糟糕的 选择，它让事情变得很难阅读，而且没有任何好处。但最终这不是我的决定，所以它卡住了。这造成了我试图解决的另外两个问题：

通过在页面的文字源代码中包含 ASCII 艺术，屏幕 reader 无法阅读 header，而是尝试读出标点符号和随机字母的不匹配.
因为这些字母是网页的章节标题，所以搜索引擎将看不到这段文字应该是一个词。

现在，我似乎可以使用 aria-hide 从屏幕 reader 中隐藏标签，但我想告诉屏幕 reader 那一堆字符应该说什么（大声说话时）。 aria-label 似乎让我给它一个大声朗读的标签，但它并没有隐藏所有额外的垃圾标点符号。

那么，有什么方法可以告诉屏幕 reader 和搜索引擎，这些乱七八糟的文字应该说什么（如果他们能够像人类一样看待它），而不仅仅是一堆标点符号？类似于 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% 的人没有帮助，例如那些使用屏幕放大镜的人。

Answer 2

aria-label 在标题上无济于事，因为标题无法通过键盘聚焦。

你的设计很好。拥有 ascii 艺术是有创意的，尽管只有一小部分人可以阅读。我的视力不错，但仍然需要考虑我在看什么才能找到这个词。

但是，不管怎样，如果这是客户想要的，那就随它去吧。使其易于访问。

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

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

所以 ascii 艺术对有视力的用户可见，但对屏幕阅读器隐藏。标题对屏幕阅读器（和 SEO）可见，但对有视力的用户隐藏。

您可以搜索 "sr-only" class（有时称为 "visually-hidden" class）。 Here's one example。它基本上将文本推离屏幕或使其高一个像素。

如果您在谈论食物，请确保 "sandwich" 在 ascii 艺术中拼写正确:-)

将屏幕 reader 文本（和 meta-information 文本）设置为与可见文本不同的值

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

html

seo

wai-aria

screen-readers

ascii-art