25

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

在关于是否 opacity:0 与 visibility:hidden 具有完全相同的效果的讨论中添加进一步的步骤：我理解这一点display:none并visibility:hidden从屏幕阅读器等中隐藏元素，但是呢opacity:0？

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

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

4

2 回答 2

12

虽然这是一个较老的问题，但它是最早出现在 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>
于 2017-04-04T11:48:26.907 回答
3

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

于 2012-01-29T21:32:47.430 回答