Question

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

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

Answer 1

在写这个问题的中途，我记得在哪里看。

CSS可以做到这一点：

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

.dontRead {
    speak: none;
}

Answer 2

实际上，正确的方法是使用ARIA role=hidden。像这样：

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

通过执行此操作，您可以隐藏＆gt;因此屏幕阅读器不会读取“直角括号”，而是读取“Go！”。有视力的用户只会看到＆gt;如果您在视觉上隐藏.hide类中的内容。像这样：

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

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

如果您想要无法阅读图片，可以输入如下的空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'发音属性，链接属性media =“aural”也是如此。

Answer 3

检查这个

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

因为 role =“presentation”而 tabindex =“ - 1”，屏幕阅读器会忽略上面的代码。

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

Answer 4

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

Answer 5

隐藏辅助技术用户的特定信息的问题在于它假设他们在某个黑暗的房间里单独使用您的软件，这根本不是一个安全的假设。许多辅助技术用户与其他用户密切合作（这些信息与之相关），还有一些非常幸运的用户甚至还有助手。你最好不要强调或低估这些内容的优先顺序，而是稍后将它放在文档中。

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

5 个答案: