From e07aa781caf888fd150c064bd6f5a03afe3004bf Mon Sep 17 00:00:00 2001 From: Matt King Date: Thu, 16 Feb 2017 07:31:28 -0800 Subject: [PATCH] Include Optional Region Role in Accordion Pattern modified aria-practices.html To address feedback from @annabbott and @jasonkiss in issue #210. Added the following text to the roles, states, and properties section of the accordion pattern: > Optionally, each element that serves as a container for panel content has role region and aria-labelledby with a value that refers to the button that controls display of the panel. > * Avoid using the region role in circumstances that create landmark region proliferation, e.g., in an accordion that contains more than approximately 6 panels that can be expanded at the same time. > * Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion. --- aria-practices.html | 49 +++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index ff76061f2e..feb6be8ec6 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -75,73 +75,59 @@

Generally Applicable Keyboard Recommendations

Accordion (Sections With Show/Hide Functionality)

-

An accordion is a vertically stacked set of elements, such as labels or thumbnails, that allow the user to toggle the display of sections of content. Each labeling element can be expanded or collapsed to reveal or hide its associated content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

-

Terms for understanding accordions include:

-
Accordion Header:
Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content.
Accordion Panel:
Section of content associated with an accordion header.
-

In some accordions, there are additional elements that are always visible adjacent to the accordion header. For instance, a menubutton may accompany each accordion header to provide access to actions that apply to that section. And, in some cases, a snippet of the hidden content may also be visually persistent.

-

Keyboard Interaction

-
  • Enter or Space: -
    • When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
      • -
    • When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
    • -
  • Down Arrow (Optional): If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
    • -
  • Up Arrow (Optional): If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
    • -
  • Home (Optional): When focus is on an accordion header, moves focus to the first accordion header.
    • -
  • End (Optional): When focus is on an accordion header, moves focus to the last accordion header.
    • -
  • Control + Page Down (Optional): If focus is inside an accordion panel or on an accordion header, moves focus to the next accordion header. If focus is in the last accordion header or panel, either does nothing or moves focus to the first accordion header.
    • -
  • Control + Page Up (Optional): If focus is inside an accordion panel, moves focus to the header for that panel. If focus is on an accordion header, moves focus to the previous accordion header. @@ -149,38 +135,49 @@

    Keyboard Interaction

-

WAI-ARIA Roles, States, and Properties:

-
  • - Each accordion header is contained in an element with role button. - The button label is the label for the associated accordion panel. + The title of each accordion header is contained in an element with role button.
    • -
  • Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page. - If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used. - The button element is the only element inside the heading element. - That is, if there are other visually persistent elements, they are not included inside the heading element. +
      +
    • If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used.
      • +
    • + The button element is the only element inside the heading element. + That is, if there are other visually persistent elements, they are not included inside the heading element. +
      • +
    • -
  • If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded set to true. If the panel is not visible, aria-expanded is set to false.
    • -
  • The accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
    • -
  • If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header button element has aria-disabled set to true.
    • +
  • + Optionally, each element that serves as a container for panel content has role + region and + aria-labelledby + with a value that refers to the button that controls display of the panel. +
      +
    • + Avoid using the region role in circumstances that create landmark region proliferation, + e.g., in an accordion that contains more than approximately 6 panels that can be expanded at the same time. +
      • +
    • + Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion. +
      • +
    +
-

Example

Accordion Example: demonstrates a form divided into three sections using an accordion to show one ssection at a time.