Question

在创建可视内容的替代方案以满足WCAG 2.0指南时，常见的方法是在视口外部放置替代的内容显示，以使其对辅助技术可读，但对于有视力的用户不存在。引用次数最多的例子通常如下：

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

使用这种方法，在布局容器上有其他滚动条的情况下很容易结束。但是，如果使用固定定位，它似乎消除了问题，因为屏幕外内容不再位于其容器的上下文中。我的问题是，对屏幕外可访问内容使用静态定位有哪些潜在的缺陷？我最初的迹象是屏幕阅读器会将其视为与其他位置相同的内容，但我还没有找到使用静态定位的示例。我错过了什么吗？

Answer 1

我将回答一个与你提出的问题不同的问题。但部分原因是你所拥有的CSS是我怀疑提出的问题。如果您有滚动条，那么您可能会遇到一个问题。

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

**请注意**此博客文章最初于2009年12月发布，我当时推荐的样式表（CSS）技术通过设置position:absolute;将屏幕阅读器文本从页面向左移动到左侧left:-9999px;

原始定义仍适用于使用从左到右（LTR）语言的网站，但与从右到左（RTL）语言不兼容 - 例如希伯来语，阿拉伯语等。最近使用Talkback屏幕阅读器对移动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;
}

我的建议是看看那些是否适用于滚动条问题。

至于你的具体问题，做一个演示页面，启动一个（ll the）屏幕阅读器，看看你得到了什么。

Answer 2

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

这些技术基于只有盲人需要可访问性的假设。使用这种黑客的人经常忘记这些信息可以使有认知或身体残疾的人受益，包括任何其他视力残疾（例如色盲）。

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

视力不佳的人可以使用屏幕阅读器，但想要通过可视光标查看哪个元素。在阅读时隐藏文本会给用户带来糟糕的体验。

例如，用鼠标点击已经说过的链接是不可能的

这些方法有时会假设盲人总是使用文本到语音的屏幕阅读器，而他们也可以使用盲文显示。这可能会导致文本更长。或者在使用语音替换时甚至是难以理解的文本。
```
## 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方法

在为可访问性制作屏幕外内容时，使用静态定位而不是绝对有什么含义？

2 个答案:

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