在创建视觉内容的替代方案以满足WCAG 2.0准则时,一种常见的方法是在视口之外放置内容的替代显示,以使辅助技术可以读取它,但对于视力不佳的用户不可见。引用最多的示例通常如下所示:

.offscreen{
  position:absolute;
  left:-9999em;
}


通过这种方法,很容易出现在布局容器上有其他滚动条的情况。但是,如果使用固定定位,似乎可以解决问题,因为屏幕外内容不再位于其容器的上下文中。我的问题是,对屏幕外可访问内容使用静态定位有哪些潜在的陷阱?我最初的想法是,屏幕阅读器会将其与放置在其他位置的内容相同,但是我还没有找到使用静态放置的示例。我想念什么吗?

最佳答案

我要回答的问题与您提出的问题不同。但是部分原因是我怀疑您所拥有的CSS引发了这个问题。如果您有滚动条,那么您应该正确地解决一个问题。

您拥有的CSS不再是理想的as explained by Graham Armfield


  **请注意**该博客文章最初发布于2009年12月,当时我建议通过设置position:absolute;left:-9999px;将屏幕阅读器文本从页面左侧移出,这是我当时建议的样式表(CSS)技术。
  
  该原始定义仍适用于使用从左到右(LTR)语言的网站,但与从右到左(RTL)语言不兼容-例如希伯来语,阿拉伯语等。最近使用对讲屏幕阅读器在移动Android设备上进行的测试还表明,原始技术可能会导致页面中的某些屏幕阅读器文本元素无法正确解释或无法正常运行。
  
  此处提供的更好的定义与LTR和RTL两种语言都兼容,并且更适合移动设备上的屏幕阅读器。


更新后的CSS如下所示:

.screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   width: 1px;
   overflow: hidden;
   position: absolute !important;
}


J. Renée Beach found an interesting issue并稍微调整了代码,只增加了一行以解决换行问题,这导致屏幕阅读器将文本说成一个长字。她的代码:

.accessible_elem {
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; /* added line */
  width: 1px;
}


我的建议是查看这些滚动条是否对您有用。

至于您的特定问题,请制作一个演示页,启动一个屏幕阅读器,然后看看您得到了什么。

07-24 09:46
查看更多