Difference between revisions of "ARIA Expanded state"
Jump to navigation
Jump to search
Level Access
| (10 intermediate revisions by 3 users not shown) | |||
| Line 23: | Line 23: | ||
<p>Activate the button/link to expand them and set the aria-expanded state to true. Activate again to collapse.</p> | <p>Activate the button/link to expand them and set the aria-expanded state to true. Activate again to collapse.</p> | ||
<section> | <section> | ||
| − | <button onclick="toggle(this);" id="b1" aria-expanded="false"> Details </button> | + | <button onclick="toggle(this);" id="b1" aria-expanded="false" aria-controls="p1"> Details </button> |
| − | <p class="hidden" id="p1"> This is some text.</p> | + | <p class="hidden" id="p1" tabindex="-1"> This is some text.</p> |
</section> | </section> | ||
<section> | <section> | ||
| − | <a href="#" onclick="toggle(this);" id="a1" aria-expanded="false" > | + | <a href="#" onclick="toggle(this);" id="a1" aria-expanded="false" aria-controls="p2" > Level Access</a> |
| − | <p class="hidden" id="p2"> | + | <p class="hidden" id="p2">Level Access is an digital accessibility solutions provider.</p> |
</section> | </section> | ||
| + | |||
| + | <div role="img" aria-expanded="true"> test </div> | ||
| + | <div role="tablist" aria-expanded="true"> test </div> | ||
| + | <div role="tree" aria-expanded="true"> test </div> | ||
<body> | <body> | ||
</html> | </html> | ||
| + | |||
| + | See also [[ARIA Accordion]] | ||
| + | |||
| + | ==Notes== | ||
| + | This example uses ARIA-Expanded and ARIA-Controls. | ||
| + | |||
| + | ==Test Results== | ||
| + | JAWS with internet Explorer, Firefox and Chrome The expanded and collapsed state are announced as expected. In Firefox and Internet Explorer the JAWS command INSERT+ALT+M moves the virtual cursor to the new content. This does not work in Google chrome. | ||
| + | With NVDA the Expanded and collapsed state are announced as expected. Note there is no NVDA command to move to the new content. | ||
| + | In iOS with VoiceOver the Expanded and collapsed state are announced as expected. | ||
| + | |||
[[Category: ARIA]] | [[Category: ARIA]] | ||
Latest revision as of 15:38, 5 September 2018
Activate the button/link to expand them and set the aria-expanded state to true. Activate again to collapse.
This is some text.
Level Access is an digital accessibility solutions provider.
test
test
test
See also ARIA Accordion
Notes
This example uses ARIA-Expanded and ARIA-Controls.
Test Results
JAWS with internet Explorer, Firefox and Chrome The expanded and collapsed state are announced as expected. In Firefox and Internet Explorer the JAWS command INSERT+ALT+M moves the virtual cursor to the new content. This does not work in Google chrome. With NVDA the Expanded and collapsed state are announced as expected. Note there is no NVDA command to move to the new content. In iOS with VoiceOver the Expanded and collapsed state are announced as expected.
