CSS在行动
无形的内容只是屏幕阅读器用户

介绍

一个女人背后隐藏了她的手。偶尔有实例,内容应该是屏幕阅读器用户可用,但发现用户隐藏在大多数情况下,如果内容(特别是内容提供功能或交互性)足以提供屏幕阅读器用户是非常重要的,它应该提供给所有用户只提供了详细的线索或指令的情况对屏幕阅读器用户最有可能反映了可怜的设计和可访问性然而,有一些情况下,信息是明显的视觉,但屏幕阅读器用户可能不明显在这些情况下,它可能是适当的标记内容的方式是阅读屏幕阅读器,但无形的用户。

隐藏的技术文本

There are several mechanisms that can be used for hiding content重要的是一种技术,实现期望的结果和可访问性。

可见性:隐藏;和/或显示:没有;

这些样式将从所有用户隐藏文本文本从视觉流中删除的页面,屏幕阅读器将被忽略。不要使用这个CSS如果你想要的内容被屏幕阅读器阅读但使用屏幕阅读器你不想读的内容。

宽度:0 px,高度:0 px或其他0像素分级技术

如上所述,因为一个元素没有高度或宽度从流中删除的页面,大多数屏幕阅读器将忽略这些内容HTML宽度和高度可以给相同的结果。没有内容大小为0像素如果你想被屏幕阅读器阅读的内容。内容风格字体大小:0 px行高:0可能的工作,尽管元素仍然可以把屏幕上的水平空间吗所有这些技术可能会导致搜索引擎的惩罚,因为他们可能解释为恶意。

文本:-10000 px;

该方法将内容向左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 */
剪辑:矩形(1 px,1 px,1 px,1 px);

相当现代的技术使用CSS隐藏或剪辑的内容不符合1像素明显可见的区域会隐藏内容,但仍允许它被现代屏幕阅读器阅读。

绝对定位内容离屏

使用CSS隐藏元素移动到屏幕的位置是公认的最有用和万博体育官网网址方法隐藏内容的视觉。

定位内容离屏

下面是推荐的风格视觉隐藏屏幕阅读器将阅读的内容。

.hidden
{:绝对;
左:-10000 px;
top:auto;
宽度:1 px;
身高:1 px;
溢出:隐藏;}

.hidden CSS类应该从内部引用元素的标签被隐藏,如图所示:

< div class = "隐藏" >本文隐藏。< / div >

的用户不会看到隐藏的内容它将观察的范围——隐藏浏览器窗口的左边可见屏幕阅读器用户会访问内容如果没有隐藏屏幕阅读器阅读的内容通常,完全无视这种技术中使用的样式。

让我们详细分析风格。

位置:绝对的;告诉浏览器删除页面流的元素和开始定位。左:-10000 px;10000像素向左移动内容。top:auto;告诉浏览器位置内容垂直最初在同一位置省略可能会导致在一些实例和浏览器风格被忽视简而言之,这部分代码的10000像素直接向左移动元素。

width:1px; height:1px; overflow:hidden;告诉浏览器使元素1 px 1 px,大小和视觉掩盖一切不符合这些维度虽然这是一个可能有点矫枉过正,在大多数情况下,可以省略了,有几个例子定位可能被禁用,但所有其他风格仍然可行在这种情况下,元素将继续留在原来的位置,但是只需要1像素的空间。

请注意

有时推荐职位内容使用left:0px; top:-500px(或相似的)虽然这是通过定位上面的内容页面的顶部,如果隐藏的元素包含一个链接或表单元素,在接收键盘焦点,浏览器试图滚动的元素,因此滚动浏览器页面的顶部这可能会导致混乱的键盘用户通过直接定位到左边,浏览器不会滚动到页面的顶部。应该注意,因为链接和表单元素提供功能,他们很少应该隐藏的用户的用户将无法看到哪个元素目前焦点,因为它是隐藏的屏幕。

例子

重要!

一般来说,内容只能隐藏在用户和屏幕阅读器用户可用的内容明显的视觉时,屏幕阅读器用户但不明显。

教学提示及指标

这种技术可用于提供教学线索和屏幕阅读器用户指标这应该是实现自由裁量权,只在必要时这个页面展示了这种技术的正确使用在两个地方。

首先,搜索文本框在页面的顶部有一个隐藏的标签之前立即显然视觉搜索的文本框是由于表示和搜索按钮,但屏幕阅读器需要一个标签的文本字段因此,我们提供了一个标签,但视觉上隐藏它。

第二,面包屑在页面的顶部是一个常见的设计会议大多数网络用户理解公约和可以识别视觉上面包屑因为屏幕阅读器访问线性面包屑链接和内容,它可能不是明显是面包屑,直到他们已经读过的部分因此,我们增加了隐藏的文本之前“你在这里:“只是面包屑。

你可以看到所有这些隐藏文本通过禁用这个页面的风格。记住,所有内容用CSS隐藏视觉将成为可见如果风格是禁用的。

其他实现

表单控件有时视觉化的表现,这样文本视觉相关的多个控件的标签考虑数据输入一个“名字”文本可能描述的功能多个文本框出现在它的下面有时表用于这些演示另外,有时候一个控制可能由多个项目的文本标签,如密码字段,在“密码:”这个词,紧随其后的是“需要”这个词使用标准表单标签,没有办法把一个文本项多个控件或多个文本控制的一种形式在这些情况下,适当的标签可以标记毗邻各自提供的表单元素,但是隐藏使用上面的CSS。

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

这句话“电话号码”是紧随其后的是4个文本输入框,用于区号,前三个数字,最后四位数,然后扩展

在北美大部分视觉用户会理解单个文本输入区域对应不同部分标准的电话号码然而,屏幕阅读器用户可能试图进入整个电话号码在第一箱混乱可能是当他们发现盒子限制他们只有3个字符或有额外的标记文本框。

对于这个问题最明显的解决方案是将所有的文本输入框为一个文本输入框,然后提供适当的标签然而,离屏为每个不同的标签文本框也会确保可访问性。

电话号码:
(
<标签= "区域" class = "隐藏" >区号> < /标签
<输入名称= "区域" id =“区域”类型=“文本”大小=“3”最大长度=“3”>
)

外的标签,在这种情况下,屏幕阅读器用户提供一个适当的描述。

请注意

在上面的示例中,标题属性也可以用来提供这些信息信息标题属性将由屏幕阅读器读取标签不存在此外,aria-labelledby可以用来提供多个标签每输入或多个输入标签。

结论

当使用本文提供的CSS技术隐藏内容,发现用户永远不会知道内容有(除非他们禁用风格)屏幕阅读器用户,另一方面,永远不会意识到这些内容的用户是不可见的两种用户可以使用内容直观,无需调整太多或太少的信息标记这可以提供重要的上下文线索,否则不可能对屏幕阅读器用户掌握,因为这些线索的视觉特性明智而审慎地使用时,这种技术可以解决一些可访问性的需求之间的紧张关系和视觉设计的要求它不是唯一的技术或方法解决这个问题,但这是一个web开发人员可以添加的列表需要时可能的解决方案。