Difference between revisions of "ARIA Hidden State"
Jump to navigation
Jump to search
Example radio button issue
| (3 intermediate revisions by one other user not shown) | |||
| Line 16: | Line 16: | ||
<p>This is the end of the test.</p> | <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 is the end of the test.
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. |
