CSS 不透明度如何影响可访问性？

Posted 2023-03-06

【中文标题】CSS 不透明度如何影响可访问性？

【英文标题】：How does CSS opacity affect accessibility?

【发布时间】：2012-02-21 19:59:28

【问题描述】：

在浏览了许多 Google 和其他 SO 文章后，我决定直截了当地提出我的问题，希望得到一个简单、直接的答案。

在Does opacity:0 have exactly the same effect as visibility:hidden 的讨论中更进一步：我知道display:none 和visibility:hidden 对屏幕阅读器等隐藏元素，但是opacity:0 呢？

链接问题的答案之一中的表格指出不透明度参与taborder，那么这是否一定意味着它将是mapped to the accessibility API？

设置一个巨大的负数text-indent 通常作为display: none 和visibility: hidden 下拉菜单的替代品，但我想在没有javascript 的情况下淡入淡出我的菜单，同时确保我不这样做对屏幕阅读器隐藏它们。

【参考方案1】：

opacity: 0; 不会向屏幕阅读器隐藏内容，但它会向视力正常的用户和部分视力不佳的用户隐藏内容。 这就像在白色背景上显示白色文本（或透明，你明白了）。 它将被映射到可访问性 API，您仍然应该看到链接上方的指针发生变化，编辑：您仍然可以选择文本 /edit，并且应该有人测试一下，当列表链接和表单元素时，默认的虚线轮廓是否会像往常一样显示或将是透明的。编辑：后者，刚刚在此页面上使用 Firebug 进行了测试。

【讨论】：

轮廓被渲染为视觉对象本身的一部分（outline 属性），尽管不影响框尺寸，因此它将作为opacity 的效果参与对象的 alpha 合成.因此，您在使用 Firebug 进行测试时会看到什么。

@Felipe 这是我希望得到的答案。 :) 您能否添加一些参考资料的链接或解释您的信心？

这是一个很棒的问题。我环顾四周，但没有看到任何特别说明不透明度会影响屏幕阅读器工作的消息来源。不过，这似乎是有道理的。想象一下不透明度值是 50 而不是 0；内容仍然存在，并且仍然占用页面空间。我看不出下降到 0 会如何触发任何不同的行为。如果屏幕阅读器正在针对这种极端情况修改他们的行为，我认为开发人员有太多时间在他们手上......

Jonah——你说的有道理，但是在 0% 的不透明度下，它是隐藏的，就像在 0px 高度的元素被隐藏，但在 height: 1px 时仍然是“可见的”。屏幕阅读器会跳过高度为 0 的元素，所以我想知道它们是否同样跳过了 0 不透明度。令人惊讶的是，这个问题没有直接的答案，对吧？也许我可以提交一个关于 web 标准 sherpa 的问题。他们似乎时不时地讨论这种事情……

【参考方案2】：

虽然这是一个较老的问题，但它是最早出现在 Google 搜索中的问题之一，所以我想插话。

截至 2017 年 4 月，ChromeVox 屏幕阅读器无法读取设置为不透明度 0 的内容。

具体来说，ChromeVox 不会读取在不透明度设置为零的情况下被视觉隐藏的文本，除非该元素被视觉上可用的文本标记。

例如：

<!-- will not be read -->
<a href="#!" style="opacity: 0;">not read</a>

<!-- WILL be read -->
<a href="#!" style="opacity: 0.001;">is read</a>

<!-- span text will not be read -->
<a href="#!">
  Read More
  <span style="opacity: 0;">
    this will not be read
  </span>
</a>

<!-- 
  button text will not be read, 
  but aria-labelledby text will be read on button focus 
-->
<span id="test">button label</span>
<button type="button" aria-labelledby="test" style="opacity: 0;">
  This text will not be read
</button>

【讨论】：

当我尝试这个时：opacity: 0.001 在 Firefox 88.0.1 中完全可见。 opacity: 0.01 几乎看不见。

希望了解最流行的屏幕阅读器代理如何处理 opacity/visibility 现在的最新信息。