具有属性 aria-hidden 和 css visibility:hidden 的元素是否会被屏幕阅读器读取？
Does an elements with the attribute aria-hidden and css visibility:hidden get read by screen readers?
我有一个移动菜单，我使用 visibility:hidden 在桌面上隐藏了它。如果可能的话，我还想在不使用 display:none 或 hidden=hidden 的情况下从桌面上的屏幕 readers 隐藏此菜单。
aria-hidden=true 是否足以防止屏幕 reader 读取所有隐藏的菜单链接？
例如。默认（屏幕看不到菜单内容reader）
<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="true" style="visibility:hidden">Menu Content</div>
例如。活动（屏幕看到的菜单内容reader）
<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="false" style="visibility:visible">Menu Content</div>
我想阻止屏幕 reader 在激活切换器之前读取所有菜单内容链接。
您的问题很难回答，因为每个屏幕 reader（就像每个浏览器一样）将具有不同的功能。您最好的选择是选择您想要特别支持的屏幕 reader，然后阅读他们的文档以确保您的网站能够按预期工作。即使那样，您也可能需要进行一些实际测试。
根据 WebAIM（截至 2014 年 1 月）：
更新：根据WebAim User Survey #8 (2019)：
主屏- NVDA and JAWS are neck-and-neckreader，占据了80%以上的市场份额。 VoiceOver 以约 13% 的市场份额位居第三
- Narrator is also commonly used (over 30%)
根据http://webaim.org/techniques/css/invisiblecontent/：
visibility: hidden; and/or display:none;
These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don't want read by screen readers.
width:0px, height:0px or other 0 pixel sizing techniques
As above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. Do not size content to 0 pixels if you want the content to be read by a screen reader. Content styled with font-size:0px or line-height:0 may work, though the elements would still take horizontal space on the screen. All of these techniques may result in search engine penalties as they may interpreted to be malicious.
text-indent: -10000px;
This approach moves the content to the left 10000 pixels - thus off the visible screen. The actual value matters little, so long as it is positioned off-screen. Screen readers will still read text with this style. However, if a link or form element is given this style, it may result in a focus indicator (the dotted lines or 'marching ants' that surround a focused link) that extends from where the element should be located in the page to the place it is actually located (way to the left). This is not very pretty. This approach also causes issues in right-to-left langauges. As such, this approach may be a viable option if the element does not contain navigable elements, though better techniques are available.
CSS clip
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
A fairly modern technique of using CSS to hide or clip content that does not fit into a 1 pixel visible area will essentially hide the content visibly, but still allow it to be read by modern screen readers.
Absolutely positioning content off-screen
Using CSS to move hidden elements to a position off-screen is generally accepted as the most useful and accessible method of hiding content visually.
There is a problem though (isn’t there always...). I made a very simple test page, and found that browser and screen reader support is still a bit lacking. Of the screen readers I have at my disposal, only VoiceOver and ChromeVox ignore content hidden with aria-hidden. JAWS does support it though (when used with Firefox), as is shown by the much more detailed testing done by John Foliot in HTML5 Accessibility: aria-hidden and role="presentation" and by Steve Faulkner in HTML5 Accessibility Chops: hidden and aria-hidden. (Both John and Steve go into more detail about related attributes, so I encourage you to read both articles.)
我有一个移动菜单，我使用 visibility:hidden 在桌面上隐藏了它。如果可能的话，我还想在不使用 display:none 或 hidden=hidden 的情况下从桌面上的屏幕 readers 隐藏此菜单。
aria-hidden=true 是否足以防止屏幕 reader 读取所有隐藏的菜单链接？
例如。默认（屏幕看不到菜单内容reader）
<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="true" style="visibility:hidden">Menu Content</div>
例如。活动（屏幕看到的菜单内容reader）
<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="false" style="visibility:visible">Menu Content</div>
我想阻止屏幕 reader 在激活切换器之前读取所有菜单内容链接。
您的问题很难回答，因为每个屏幕 reader（就像每个浏览器一样）将具有不同的功能。您最好的选择是选择您想要特别支持的屏幕 reader，然后阅读他们的文档以确保您的网站能够按预期工作。即使那样，您也可能需要进行一些实际测试。
根据 WebAIM（截至 2014 年 1 月）：
更新：根据WebAim User Survey #8 (2019)：
-
主屏
- NVDA and JAWS are neck-and-neckreader，占据了80%以上的市场份额。 VoiceOver 以约 13% 的市场份额位居第三
- Narrator is also commonly used (over 30%)
根据http://webaim.org/techniques/css/invisiblecontent/：
visibility: hidden; and/or display:none;These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don't want read by screen readers.
width:0px, height:0px or other 0 pixel sizing techniquesAs above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. Do not size content to 0 pixels if you want the content to be read by a screen reader. Content styled with font-size:0px or line-height:0 may work, though the elements would still take horizontal space on the screen. All of these techniques may result in search engine penalties as they may interpreted to be malicious.
text-indent: -10000px;This approach moves the content to the left 10000 pixels - thus off the visible screen. The actual value matters little, so long as it is positioned off-screen. Screen readers will still read text with this style. However, if a link or form element is given this style, it may result in a focus indicator (the dotted lines or 'marching ants' that surround a focused link) that extends from where the element should be located in the page to the place it is actually located (way to the left). This is not very pretty. This approach also causes issues in right-to-left langauges. As such, this approach may be a viable option if the element does not contain navigable elements, though better techniques are available.
CSS clip
position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);A fairly modern technique of using CSS to hide or clip content that does not fit into a 1 pixel visible area will essentially hide the content visibly, but still allow it to be read by modern screen readers.
Absolutely positioning content off-screen
Using CSS to move hidden elements to a position off-screen is generally accepted as the most useful and accessible method of hiding content visually.
There is a problem though (isn’t there always...). I made a very simple test page, and found that browser and screen reader support is still a bit lacking. Of the screen readers I have at my disposal, only VoiceOver and ChromeVox ignore content hidden with aria-hidden. JAWS does support it though (when used with Firefox), as is shown by the much more detailed testing done by John Foliot in HTML5 Accessibility: aria-hidden and role="presentation" and by Steve Faulkner in HTML5 Accessibility Chops: hidden and aria-hidden. (Both John and Steve go into more detail about related attributes, so I encourage you to read both articles.)