CSS不透明度如何影响可访问性？ [英] How does CSS opacity affect accessibility?

问题描述

在浏览了许多Google和其他SO文章后，我决定明确地提出我的问题，希望能给您一个简单直接的答案。

After browsing a number of Google and other SO articles, I've decided to ask my question plainly in hopes of a simple, direct answer.

添加一个进一步讨论不透明度：0具有完全相同的效果作为可见性：隐藏：我理解 display：none 和 visibility：hidden 等等，但是 opacity：0 ？

To add one further step to the discussion on Does opacity:0 have exactly the same effect as visibility:hidden: I understand that display:none and visibility:hidden hide elements from screenreaders and the like, but what about opacity:0?

链接问题的答案之一注意到不透明度参与制表符，因此这也意味着它将映射到辅助功能API ？

The table in one of the answers to the linked question notes that opacity participates in taborder, so does that necessarily mean it will be mapped to the accessibility API?

设置一个巨大的负面文本缩进 code> display：none 和 visibility：hidden 下拉菜单，但我想淡化我的菜单

Setting a giant negative text-indent is typically offered as an alternative to display: none and visibility: hidden for dropdown menus, but I'd like to fade my menus in and out without JavaScript, while making sure I don't hide them from screen readers.

推荐答案

opacity：0; 不会隐藏屏幕阅读器的内容，虽然它会隐藏来自视线用户和部分视力较差的用户的内容。

这就像在白色背景上显示白色文本（或透明，你得到的想法）。

它将被映射到辅助API，你应该仍然看到指针更改上面的链接，编辑：你仍然可以选择文本/编辑，有人应该测试看看是否，当制表链接和表单元素时，默认的虚线轮廓将像往常一样显示或将是透明的。编辑：后者，只是在此页上使用Firebug测试。

opacity: 0; won't hide content from screen readers, though it'll hide content from sighted users and partially sighted users.
It's like displaying a white text on a white background (or transparent, you get the idea).
It'll be mapped to the accessibility API, you should still see the pointer changing above links, edit: you can still select text /edit, and somebody should test to see if, when tabulating links and form elements, the default dotted outline will display as usual or will be transparent. the latter, just tested with Firebug on this page.

这篇关于CSS不透明度如何影响可访问性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！