Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add carousel pattern #957

Merged
merged 15 commits into from
Jan 15, 2019
Merged

Add carousel pattern #957

Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e185d24
Carousel Pattern: draft 1 based on draft from Jon Gunderson
mcking65 Dec 12, 2018
5a0a681
Complete first draft of pattern description
mcking65 Dec 12, 2018
6cf4a4b
Revise keyboard interaction.
mcking65 Dec 13, 2018
f2c06f5
partial draft of roles, states, and props
mcking65 Dec 14, 2018
c473dc8
another draft of carousel roles, states, and props
mcking65 Dec 16, 2018
114d39d
another carousel props draft
mcking65 Dec 16, 2018
484bb8c
Another draft of props section of carousel
mcking65 Dec 16, 2018
e6e7f4d
Complete draft of carousel props section
mcking65 Dec 16, 2018
a33bcf2
minor carousel pattern edit
mcking65 Dec 16, 2018
c81e8b3
Changes from meeting feedback
mcking65 Dec 18, 2018
8856024
Fixes in response to review comments from @charmarkk
mcking65 Dec 18, 2018
60248e5
Add slide show to section title
mcking65 Dec 18, 2018
ee6154e
Revise description based on feedback from @jongund in issue #43.
mcking65 Dec 18, 2018
30e3806
Add guidance about rotation control position per feedback from @jongu…
mcking65 Dec 18, 2018
6f2f95e
Fix typo found by @annabbott in review.
mcking65 Jan 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 150 additions & 0 deletions aria-practices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,157 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
</ul>
</section>
</section>

<section class="widget" id="carousel">
<h3>Carousel (Image or Slide Rotator)</h3>
<p class="ednote">
This is a draft pattern that is being actively revised.
Please provide feedback in
<a href="https://github.com/w3c/aria-practices/issues/43">issue 43.</a>
</p>
<p>
A carousel presents a set of items, referred to as slides, by rotating, i.e., horizontally scrolling, a subset of the slides into view at a time.
Typically, one slide is made visible at a time, and rotation automatically starts when the page loads.
In some implementations, rotation automatically stops once all the slides have been displayed.
While a slide may contain any type of content, image carousels where each slide contains nothing more than a single image are common.
</p>
<p>
Ensuring all users, especially screen reader users, can control slide rotation is an essential accessibility feature of carousels.
If content is hidden and replaced while a screen reader user is reading it, the experience can be confusing and disorienting, especially if the user is not aware of the automatic slide rotation.
</p>
<p>Features needed to provide sufficient rotation control include:</p>
<ol>
<li>Rotation stops when keyboard focus enters the carousel. It does not restart unless the user explicitly requests it to do so.</li>
<li>Rotation is stopped whenever the mouse is hovering over the carousel.</li>
<li>A button for stopping and restarting rotation. This is particularly important for supporting assistive technologies operating in a mode that does not move either keyboard focus or the mouse.</li>
<li>Buttons for displaying the previous and next slides.</li>
<li>Optionally, a control, or group of controls, for choosing a specific slide to display. For example, the selection controls can be marked up as tabs in a tablist with the slide represented by a tabpanel element.</li>
</ol>

<section class="notoc">
<h4>Example</h4>
<p>
Development of an example for this pattern is tracked by
<a href="https://github.com/w3c/aria-practices/issues/458">issue 458.</a>
</p>
</section>

<section class="notoc">
<h4>Terms</h4>
<p>The following terms are used to describe components of a carousel.</p>
<dl>
<dt>Rotation Control</dt>
<dd>An interactive element that stops and starts automatic slide rotation.</dd>
<dt>Next Slide Control</dt>
<dd>An interactive element, often styled as an arrow, that displays the next slide in the rotation sequence.</dd>
<dt>Previous Slide Control</dt>
<dd>An interactive element, often styled as an arrow, that displays the previous slide in the rotation sequence.</dd>
<dt>Slide Picker Controls</dt>
<dd>A group of elements, often styled as small dots, that enable the user to pick a specific slide in the rotation sequence to display.</dd>
</dl>
</section>

<section class="notoc">
<h4>Keyboard Interaction</h4>
<ul>
<li>
Automatic slide rotation stops when any element in the carousel receives keyboard focus.
It does not resume unless the user activates the rotation control.
</li>
<li><kbd>Tab</kbd> and <kbd>Shift + Tab</kbd>: Move focus through the interactive elements of the carousel as specified by the page tab sequence; no special scripting is necessary.</li>
<li>Button elements implement the keyboard interaction defined in the <a href="#button">button pattern</a>.</li>
<li>If tab elements are used for slide picker controls, they implement the keyboard interaction defined in the <a href="#tabpanel">Tabs Pattern.</a></li>
</ul>
</section>

<section class="notoc">
<h4>WAI-ARIA Roles, States, and Properties</h4>
<p>This section describes the element composition for three styles of carousels:</p>
<ul>
<li>Basic: Has rotation , previous slide, and next slide controls but no slide picker controls.</li>
<li>Tabbed: Has basic controls plus a single tab stop for slide picker controls implemented using the <a href="#tabpanel">tabs pattern.</a></li>
<li>Grouped: Has basic controls plus a series of tab stops in a group of slide picker controls where each control implements the <a href="#button">button pattern.</a> Because each slide selector button adds an element to the page tab sequence, this style is the least friendly for keyboard users.</li>
</ul>
<h5>Basic carousel elements</h5>
<ul>
<li>
A carousel container element that encompasses all components of the carousel, including both carousel controls and slides,
has either role <a href="#region" class="role-reference">region</a>
or role <a href="#group" class="role-reference">group.</a>
The most appropriate role for the carousel container depends on the information architecture of the page.
See the <a href="#aria_landmark">landmark regions guidance</a> to determine whether the carousel warrants being designated as a landmark region.
</li>
<li>The carousel container has the <a href="#aria-roledescription" class="property-reference">aria-roledescription</a> property set to <code>carousel</code>.</li>
<li>
If the carousel has a visible label, its accessible label is provided by the property
<a href="#aria-labelledby" class="property-reference" >aria-labelledby</a> on the carousel container set to the ID of the element containing the visible label.
Otherwise, an accessible label is provided by the property <a href="#aria-label" class="property-reference">aria-label</a> set on the carousel container.
Note that since the <code>aria-roledescription</code> is set to &quot;carousel&quot;, the label does not contain the word &quot;carousel&quot;.
</li>
<li>The rotation control, next slide control, and previous slide control are either native button elements (recommended) or implement the <a href="#button">button pattern</a>.</li>
<li>
The rotation control has an accessible label provided by either its inner text or <a href="#aria-label" class="property-reference">aria-label</a>.
The label changes to match the action the button will perform, e.g., &quot;Stop slide rotation&quot; or &quot;Start slide rotation&quot;.
A label that changes when the button is activated clearly communicates both that slide content can change automatically and when it is doing so.
Note that since the label changes, the rotation control does not have any states, e.g., <code>aria-pressed</code>, specified.
</li>
<li>Each slide container has role <a href="#group" class="role-reference">group</a> with the property <a href="aria-roledescription" class="property-reference">aria-roledescription</a> set to <code>slide</code>.</li>
<li>Each slide has an accessible name:
<ul>
<li>
If a slide has a visible label, its accessible label is provided by the property
<a href="#aria-labelledby" class="property-reference" >aria-labelledby</a>
on the slide container set to the ID of the element containing the visible label.
</li>
<li>
Otherwise, an accessible label is provided by the property
<a href="#aria-label" class="property-reference">aria-label</a>
set on the slide container.
</li>
<li>
If unique names that identify the slide content are not available, a number and set size can serve as a meaningful alternative, e.g., &quot;3 of 10&quot;.
Note: Normally, including set position and size information in an accessible name is not appropriate.
An exception is helpful in this implementation because group elements do not support <a href="#aria-setsize" class="property-reference">aria-setsize</a> or <a href="#aria-posinset" class="property-reference">aria-posinset</a>.
The tabbed carousel implementation pattern does not have this limitation.
</li>
<li>Note that since the <code>aria-roledescription</code> is set to &quot;slide&quot;, the label does not contain the word &quot;slide&quot;.</li>
</ul>
</li>
</ul>
<h5>Tabbed Carousel Elements</h5>
<p>The structure of a tabbed carousel is the same as a basic carousel except that:</p>
<ul>
<li>
Each slide container has role <a href="#tabpanel" class="role-reference">tabpanel</a> in lieu of <code>group</code>,
and it does not have the <code>aria-roledescription</code> property.
</li>
<li>It has slide picker controls implemented using the <a href="#tabpanel">tabs pattern</a> where:
<ul>
<li>Each control is a <code>tab</code> element, so activating a tab displays the slide associated with that tab.</li>
<li>The accessible name of each <code>tab</code> indicates which slide it will display by including the name or number of the slide, e.g., &quot;Slide 3&quot;. Slide names are preferable if each slide has a unique name.</li>
<li>The set of controls is grouped in a <code>tablist</code> element with an accessible name provided by the value of <a href="#aria-label" class="property-reference">aria-label</a> that identifies the purpose of the tabs, e.g., &quot;Choose slide to display&quot;.</li>
<li>The <code>tab</code>, <code>tablist</code>, and <code>tabpanel</code> implement the properties specified in the <a href="#tabpanel">tabs pattern</a>.</li>
</ul>
</li>
</ul>
<h5>Grouped Carousel Elements</h5>
<p>A grouped carousel has the same structure as a basic carousel, but it also includes slide picker controls where:</p>
<ul>
<li>The set of slide picker controls is contained in an element with role <a href="#group" class="role-reference">group</a>.</li>
<li>The group containing the picker controls has an accessible label provided by the value of <a href="#aria-label" class="property-reference">aria-label</a> that identifies the purpose of the controls, e.g., &quot;Choose slide to display&quot;.</li>
<li>Each picker control is a native button element (recommended) or implements the <a href="#button">button pattern.</a></li>
<li>
The accessible name of each picker button matches the name of the slide it displays.
One technique for accomplishing this is to set <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> to a value that references the slide <code>group</code> element.
</li>
<li>
The picker button representing the currently displayed slide has the property <a href="#aria-disabled" class="property-reference">aria-disabled</a> set to <code>true</code>.
Note: <code>aria-disabled</code> is preferable to the HTML <code>disabled</code> attribute because this is a circumstance where screen reader users benefit from the disabled button being included in the page <kbd>Tab</kbd> sequence.
</li>
</ul>
</section>
</section>

<section class="widget" id="checkbox">
<h3>Checkbox</h3>
<p>WAI-ARIA supports two types of <a href="#checkbox" class="role-reference">checkbox</a> widgets:</p>
Expand Down