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

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>

通过执行此操作,您可以隐藏>字符,因此屏幕阅读器不会读取"直角括号",而是显示"Go!".只有您可视地隐藏.hide类中的内容,才会看到>.像这样:

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

ARIA角色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>

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

此时不支持CSS'adoc属性,对于链接属性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屏幕阅读器.