Difference between revisions of "ARIA Accordion"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
 
This accordion uses buttons for the accordion headers with aria-expanded and aria-controls.  Panels use the role of region with aria-labelledby referencing the accordion headers.  The tab, tablist, or tabpanel roles are not used.  There is no accordion role in ARIA.
 
This accordion uses buttons for the accordion headers with aria-expanded and aria-controls.  Panels use the role of region with aria-labelledby referencing the accordion headers.  The tab, tablist, or tabpanel roles are not used.  There is no accordion role in ARIA.
 +
The last button ("Inaccessibility") is incorrectly formed, and contains the accordion's content inside the tag with role button. This was created to test behavior on iOS and Android devices with Voiceover and Talkback respectively.
 
<br>Reference: WAI Description, Keyboard Interaction , States and Properties of Accordion: http://www.w3.org/TR/wai-aria-practices-1.1/#accordion<br>
 
<br>Reference: WAI Description, Keyboard Interaction , States and Properties of Accordion: http://www.w3.org/TR/wai-aria-practices-1.1/#accordion<br>
 
<html lang="en">
 
<html lang="en">
Line 122: Line 123:
 
         if (obj.getAttribute("aria-expanded") == "false" || alwaysopen) {
 
         if (obj.getAttribute("aria-expanded") == "false" || alwaysopen) {
 
          obj.setAttribute("aria-expanded","true");
 
          obj.setAttribute("aria-expanded","true");
 +
if (obj.getAttribute("data-invalidmarkup") == "true') {
 +
document.getElementById("r4").removeAttribute("hidden");
 +
} else {
 
          realNextSibling(obj).removeAttribute("hidden");
 
          realNextSibling(obj).removeAttribute("hidden");
 +
}
 
         }
 
         }
 
         else if (obj.getAttribute("aria-expanded") == "true" ) {
 
         else if (obj.getAttribute("aria-expanded") == "true" ) {
 
          obj.setAttribute("aria-expanded","false");
 
          obj.setAttribute("aria-expanded","false");
 +
if (obj.getAttribute("data-invalidmarkup") == "true') {
 +
document.getElementById("r4").removeAttribute("hidden");
 +
} else {
 
          realNextSibling(obj).setAttribute("hidden","hidden");
 
          realNextSibling(obj).setAttribute("hidden","hidden");
 +
}
 
         }
 
         }
 
       }
 
       }
Line 160: Line 169:
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 +
      <div>
 +
        <button data-invalidmarkup="true" aria-label="Inaccessibility" class="accbutton" id="b4" onkeydown="change(event);" aria-expanded="false" aria-controls="r4" onclick="toggle(this);">
 +
<span>Inaccessibility</span>
 +
        <div class="panel" role="region" id="r4" hidden="hidden" aria-labelledby="b4">
 +
          <div><a href="#">Form controls whose labels have been aria-hidden</a></div>
 +
          <div><a href="#">Page with valid ARIA and no visually distinct controls</a></div>
 +
          <div><a href="#">Tabpanels inside buttons</a></div>
 +
        </div>
 +
</button>
 +
      </div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 20:44, 11 May 2017

This accordion uses buttons for the accordion headers with aria-expanded and aria-controls. Panels use the role of region with aria-labelledby referencing the accordion headers. The tab, tablist, or tabpanel roles are not used. There is no accordion role in ARIA. The last button ("Inaccessibility") is incorrectly formed, and contains the accordion's content inside the tag with role button. This was created to test behavior on iOS and Android devices with Voiceover and Talkback respectively.
Reference: WAI Description, Keyboard Interaction , States and Properties of Accordion: http://www.w3.org/TR/wai-aria-practices-1.1/#accordion
Accordion

Results

JAWS

JAWS 18 The expanded or collapsed STATE of the buttons is announced when the TAB or ARROW keys are used as expected. When the Button is expanded the region for the button is announced immediately after the button as expected. When the button is collapsed the region is no longer announced as expected.