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

Question

在浏览了一些谷歌和其他SO文章之后,我决定明白地问我的问题,希望得到一个简单直接的答案.

在讨论中添加另一个步骤不透明度:0与可见性具有完全相同的效果:隐藏:我理解display:none并visibility:hidden隐藏屏幕阅读器之类的元素,但是怎么样opacity:0？

链接问题的答案之一中的表格指出不透明度参与taborder,那么这是否意味着它将被映射到可访问性API？

设置一个巨大的负片text-indent通常作为下拉菜单的替代display: none和visibility: hidden提供,但我想在没有JavaScript的情况下淡入淡出我的菜单,同时确保我不会将它们隐藏在屏幕阅读器中.

Answer 1

虽然这是一个较老的问题,但它是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>

Answer 2

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