Question

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

在Does opacity:0 have exactly the same effect as visibility:hidden的讨论中添加一个步骤：我理解display:none和visibility:hidden隐藏了屏幕阅读器等的元素，但是opacity:0呢？< / p>

相关问题的答案之一中的表格指出不透明度参与 taborder ，那么这是否必然意味着mapped to the accessibility 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进行了测试。

Answer 3

不透明度是透明度因子，因此不透明度：0表示不可见。如果你说关于display：none和visibility：hidden remeber，区别在于显示器完全消失了一些对象，容器并且它没有任何大小，而可见性使得不可见但是页面上仍然有一些大小。

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

3 个答案: