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

Question

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

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

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

Answer 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”将被屏幕阅读器忽略。