我刚刚在处理一个需要对视觉障碍用户和正常用户都适用的页面。有些内容元素只与视觉元素相关,显然不适用于使用屏幕阅读器的人。例如,一个链接会在新窗口中打开一个音频-视频演示,但由于某些无法控制的情况,窗口被尺寸调整得很别扭,因此会出现一条消息,建议您调整窗口大小以便更好地查看所有内容。显然,对于无法看到它的人来说,这是无用的信息。
是否有接受的方式可以使屏幕阅读器忽略某些内容?
是否有接受的方式可以使屏幕阅读器忽略某些内容?
aria-hidden="true"
。像这样:<button type="button">
<span aria-hidden="true" class="icon">></span>
<span class="hide">Go!</span>
</button>
.hide{
position: absolute;
left:-999em;
}
ARIA角色presentation
用于“规范化”语义含义,例如带有role="presentation"
的<table>
不会被读作表格内容,而只是纯文本。
如果您不希望图像被阅读,可以像这样放置空的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"也是如此。
aria-hidden="true"
属性的 DOM 对象内的内容。如果您使用伪元素像 :before
或 ::after
,它们仍然是该 DOM 对象的一部分,并且如果“父级”具有 aria-hidden="true"
,则它们将被忽略。例如 <span aria-hidden="true">将被忽略</span>
span::before{content:'也将被忽略';}
。 - Daniel Göransson在写问题的过程中,我想起了应该去哪里查找。
CSS可以做到这一点:
<span class="dontRead">Screen readers shouldn't read this</span>
.dontRead {
speak: none;
}
检查这个
<h1 role="presentation" tabindex="-1">Some text that screen readers will ignore </h1>
heading
的隐式角色,并使 <h1>
无法聚焦(它本来就不是)。然而,屏幕阅读器仍会读取此内容。请改用 aria-hidden="true"
。 - Null