Difference between revisions of "ARIA Accordion"

From Level Access Web Labs
Jump to navigation Jump to search
Line 123: 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') {
+
if (obj.getAttribute("data-invalidmarkup") == "true") {
 
document.getElementById("r4").removeAttribute("hidden");
 
document.getElementById("r4").removeAttribute("hidden");
 
} else {
 
} else {
Line 131: Line 131:
 
         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') {
+
if (obj.getAttribute("data-invalidmarkup") == "true") {
 
document.getElementById("r4").removeAttribute("hidden");
 
document.getElementById("r4").removeAttribute("hidden");
 
} else {
 
} else {

Revision as of 20:45, 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.