Question

我正在处理一个网站，其中作者想要几个关键的标题/标题是大ASCII艺术。例如，如果标题说＆＃34; sandwitch＆＃34;，它将显示为：

 .::::::.   :::.   :::.    :::.:::::::-.  .::    .   .::::::::::::::::::  .,-:::::   ::   .:
;;;`    `   ;;`;;  `;;;;,  `;;; ;;,   `';,';;,  ;;  ;;;' ;;;;;;;;;;;'''',;;;'````'  ,;;   ;;,
'[==/[[[[, ,[[ '[[,  [[[[[. '[[ `[[     [[ '[[, [[, [['  [[[     [[     [[[        ,[[[,,,[[[
  '''    $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艺术，屏幕阅读器无法读取标题，而是尝试读出标点符号和随机字母的不匹配。
因为这些字母是网页的标题，搜索引擎将无法看到该文字应该是一个单词。

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

那么，有什么方法可以告诉屏幕阅读器和搜索引擎，这些混乱的文本应该说什么（如果他们能够像人类一样看待它），而不仅仅是一团糟标点？类似alt文字的内容，但div可能是？

Answer 1

现在，我个人认为这是一个可怕的选择

这是一个可怕的选择

因为这些字母是网页的部分标题，搜索引擎将无法看到该文字应该是一个单词。

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

<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艺术对于有视觉的用户是可见的，但对屏幕阅读器是隐藏的。屏幕阅读器（和搜索引擎优化）可以看到标题，但对有视力的用户隐藏。

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

如果您正在谈论食物，请确保＆＃34;三明治＆＃34;在ascii艺术中拼写正确： - ）

将屏幕阅读器文本（和元信息文本）设置为与可见文本不同的值

2 个答案: