back to CanAdapt home

Test Aria-hidden on <div>inside an <li>

Example 1: Code in the wild. This is a complicated hidden slide which is supposed to be invisible to browsers and screen readers, see code view to see it:

  JAWS NVDA VoiceOver
FireFox40 doesn't hide content Doesn't hide content N/A
IE11.0.9 OK OK N/A
Chrome 39.02 OK OK N/A
Safari MacOS N/A N/A Content properly hidden

Example 2: Test code this should be visible but not read in screen reader

  JAWS NVDA VoiceOver
FireFox40 Hides content correctly Hides content correctly N/A
IE11.0.9 Hides content correctly OK N/A
Chrome 39.02 Hides content correctly OK N/A
Safari MacOS N/A N/A Hides content correctly

Description

The heading above "Testing code in the wild" is a complicated carousel hidden slide. This content should be hidden from screen readers and browsers. This is not the case on Firefox.

The heading "Test code" is a very simple list item with a div, to see if aria-hidden on the list item will hide the div from a screen reader. This is hidden from the screen reader properly.