WebAIM -考虑网页的可访问性

CSS在行动
不可见的内容,仅供屏幕阅读器用户使用

介绍

一个女人躲在她的手后面。有些情况下,内容应该对屏幕阅读器用户开放,但对正常用户隐藏。在绝大多数情况下,可视可用的内容应该对屏幕阅读器用户可用,反之亦然。冗长的提示或指令只能由屏幕阅读器用户阅读,通常弊大于利。但是,在一些情况下,信息或意义在视觉上是明显的,但对屏幕阅读器用户可能不明显。在这些罕见的情况下,让屏幕阅读器读取内容,但让有视力的用户仍然看不见内容是合适的。

隐藏内容的技术

有几种机制可以用于隐藏内容。重要的是,要实现能够产生预期结果和可访问性的技术。

显示:没有可见性:隐藏

这些样式将对所有用户隐藏内容。内容从页面的视觉流中删除,并被屏幕阅读器忽略。如果想让屏幕阅读器读取内容,就不要使用此CSS。但一定要用它来隐藏你想对所有用户隐藏的内容。

隐藏的属性

HTML隐藏的属性相对较新,在IE11等较老的浏览器上不受支持。当受到支持时,它的功能与CSS相同显示:没有-具有此属性的元素将不会显示给任何用户。

宽度:0 px,高度:0 px或其他0像素大小调整技术(不推荐)

没有高度或宽度的元素(无论是在HTML或CSS中定义的)通常会从页面流中删除,因此大多数屏幕阅读器不会读取它。如果想让屏幕阅读器读取内容,请不要将内容设置为0像素。内容风格字体大小:0 px行高:0可能可以工作,但元素仍然会占据屏幕上的水平空间。所有这些技术可能会导致搜索引擎惩罚,因为它们可能被解释为恶意的。

文本:-10000 px;

这种方法将内容向左移动10000个像素——因此离开了可见屏幕。屏幕阅读器仍将阅读这种样式的文本。

但是,如果为链接、表单控件或其他可定焦元素提供了这种样式,那么元素将是可定焦的,但在页面可见的键盘上不可见,用户可能会感到困惑。这种方法五月如果元素不包含可导航元素,则是一个可行的选项,尽管有更好的技术可用。

绝对定位内容在屏幕之外

以下是为可视化地隐藏将被屏幕阅读器读取的内容而推荐的样式。

.sr-only {
位置:绝对的;
左:-10000 px;
上图:汽车;
宽度:1 px;
身高:1 px;
溢出:隐藏;
}

.sr-onlyCSS类(“仅限sr”表示“仅限屏幕阅读器”,尽管类名并不重要)应该从隐藏元素的标签中引用,如下所示:

< div类= " sr-only "此文本被隐藏。

有视力的用户根本看不到隐藏的内容——它会隐藏在可见的浏览器窗口的左边。因为它仍然是页面内容的一部分,所以屏幕阅读器会读取它。

让我们详细分析一下风格。位置:绝对的;告诉浏览器从页面流中删除元素并开始对其进行定位。左:-10000 px;将内容向左移动10000像素。上图:汽车;告诉浏览器将内容垂直放置在原来的位置。宽度:1 px;,身高:1 px;溢出:隐藏;告诉浏览器将元素设置为一个像素大小,并在视觉上隐藏不适合该像素的所有内容——这在终端用户禁用定位但所有其他样式仍然启用的情况下很有用。

请注意

导航元素,如链接和表单控件,不应该隐藏在屏幕之外。它们仍然可以被有视力的键盘用户导航,但是对他们来说是不可见的,除非它们被设计成在接收到键盘焦点时可见。

CSS剪辑

{clip: rect(1px, 1px, 1px, 1px);
clip-path:插图(50%);
身高:1 px;
宽度:1 px;
保证金:1 px;
溢出:隐藏;
填充:0;
位置:绝对的,}

这种相当现代的技术将隐藏或剪辑不能放入1像素可见区域的内容。就像屏幕外的内容一样,它在视觉上是隐藏的,但对现代屏幕阅读器来说仍然是可读的。

例子

下面是一些例子,可以使用屏幕外或剪切的内容来提高可访问性。

重要!

明智地使用这些技巧!请记住,许多屏幕阅读器用户都有一些愿景——他们看到的和听到的应该是和谐的。一般来说,只有屏幕阅读器的内容应该保留给视觉上很明显的信息,而不是盲目的屏幕阅读器用户。

指导性提示和指示

仅供屏幕阅读器使用的内容的一个相当常见的用例是搜索文本输入,由于它在页面上的位置和邻近的搜索按钮,因此很容易在视觉上识别为搜索字段,但没有提供相邻文本。一个隐藏的,<标识>元素的“Search terms”(或类似的)文本将确保该字段被屏幕阅读器用户正确标识。

另一个用例可能是页面面包屑(如“首页>文章“靠近页面顶部的文本”)。由于它们的视觉位置和表现形式,这是一种常见的约定。因为屏幕阅读器是线性访问breadcrumb链接和内容的,所以他们可能不容易看出这是breadcrumb。因此,隐藏的文本“You are here:”被添加到面包屑前面,为屏幕阅读器用户提供一个提示/指示,告诉他们接下来会发生什么。