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

Question

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

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

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

Answer 1

aria-hidden="true" 阻止屏幕 reader 宣布文本：

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

class 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;
 }

这些组合在一起以在视觉上隐藏文本 "two cents"，但在屏幕 readers 时将其保留在原位，而屏幕 readers 会忽略文本“$.02” .

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

Is there a way to specify sensible alt-text for non-verbal text content?

html

accessibility

wai-aria

screen-readers