Difference between revisions of "ARIA Hidden State"

From Level Access Web Labs
Jump to navigation Jump to search
 
(4 intermediate revisions by 2 users not shown)
Line 14: Line 14:
 
     This content is hidden with ARIA but is displayed on screen.
 
     This content is hidden with ARIA but is displayed on screen.
 
   </div>
 
   </div>
 +
  <p>This is the end of the test.</p>
 
</html>
 
</html>
 +
== aria-hidden="false" ==
 +
<html>
 +
    <head>
 +
        <title>Example radio button issue</title>
 +
        <script type="text/javascript" src="/images/e/eb/Attribulator.js"></script>
 +
        <script type="text/javascript">
 +
// The list of attributes which can be modified by the attribulator.
 +
var attribs = {
 +
"aria-hidden": ["true", "false"]
 +
};
  
 +
window.onload = function() {
 +
new Attribulator(
 +
document.getElementById("main-div"),
 +
attribs,
 +
document.getElementById("controlsstart")
 +
);
 +
};
 +
</script>
 +
    </head>
 +
    <body>
 +
        <div aria-label="Aria-hidden radio buttons example">
 +
            <div id="main-div" aria-hidden="false"><!-- outer div -->
 +
                <p>This is example instructional text</p>
 +
                <input id="yes" name="YesNo" type="radio">
 +
                <label for="yes">Yes</label>
 +
                <input id="no" name="YesNo" type="radio">
 +
                <label for="no">No</label>
 +
            </div>
 +
        </div>
 +
    <h2 id="controlsstart">Example Controls</h2>
 +
    </body>
 +
</html>
 +
<html>
 +
  <img aria-hidden="true" src="foo.jpg" />
 +
</html>
 
==Test results for ARIA Hidden State ==
 
==Test results for ARIA Hidden State ==
 
{| class="wikitable" border="1"
 
{| class="wikitable" border="1"

Latest revision as of 22:46, 19 October 2018

  • aria-hidden should not be used for interactive elements that are focusable.
  • aria-hidden doesn't have to be paired with display none or visibility hidden
  • aria-hidden can be used to hide content such as partial pages in a magazine that are displayed for presentational purposes while keeping the main page content available to the screen reader.

There is content below that is hidden with display none and aria-hidden.

This content is displayed

This is the end of the test.

aria-hidden="false"

Example radio button issue

This is example instructional text

Example Controls

Test results for ARIA Hidden State

AT Browser Notes
JAWS Internet Explorer Works as expected The text that is hidden with aria-hidden is not announced.
JAWS Firefox Works as expected The text that is hidden with aria-hidden is not announced.
NVDA Internet Explorer Works as expected The text that is hidden with aria-hidden is not announced.
NVDA firefox Works as expected The text that is hidden with aria-hidden is not announced.
VoiceOver Safari Works as expected, The text that is hidden with aria-hidden is not announced.
Talkback Firefox Works as expected, The text that is hidden with aria-hidden is not announced.
Talkback Chrome Works as expected, The text that is hidden with aria-hidden is not announced.