Difference between revisions of "ARIA Expanded state"

From Level Access Web Labs
Jump to navigation Jump to search
Line 24: Line 24:
 
   <section>
 
   <section>
 
     <button onclick="toggle(this);" id="b1" aria-expanded="false" aria-controls="p1"> 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>

Revision as of 16:59, 1 February 2018

Activate the button/link to expand them and set the aria-expanded state to true. Activate again to collapse.

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.