24

我刚刚在一个页面上工作，该页面需要有视力和视力受损的用户都可以访问。内容的某些元素，只是由于仅与视觉元素相关的性质，根本不适用于使用屏幕阅读器的人。例如，一个链接在一个新窗口中打开了一个视听演示文稿，但由于我无法控制的情况，窗口的大小被调整得很尴尬，所以有一条消息说你应该调整窗口的大小，以便更好地查看所有内容。显然，对于无论如何都看不到的人来说，这是无用的信息。

是否有一种可接受的方式让屏幕阅读器忽略某些内容？

4

5 回答 5

36

实际上这样做的正确方法是使用 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 角色presentation用于“规范化”语义含义，例如 a <table>withrole="presentation"不会被读取为表格内容，而只是纯文本。

如果您不想读取图像，可以输入如下空alt文本：

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

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

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

我注意到在一些罕见的情况下，一些屏幕阅读器仍然会阅读空的 alt 图像，所以你也可以aria-hidden="true"在这里使用。

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

于 2014-02-10T09:56:20.040 回答
28

写到一半，我记得在哪里看。

CSS 可以做到这一点：

<span class="dontRead">Screen readers shouldn't read this</span>

.dontRead {
    speak: none;
}
于 2009-03-23T03:38:44.717 回答
6

检查这个

<h1 role="presentation" tabindex="-1">Some text that screen readers will ignore </h1>

因为role="presentation"和tabindex="-1"屏幕阅读器会忽略上面的标签。

我在 ie8 和 firefox 3.5 上检查了它，它与 JAWS 屏幕阅读器一起使用。

于 2011-10-10T11:01:47.433 回答
2

CSS 具有这些听觉属性，但由于它们没有在任何地方实现，它们完全没用。

于 2009-06-04T14:10:22.753 回答
1

对辅助技术用户隐藏特定信息的问题在于，它假设他们在某个黑暗的房间里单独使用您的软件，这根本不是一个安全的假设。许多辅助技术用户与其他用户（与此信息相关）密切合作，一些非常幸运的人甚至拥有助手。明智的做法是为他们淡化或低估这些内容的优先级，而是以某种方式稍后将其放置在文档中。

于 2011-10-11T21:24:40.057 回答