如何设置屏幕阅读器文本与可见文本不同？含ASCII艺术标题场景

嘿，我刚好处理过类似的需求！当你用大型ASCII艺术做网站标题时，核心要解决的就是普通用户看到酷炫的ASCII，而屏幕阅读器、搜索引擎和元数据能识别到正确的语义标题。下面是我总结的实用方案：

一、屏幕阅读器的无障碍处理 #

有两种常用的可靠方式，你可以根据场景选择：

方法1：用aria-label直接标注语义 #

把ASCII艺术放在一个容器里，给容器设置aria-label指定实际标题，同时给ASCII内容加上aria-hidden="true"，避免屏幕阅读器读取乱码字符：

<!-- 假设这是页面的主标题容器 -->
<h1 aria-label="Sandwich">
  <span aria-hidden="true">
    .::::::. :::. :::. :::.:::::::-. .:: . .:::::::::::::::::: .,-::::: :: .:
    ;;;` ` ;;`;; `;;;;, `;;; ;;, `';,';;, ;; ;;;' ;;;;;;;;;;;'''',;;;'````' ,;; ;;, '[==/[[[[,
    ,[[ '[[, [[[[[. '[[ `[[ [[ '[[, [[, [[' [[[ [[ [[[ ,[[[,,,[[[ ''' $c$$$cc$$$c
    $$$ "Y$c$$ $$, $$ Y$c$$$c$P $$$ $$ $$$ "$$$"""$$$ 88b dP 888 888,888 Y88 888_,o8P' "88"888 8...
  </span>
</h1>

这样屏幕阅读器会直接读aria-label里的“Sandwich”，完全忽略ASCII字符，同时普通用户看到的还是艺术字。

方法2：视觉隐藏的语义标题 #

如果需要更稳妥的语义结构（比如让搜索引擎更清晰识别），可以同时保留一个视觉隐藏的<h1>标签，再放置ASCII艺术：

<!-- 视觉隐藏的真实标题，屏幕阅读器和搜索引擎能抓取 -->
<h1 class="visually-hidden">Sandwich</h1>
<!-- 展示给普通用户的ASCII艺术 -->
<div class="ascii-title">
  .::::::. :::. :::. :::.:::::::-. .:: . .:::::::::::::::::: .,-::::: :: .:
  ;;;` ` ;;`;; `;;;;, `;;; ;;, `';,';;, ;; ;;;' ;;;;;;;;;;;'''',;;;'````' ,;; ;;, '[==/[[[[,
  ,[[ '[[, [[[[[. '[[ `[[ [[ '[[, [[, [[' [[[ [[ [[[ ,[[[,,,[[[ ''' $c$$$cc$$$c
  $$$ "Y$c$$ $$, $$ Y$c$$$c$P $$$ $$ $$$ "$$$"""$$$ 88b dP 888 888,888 Y88 888_,o8P' "88"888 8...
</div>

然后添加这段CSS实现视觉隐藏（不会影响页面布局，只有屏幕阅读器能读取）：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

二、元信息的设置 #

不管是页面的<title>标签，还是Open Graph、Twitter Cards这类社交元标签，直接使用清晰的语义标题即可，绝对不要放ASCII字符：

<!-- 页面标题 -->
<title>Sandwich | 你的网站名称</title>

<!-- Open Graph元标签（用于社交分享） -->
<meta property="og:title" content="Sandwich">
<meta property="og:description" content="关于Sandwich的详细描述...">

<!-- Twitter Cards元标签 -->
<meta name="twitter:title" content="Sandwich">

关键注意点 #

• 绝对不要让屏幕阅读器读取ASCII字符，这会给视障用户造成极大困惑
• 确保语义标题和ASCII艺术表达的内容完全一致，避免信息偏差
• 测试时可以用屏幕阅读器（比如NVDA、VoiceOver）验证，确保能正确读取标题

内容的提问来源于stack exchange，提问作者Leif Andersen