Does an elements with the attribute aria-hidden and css visibility:hidden get read by screen readers?

Question

I have a mobile menu that I am hiding from view on desktop with visibility:hidden . I would like to also hide this menu from screen readers on a desktop without using display:none or hidden=hidden if possible.

Is aria-hidden=true enough to prevent all the hidden menu links from being read out by screen readers?

eg. default (Menu content not seen by screen reader)

<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="true" style="visibility:hidden">Menu Content</div>

eg. active (Menu content seen by screen reader)

<a aria-haspopup="true" href="#">Menu Toggler<a/>
<div aria-hidden="false" style="visibility:visible">Menu Content</div>

I want to prevent the screen reader from reading all the Menu Content links before the toggler is activated.

Answer 1

Your question is difficult to answer because each screen reader (like each browser) will be implemented with different features. Your best bet is to choose which screen readers you want to specifically support and then read their documentation to ensure that your website will work as expected. Even then, you'll probably need to do some actual testing.

According to WebAIM (as of January, 2014):

• JAWS is the most common primary screen reader
• VoiceOver and NVDA were also commonly used (over 33%)

---

UPDATE: According to WebAim User Survey #8 (2019) :

• NVDA and JAWS are neck-and-neck for the primary screen reader, commanding over 80% of market share between them. VoiceOver is in third place with about 13% of market share
• Narrator is also commonly used (over 30%)

---

According to 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.

According to http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/ :

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.)