Skip to content

Commit

Permalink
Accordion pattern initial draft + example implementation
Browse files Browse the repository at this point in the history 
Modified aria-practices-DeletedSectionsArchive.html: Removed the accordion section.

Modified aria-practices.html:
* Added accordion section that was removed from aria-practices-DeletedSectionsArchive.html.
* Rewrote    the accordion section.

Integrated example code from Bryan Garaventa (@accdc):
Merged  Bryan's HTML into a template file and created the new file:the file
examples/accordion/accordion1.html

Added the following new files from Bryan:
examples/accordion/css/OpenSans-Bold-webfont.eot
examples/accordion/css/OpenSans-Bold-webfont.svg
examples/accordion/css/OpenSans-Bold-webfont.ttf
examples/accordion/css/OpenSans-Bold-webfont.woff
examples/accordion/css/OpenSans-Italic-webfont.eot
examples/accordion/css/OpenSans-Italic-webfont.svg
examples/accordion/css/OpenSans-Italic-webfont.ttf
examples/accordion/css/OpenSans-Italic-webfont.woff
examples/accordion/css/OpenSans-Light-webfont.eot
examples/accordion/css/OpenSans-Light-webfont.svg
examples/accordion/css/OpenSans-Light-webfont.ttf
examples/accordion/css/OpenSans-Light-webfont.woff
examples/accordion/css/anton-webfont.eot
examples/accordion/css/anton-webfont.svg
examples/accordion/css/anton-webfont.ttf
examples/accordion/css/anton-webfont.woff
examples/accordion/css/customize.css
examples/accordion/css/global.css
examples/accordion/css/opensans-regular-webfont.eot
examples/accordion/css/opensans-regular-webfont.svg
examples/accordion/css/opensans-regular-webfont.ttf
examples/accordion/css/opensans-regular-webfont.woff
examples/accordion/img/accordion/left.png
examples/accordion/img/accordion/right.png
examples/accordion/img/accordion/sprite.svg
examples/accordion/img/keyboard.svg
examples/accordion/img/sprite.svg
examples/accordion/js/helpers.js
examples/accordion/js/setup.js
  • Loading branch information
@mcking65
mcking65 committed Aug 29, 2016
1 parent aeab2e1 commit 1ecb9be
Show file tree
Hide file tree
Showing 32 changed files with 9,715 additions and 164 deletions.
162 changes: 0 additions & 162 deletions aria-practices-DeletedSectionsArchive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,168 +169,6 @@
<section id="aria_ex">
<h2>Design Patterns and Widgets</h2>

<section class="widget" id="accordion">
<h3>Accordion</h3>

<p class="note">This section has not been updated since it was integrated from the WAI-ARIA Authoring Practices Guide (<abbr title="Authoring Practices Guide">APG</abbr>) version 1.0 -- an APG task force review is pending.</p>

<p>
An accordion component is a collection of expandable panels associated with a common outer container.
Panels consist of a header and an associated content region or panel.
The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy.
The general look is similar to a tree where each root tree node is an expandable accordion header.
The user navigates and makes the contents of each panel visible (or not) by interacting with the Accordion Header.
Terms for understanding accordions include:
</p>

<dl>
<dt>accordion component:</dt>
<dd>Collection of panels within a common outer pane.</dd>
<dt>accordion header:</dt>
<dd>Label area of an accordion panel. This is where you find the control to expand or collapse the panels.</dd>
<dt>accordion panel:</dt>
<dd>Contents area associated with an accordion header.</dd>
</dl>

<section class="notoc">
<h4>Keyboard Interaction</h4>

<ul>
<li>
<kbd>Tab</kbd> - When focus is on an accordion header, pressing the <kbd>Tab</kbd> key moves focus in the following manner:
<ol>
<li>If interactive glyphs or menus are present in the accordion header, focus moves to each in order. </li>
<li>When the corresponding panel is expanded (its <a href="#aria-expanded" class="state-reference">aria-expanded</a> state is 'true'), then focus moves to the first focusable element in the panel. </li>
<li>If the panel is collapsed (its aria-expanded state is 'false' or missing), OR, when the last interactive element of a panel is reached, the next <kbd>Tab</kbd> key press moves focus as follows:
<ul>
<li>If a subsequent accordion panel is already expanded, focus moves to the first focusable element in this subsequent panel.</li>
<li>If no subsequent accordion panel is expanded, focus moves to the first focusable element outside the accordion component.</li>
</ul>
</li>
</ol>
</li>
<li>
<kbd>Left arrow</kbd>
<ul>
<li>When focus is on the accordion header, a press of up/left arrow keys moves focus to the previous logical accordion header.</li>
<li>When focus reaches the first header, further up/left arrow key presses optionally wrap to the first header.</li>
</ul>
</li>
<li>
<kbd>Right arrow</kbd>
<ul>
<li>When focus is on the accordion header, a press of down/right moves focus to the next logical accordion header.</li>
<li>When focus reaches the last header, further down/right arrow key presses optionally wrap to the first header.</li>
</ul>
</li>
<li>
<kbd>Up arrow</kbd> - behaves the same as left arrow
</li>
<li>
<kbd>Down arrow</kbd> - behaves the same as right arrow
</li>
<li>
<kbd>Control + Up Arrow</kbd> - Moves focus from anywhere in the accordion content to its associated accordion header or tab respectively.
</li>
<li>
<kbd>Control + Page Up</kbd> -
<ul>
<li>When focus is inside of an accordion pane, pressing <kbd>Control + Page Up</kbd> moves focus to the accordion header of the previous accordion pane.</li>
<li>When focus is in the first accordion header content, pressing <kbd>Control + Page Up</kbd> optionally moves focus to the last accordion header.</li>
<li>Focus will simply move to the header and will require <kbd>Enter/Space</kbd> to expand/collapse the accordion pane.</li>
</ul>
</li>
<li>
<kbd>Control + Page Down</kbd> -
<ul>
<li>When focus is inside of an accordion pane, pressing <kbd>Control + Page Down</kbd> moves focus to the header of the accordion pane.</li>
<li>When focus is in the last accordion header content, pressing <kbd>Control + Page Down</kbd> optionally moves focus to the first accordion header.</li>
<li>In the case of an accordion, focus simply moves to the header and requires <kbd>Enter/Space</kbd> to expand/collapse the accordion pane.</li>
</ul>
</li>
<li>
<kbd>End</kbd> - When focus is on the accordion header, an <kbd>End</kbd> key press moves focus to the last accordion header.
</li>
<li>
<kbd>Home</kbd> - When focus is on the accordion header, a <kbd>Home</kbd> key press moves focus to the first accordion header.
</li>
<li>
<kbd>Enter/Space</kbd> - When focus is on an accordion header, pressing <kbd>Enter/Space</kbd> toggles the expansion of the corresponding panel.
<ul>
<li>If collapsed, the panel is expanded, and its aria-expanded state is set to 'true'.</li>
<li>If expanded, the panel is collapsed and its aria-expanded state is set to 'false'.</li>
</ul>
</li>
<li>
<kbd>Shift + Tab</kbd> - Generally the reverse of <kbd>Tab</kbd>.
</li>
<li>
<kbd>Alt + Delete</kbd> -
<ul>
<li>
When deletion is allowed, with focus anywhere within the tab panel or tab, pressing <kbd>Alt + Delete</kbd> will delete the current tab and tab panel from the tabbed interface control.
If additional tabs remain in the tabbed interface, focus goes to the next tab in the tab list.
If no additional tabs remain, then focus moves to the last place that held focus in the previous tab panel.
</li>
<li>
An alternative to providing a keystroke to close a tab is to provide a context menu that is associated with the tab title.
When focus is on the tab, pressing <kbd>Shift + F10</kbd> or pressing the right mouse button will open a context menu with the close choice.
</li>
<li>A warning should be given to the user before allowing the delete to occur.</li>
</ul>
</li>
</ul>
<p>
In Firefox, pressing <kbd>Control + Page Up</kbd> / <kbd>Control + Page Down</kbd> moves between browser tabs.
Firefox also supports <kbd>Control + Tab</kbd> and <kbd>Control + Shift + Tab</kbd> to move between tabs.
Internet Explorer 7 also uses <kbd>Control + Tab</kbd> and <kbd>Control + Shift + Tab</kbd>.
There may be advantages to using <kbd>Control + Page Up</kbd>/<kbd>Page Down</kbd> as the keys to change tabs; it is a recognizable keystroke to at least Firefox users and it is also supported by the Windows operating system to move between panels in a tabbed dialog.
</p>
<p>You should be aware of two issues with using <kbd>Control + Page Up</kbd>/<kbd>Page Down</kbd>:</p>
<ul>
<li>
The first arises when the user is within a tabbed interface control on a Web page.
Here they can not easily switch browser tabs without first moving focus outside of the tabbed interface control.
This may be acceptable.
</li>
<li>
The second arises when the entire web page is a tabbed interface control.
In this case the user could not switch browser tabs unless the control on the web page ignored the <kbd>Control + Page Up</kbd>/<kbd>Page Down</kbd> keypress (and thus letting the browser access it) when the first or last tab was reached.
</li>
</ul>
</section>

<section class="notoc">
<h4>WAI-ARIA Roles, States, and Properties:</h4>

<ul>
<li>
The accordion component must have a role of <a href="#tablist" class="role-reference">tablist</a> and have <a href="#aria-multiselectable" class="property-reference">aria-multiselectable</a>=&quot;true&quot;
This will enable an assistive technology, such as screen reader, to convey that the tablist is an accordion or a multi selectable tablist.
This will also tell the user that the keyboard navigation matches an accordion and not a tablist.
</li>
<li>Contained within the tablist is a set of tab/tabpanel pairs.</li>
<li>Each header tab in the tablist has a role of <a href="#tablist" class="role-reference">tab</a>.</li>
<li>The accordion panel uses the role <a href="#tabpanel" class="role-reference">tabpanel</a> and should have an <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> relationship referencing the corresponding header having a role of <a href="#tablist" class="role-reference">tab</a></li>
<li>The tabpanel is considered a grouping for all content consisting of that tabpanel.</li>
<li>An accordion should manage the expanded/collapsed state of each tab by maintaining its <a href="#aria-expanded" class="state-reference">aria-expanded</a> state.</li>
<li>An accordion should manage the selected state of each tab by maintaining its <code class="state-reference">aria-selected</code> state.</li>
<li>An accordion should convey the visibility of each tabpanel by maintaining its <a href="#aria-hidden" class="state-reference">aria-hidden</a> state.</li>
</ul>
</section>

<section class="notoc">
<h4>Example</h4>

<p class="note">
Any examples referenced here that are hosted outside www.w3.org may have changed and may not accurately exemplify the guidance in this section.
The APG task force is developing examples for APG version 1.1 that will be directly incorporated into the guide.
</p>

<p><a href="http://www.oaa-accessibility.org/examplep/accordian1/" target="_blank">Open Ajax Alliance Accordion</a></p>
</section>
</section>

<section class="widget" id="autocomplete">
<h3>Auto Complete</h3>
<p class="note">This section has not been updated since it was integrated from APG
Expand Down
72 changes: 70 additions & 2 deletions aria-practices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,8 +245,76 @@ <h3>Generally Applicable Keyboard Recommendations </h3>
</section>

<section class="widget" id="accordion">
<h3>Accordion</h3>
<p>Drafting this section is <a href="https://github.com/w3c/aria-practices/issues/53">issue 53</a>. </p>
<h3>Accordion (Sections With Show/Hide Functionality)</h3>
<p class="note">This section is work in progress. Provide feedback in <a href="https://github.com/w3c/aria-practices/issues/53">issue 53</a>.</p>
<p>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.</p>
<p>Terms for understanding accordions include:</p>
<dl>
<dt>Accordion Header:</dt>
<dd>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. </dd>
<dt>Accordion Panel:</dt>
<dd>Section of content associated with an accordion header.</dd>
</dl>
<p>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. </p>

<section class="notoc">
<h4>Keyboard Interaction</h4>
<ul>
<li><kbd>Enter</kbd> or <kbd>Space</kbd>:
<ul>
<li>When focus is on the accordion header for a collapsed panel,
expands its accordion panel. If the implementation allows only one
panel to be expanded and another panel is expanded, collapses that
panel.</li>
<li>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.</li>
</ul>
<li><kbd>Control + Page Down</kbd> (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.</li>
<li><kbd>Control + Page Up</kbd> (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. If focus is
on the first accordion header, either does nothing or moves focus to the
last accordion header.</li>
<li><kbd>Home</kbd> (Optional): When focus is on an accordion header, moves
focus to the first accordion header.</li>
<li><kbd>End</kbd> (Optional): When focus is on an accordion header, moves
focus to the last accordion header.</li>
</ul>
</section>

<section class="notoc">
<h4>WAI-ARIA Roles, States, and Properties:</h4>
<ul>
<li>Each accordion header is contained in an element with role <a href="#button" class="role-reference">button</a>.
The button label is the label for the associated accordion panel.</li>
<li>The accordion header <code>button</code> element has <a href="aria-controls" class="property-reference">aria-controls</a> set to the ID of the element containing the accordion panel content. </li>
<li>If the accordion panel associated with an accordion header is visible, the header <code>button</code> element has <a href="#aria-expanded" class="state-reference">aria-expanded</a> set to <code>true</code>.
If the panel is not visible, <a href="#aria-expanded" class="state-reference">aria-expanded</a> is set to <code>false</code>. </li>
<li>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 <code>button</code> element has <a href="#aria-disabled" class="state-reference">aria-disabled</a> set to <code>true</code>. </li>
<li>Each accordion header <code>button</code> is wrapped in an element with role <a href="#heading" class="role-reference">heading</a> that has a value set for <a href="#aria-level" class="property-reference">aria-level</a> that is appropriate for the information architecture of the page.
If the native host language has an element with an implicit <code>heading</code> and <code>aria-level</code>, such as an HTML heading tag, a native host language element may be used.
The <code>button</code> element is the only element inside the <code>heading</code> element.
That is, if there are other visually persistent elements, they are not included inside the <code>heading</code> element. </li>
</ul>
</section>

<section class="notoc">
<h4>Example</h4>
<p><a href="examples/accordion/accordion1.html">Accordion Example</a>: demonstrates a form divided into three sections using an accordion to show one ssection at a time. </p>
</section>
</section>

<section class="widget" id="alert">
Expand Down
Loading

1 comment on commit 1ecb9be

@accdc
Copy link

@accdc accdc commented on 1ecb9be Aug 29, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yay!

Please sign in to comment.