有没有办法为非语言文本内容指定合理的替代文本？答案

【问题标题】：Is there a way to specify sensible alt-text for non-verbal text content?有没有办法为非语言文本内容指定合理的替代文本？
【发布时间】：2017-03-14 04:37:42
【问题描述】：

我博客上的标语是“Just my $.02”。我在 Apple 的 VoiceOver 屏幕阅读器中尝试了这个，语音输出是“我的零美元和两美分。”

span 元素是否有类似 alt 属性的东西，我可以在其中指定非语言文本的替代口头版本，如下所示？

<p>Just my <span alt="two cents">$.02</span></p>

【问题讨论】：

这可能是一个开始的地方：w3.org/TR/WCAG20-TECHS/ARIA6.html
谢谢@AlexDurbin。这绝对是朝着正确方向迈出的一步，但并不是我想要的。屏幕阅读器（至少是 VoiceOver）将读取标签和内容。 :\

标签： html accessibility wai-aria screen-readers

【解决方案1】：

aria-hidden="true" 阻止屏幕阅读器读出文本：

<p>
Just my <span aria-hidden="true">$.02</span><span class="visually-hidden">two cents</span>
</p>

visually-hidden 类隐藏了内容，不被视觉显示：

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
 }

这些组合在一起可以在视觉上隐藏文本“两美分”，但将其保留给屏幕阅读器，而屏幕阅读器会忽略文本“$.02”。

【讨论】：