html - 有没有办法编写屏幕阅读器会忽略的内容？

Question

我刚刚开发了一个页面，该页面需要有视力的用户和有视力障碍的用户都能访问。内容的某些元素仅与视觉元素相关，根本不适用于使用屏幕阅读器的人。例如，一个链接在新窗口中打开一个视听演示，但由于我无法控制的情况，窗口的大小调整得很笨拙，所以有一条消息说你应该调整窗口大小，这样你才能更好地看到一切。显然，对于无论如何都看不到它的人来说，这是无用的信息。

是否有一种公认的方法可以让屏幕阅读器忽略某些内容？

Answer 1

实际上，正确的做法是使用 ARIA role=hidden . 像这样:

<button type="button">
  <span aria-hidden="true" class="icon">&gt;</span>
  <span class="hide">Go!</span>
</button>

这样做可以隐藏 > 字符，这样屏幕阅读器就不会读到“右尖括号”，而是读到“Go!”。如果您在视觉上隐藏 .hide 类中的内容，有视力的用户只会看到 >。 像这样:

.hide{
  position: absolute;
  left:-999em;
}

ARIA Angular 色 presentation用于“规范化”语义，例如 <table>与 role="presentation"不会被读取为表格内容，而只是纯文本。

如果你不想让图片被读取，你可以输入空的 alt像这样的文本:

<img src="decorative-flower.jpg" alt=""/>

..或者如果它是 <svg>省略 <title>和 <description>

<svg>
  <!-- <title>Remove this line</title> -->
  <!-- <description> Remove this too..</description> -->
</svg>

我注意到在极少数情况下，一些屏幕阅读器仍会阅读空的替代图像，因此您可以使用 aria-hidden="true"这里也是。

CSS 的 speak 属性目前不支持，链接属性 media="aural"也是如此。