CSS in Action
屏幕阅读器用户的隐形内容

介绍

一个女人躲在她的手后面。有时候,屏幕阅读器用户可以使用内容,但对视力正常的用户隐藏在大多数情况下,如果内容(特别是提供功能或交互性的内容)足以提供给屏幕阅读器用户,它应该可供所有用户使用仅为屏幕阅读器用户提供详细提示或说明的情况很可能反映了糟糕的设计和可访问性但是,在某些情况下,信息在视觉上是明显的,但屏幕阅读器用户可能并不明显在这些情况下,以屏幕阅读器读取内容的方式标记内容可能是适当的,但对于有视力的用户是不可见的。

隐藏文本的技巧

There are several mechanisms that can be used for hiding content实施一种能够产生预期结果和可访问性的技术非常重要。

能见度:隐藏;和/或显示:无;

这些样式将隐藏所有用户的文本文本将从页面的可视流中删除,并被屏幕阅读器忽略。如果您希望屏幕阅读器读取内容,请不要使用此CSS但是DO会将它用于您不希望屏幕阅读器阅读的内容。

宽度:0像素高度:0像素或其他0像素大小调整技术

如上所述,因为从页面流中删除了没有高度或宽度的元素,所以大多数屏幕阅读器将忽略该内容HTML宽度和高度可能会给出相同的结果。如果您希望屏幕阅读器读取内容,请不要将内容大小设置为0像素。内容风格字体大小:0像素要么行高:0可能会工作,虽然元素仍然会占据屏幕上的水平空间所有这些技术都可能导致搜索引擎受到惩罚,因为它们可能被解释为恶意攻击。

text-indent:-10000px;

此方法将内容移动到左侧10000像素 - 因此离开可见屏幕实际值很少,只要它位于屏幕外屏幕阅读器仍将使用此样式读取文本However, if a link or form element is given this style, it may result in a focus indicator (the dotted lines or 'marching ants' that surround a focused link) that extends from where the element should be located in the page to the place it is actually located (way to the left)这不是很漂亮这种方法也会引起从右到左语言的问题就这样,这种方法可以如果元素不包含可导航元素,那么这是一个可行的选择,尽管有更好的技术可用。

CSS剪辑

位置:绝对!重要;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip:rect(1px,1px,1px,1px);

使用CSS隐藏或剪辑不适合1像素可见区域的内容的相当现代的技术将基本上隐藏内容,但仍然允许现代屏幕阅读器读取。

绝对定位屏幕外的内容

使用CSS将隐藏元素移动到屏幕外的位置通常被认为是最有用的视觉隐藏内容的方法。

在屏幕外定位内容

以下是可视隐藏将由屏幕阅读器读取的内容的推荐样式。

。隐
{位置:绝对的;
左:-10000px;
top:auto;
宽度:1px的;
高度:1px的;
溢出:隐藏;}

然后应该从隐藏元素的标记内引用.hidden CSS类,如下所示:

<div class =“hidden”>此文本已隐藏。</ div>

视力正常的用户根本看不到隐藏的内容它将超出其可视范围 - 隐藏在可见浏览器窗口的左侧屏幕阅读器用户可以访问内容,就像它根本没有被隐藏一样屏幕阅读器正常阅读内容,完全忽略了此技术中使用的样式。

让我们详细分析一下风格。

位置:绝对的;告诉浏览器从页面流中删除元素并开始定位。左:-10000px;将内容向左移动10000像素。top:auto;告诉浏览器将内容垂直放置在最初的位置省略最佳可能导致剩下在某些实例和浏览器中被忽略的样式简而言之,这部分代码将元素直接向左移动10000像素。

width:1px; height:1px; overflow:hidden;告诉浏览器将元素1px的大小设置为1px,并在视觉上隐藏所有不适合这些维度的内容虽然这可能有点矫枉过正,并且在大多数情况下可能会被忽略,但有一些情况可能会禁用定位,但所有其他样式仍然启用在这种情况下,元素将保持在其原始位置,但只占用1个像素的空间。

注意

有时建议使用定位内容left:0px; top:-500px(或类似的)虽然这通过将内容定位在页面顶部之上来工作,但如果隐藏元素包含链接或表单元素,则在接收键盘焦点时,浏览器会尝试滚动到该元素 - 从而将浏览器滚动到页面顶部这可能会导致视力正常的键盘用户感到困惑通过直接向左定位,浏览器不会滚动到页面顶部。应该注意的是,因为链接和表单元素提供了功能,所以很少会向有视力的用户隐藏它们有视力的用户将无法看到当前具有焦点的元素,因为它隐藏在屏幕外。

例子

重要!

一般而言,内容应该仅对视力正常的用户隐藏,并且当内容在视觉上明显时可供屏幕阅读器用户使用,但屏幕阅读器用户不明显。

教学线索和指标

该技术可用于向屏幕阅读器用户提供指导提示和指示这应该谨慎实施,并且只在必要时实施此页面演示了在两个地方正确使用此技术。

首先,页面顶部的搜索文本框旁边有一个隐藏的标签从视觉上看,文本框由于演示和搜索按钮而用于搜索,但是屏幕阅读器需要文本字段的标签因此,我们提供了一个标签,但在视觉上隐藏了它。

其次,页面顶部的面包屑是一种常见的设计惯例大多数Web用户都了解约定,并且可以直观地识别面包屑因为屏幕阅读器可以线性地访问面包屑链接和内容,所以在他们阅读了部分内容之前,它们可能并不明显是它是面包屑因此,我们在面包屑之前添加了“你在这里:”的隐藏文字。

您可以通过禁用此页面的样式来查看所有隐藏文本。请记住,如果禁用样式,所有用CSS直观隐藏的内容都将变为可见。

其他实现

表格控件有时是可视化呈现的,因此文本在视觉上与多个控件的标签相关联考虑数据输入,其中一个“名字”文本可能描述其下方出现的多个文本框的功能有时表格用于这些演示或者,有时一个控件可能被多个文本项标记,例如前面有单词“Password:”的密码字段,后跟单词“Required”使用标准表格标签,无法将一个文本项与多个控件或多个文本关联到一个表单控件在这些情况下,可以在与其各自的表单元素相邻的标记中提供适当的标签,但是使用上面的CSS隐藏。

一个常见的例子是当两个或多个文本输入元素用于电话号码时。

“电话号码”后跟4个文本输入框,用于区号,前三位,后四位,然后扩展

北美的大多数视觉用户将理解单个文本输入区域对应于标准电话号码的不同部分但是,屏幕阅读器用户可能会尝试在第一个框中输入整个电话号码当他们发现盒子将它们限制为仅3个字符或者后面还有其他未标记的文本框时,可能会产生混淆。

此特定问题最明显的解决方法是将所有文本输入框组合到一个文本输入框中,然后提供相应的标签但是,每个不同文本框的屏幕外标签也将确保可访问性。

电话号码:

<label for =“area”class =“hidden”>区号</ label>
<input name =“area”id =“area”type =“text”size =“3”maxlength =“3”>

...

在这种情况下,屏幕外标签将为屏幕阅读器用户提供足够的描述。

注意

在上面的例子中,标题属性也可用于提供此信息信息在标题当标签不存在时,屏幕阅读器将读取该属性另外,ARIA-labelledby可用于为每个输入提供多个标签或为每个标签提供多个输入。

结论

当这里介绍的CSS技术用于隐藏内容时,视力正常的用户永远不会知道内容是否存在(除非他们禁用样式)另一方面,屏幕阅读器用户永远不会意识到这些内容对于有视力的用户是不可见的两种用户都可以直观地使用内容,而无需在标记中调整过多或过少的信息这可以提供重要的上下文线索,由于这些线索的视觉特性,屏幕阅读器用户无法掌握这些线索明智地使用时,这种技术可以解决可访问性要求和视觉设计要求之间的一些紧张关系它不是解决此问题的唯一技术或方法,但是Web开发人员可以在需要时将其添加到可能的解决方案列表中。