是否有一种方法可以为非语言文本内容指定明智的Alt-Text

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