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

Question

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

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

<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”。