Difference between revisions of "ARIA Expanded state"

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

Revision as of 16:12, 11 September 2014

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