Difference between revisions of "ARIA Expanded state"

From Level Access Web Labs
Jump to navigation Jump to search
 
(11 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 onclick="toggle(this);" id="a1" aria-expanded="false" > SSB</a>
+
     <a href="#" onclick="toggle(this);" id="a1" aria-expanded="false" aria-controls="p2" > Level Access</a>
     <p class="hidden" id="p2">SSB BART Group is an digital accessibility solutions provider.</p>
+
     <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.

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.