CSS透明度对无障碍性有什么影响？

Question

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

在opacity:0是否与visibility:hidden效果完全相同的讨论中，我想进一步添加一个步骤：我知道display:none和visibility:hidden可以隐藏元素，并且对于屏幕阅读器等设备也有效，但是opacity:0呢？

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

通常为了下拉菜单，将巨大的负text-indent设置为替代display: none和visibility: hidden，但是我想淡入淡出我的菜单，而不使用JavaScript，同时确保不会将它们从屏幕阅读器中隐藏。

- Greg Perham

Answer 1

虽然这是一个旧问题，但它是谷歌搜索中出现的第一个问题之一，所以我想发表意见。

截至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>

- scottohara

---

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

非常希望了解目前最受欢迎的屏幕阅读器代理如何处理“opacity”/“visibility”。 - Jacob Ford

Answer 2

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

- FelipeAls

---

轮廓线本身作为可视对象的一部分呈现出来（outline 属性），尽管不影响盒子尺寸，因此它将作为 opacity 的效果参与对象的阿尔法合成。这就是使用 Firebug 进行测试时所看到的。 - BoltClock

@Felipe 这正是我所期望的答案。 :) 你能否添加一些参考链接或解释你的信心？ - Greg Perham

这是一个很棒的问题。我找了一下，但没有看到任何特别说明不透明度会影响屏幕阅读器工作的来源。不过这似乎是有道理的。想象一下，如果不透明度的值为50而不是0，则内容仍然存在，并且仍然占据页面上的空间。我无法想象降低到0会引发任何不同的行为。如果屏幕阅读器正在针对该边缘情况修改其行为，我会认为开发人员有太多的时间浪费了... - Jonah Bishop

Jonah，你说的很有道理，但是在0%不透明度下，它是隐藏的，就像高度为0像素的元素被隐藏一样，但是在高度：1像素时仍然“可见”。屏幕阅读器会跳过高度为0的元素，所以我想知道它们是否同样跳过了0不透明度。令人惊讶的是，对于这个问题并没有直接的答案，对吧？也许我可以在Web标准Sherpa上提交一个问题。他们似乎每隔一段时间就会讨论这种事情...... - Greg Perham

Answer 3

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

它也会影响对比度。 WCAG2要求至少有4.5的对比度比率。

为了看到不透明度如何影响对比度，假设您在黑色背景（0,0,0）上有一个灰色正方形-例如（127,127,127）。

（0,0,0）和（127,127,127）的对比度比率约为5.2。

如果您执行前景和背景的alpha混合，如下所示：

out[i] = (1-a)*bg[i] + a*fg[i]

您将得到新的RGB值（63,63,63）。

但是（63,63,63）和（0,0,0）的对比度比率约为2.6，低于所需的4.5。

虽然对比度比率似乎神秘，但实际上只是两个晦涩的定义链接在一起。有很多在线参考实现供您遵循，这里随机挑选了一个：

https://github.com/angstyloop/contrast-ratio

- angstyloop