0

在创建满足 WCAG 2.0 指南的视觉内容的替代方案时，一种常见的方法是将内容的替代显示放置在视口之外，以便辅助技术可以阅读，但对有视力的用户不存在。引用最多的示例通常如下所示：

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

使用这种方法，很容易导致布局容器上有额外的滚动条。但是，如果使用固定定位，它似乎可以消除问题，因为屏幕外内容不再位于其容器的上下文中。我的问题是，将静态定位用于屏幕外可访问内容的潜在缺陷是什么？我最初的指示是屏幕阅读器会将其视为与以其他方式定位的内容相同的内容，但我尚未找到使用静态定位的示例。我错过了什么吗？

4

2 回答 2

1

我将回答一个与你提出的不同的问题。但部分原因是您拥有的 CSS 是我怀疑提出问题的原因。如果你有滚动条，那么就有一个你想解决的问题。

正如 Graham Armfield 所解释的，您拥有的 CSS 不再理想：

** 请注意 ** 这篇博文最初发表于 2009 年 12 月，我当时推荐的样式表 (CSS) 技术通过设置position:absolute;和left:-9999px;

该原始定义仍然适用于使用从左到右 (LTR) 语言的网站，但与从右到左 (RTL) 语言不兼容——例如希伯来语、阿拉伯语等。最近在移动 Android 设备上使用 Talkback 屏幕进行的测试reader 还表明，原始技术可能导致页面中的某些屏幕阅读器文本元素无法正确解释或无法正常运行。

这里提供的更好的定义与两个方向的语言兼容——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 发现了一个有趣的问题并稍微调整了代码，只添加了一行来处理导致屏幕阅读器将文本作为一个长单词朗读的换行问题。她的代码：

.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;
}

我的建议是看看这些是否适合你的滚动条问题。

至于你的具体问题，制作一个演示页面，启动一个（所有）屏幕阅读器，然后看看你得到了什么。

于 2017-02-02T20:44:25.523 回答
0

使用一种或另一种技术绝对没有任何含义：陷阱是相同的。

  1. 这些技术是基于只有盲人需要无障碍的假设。使用这种 hack 的人经常忘记这些信息可以使有认知或身体障碍的人受益，包括任何其他视觉障碍（例如色盲）。

滥用此方法的最佳示例是“跳至内容”链接功能，这对仅使用键盘的用户非常有用。（例如帕金森病）

  1. 视力低下的人可以使用屏幕阅读器，但希望通过视觉光标查看说出的元素。在阅读时隐藏文本会带来糟糕的用户体验。

例如，无法用鼠标点击已说出的链接

  1. 这些方法有时假设盲人总是使用文本到语音的屏幕阅读器，同时他们也可以使用盲文显示器。这可能会导致更长的文本。甚至在使用语音替换时出现难以理解的文本。

    ## Bad use: (will help screenreaders, but not braille display users)
I have downloaded <span class="sr-only">oo-dacity</span>
     <span aria-hidden="true">Audacity</span>

屏幕阅读器用户占人口的 1%。可访问性目标是 100%。如果您认为某些东西对盲人有用，那么它对每个人都有用。

回答你的问题：你没有错过任何东西，但现在人们更喜欢这种clip方法

于 2017-02-02T22:27:13.187 回答