Difference between revisions of "ARIA Expanded state"

From Level Access Web Labs
Jump to navigation Jump to search
Line 29: Line 29:
 
     <a href="#" onclick="toggle(this);" id="a1" aria-expanded="false" aria-controls="p2" > Level Access</a>
 
     <a href="#" onclick="toggle(this);" id="a1" aria-expanded="false" aria-controls="p2" > Level Access</a>
 
     <p class="hidden" id="p2">Level Access is an digital accessibility solutions provider.</p>
 
     <p class="hidden" id="p2">Level Access is an digital accessibility solutions provider.</p>
 +
  </section>
 +
 +
<section>
 +
    <span tabindex="0" role="button" onclick="toggle(this);" id="t1" aria-expanded="false" aria-controls="t2" >Testing Span Button</a>
 +
    <p class="hidden" id="t2">Level Access is an digital accessibility solutions provider.</p>
 
   </section>
 
   </section>
 
   <body>
 
   <body>

Revision as of 00:02, 10 March 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. 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.