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

Question

在浏览了许多 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 的情况下淡入淡出我的菜单，同时确保我不这样做对屏幕阅读器隐藏它们。

Answer 1

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

Answer 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>