From e185d24013b8fd5cd3ae55bfe6b3f4f1d4c9bafd Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 12 Dec 2018 10:23:03 -0800 Subject: [PATCH 01/15] Carousel Pattern: draft 1 based on draft from Jon Gunderson --- aria-practices.html | 104 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) diff --git a/aria-practices.html b/aria-practices.html index 4a2286b219..7302225a28 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -477,7 +477,111 @@

WAI-ARIA Roles, States, and Properties

+ + +

Checkbox

WAI-ARIA supports two types of checkbox widgets:

From 5a0a681be6e274ae88be90c9e1fc196554742497 Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 12 Dec 2018 15:37:04 -0800 Subject: [PATCH 02/15] Complete first draft of pattern description --- aria-practices.html | 37 ++++++++++--------------------------- 1 file changed, 10 insertions(+), 27 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 7302225a28..2a096b642c 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -492,34 +492,17 @@

Carousel (Image or Slide Rotator)

While a slide may contain any type of content, image carousels where each slide contains nothing more than a single image are common.

- Ensuring all users, especially screen reader users, can control slide rotation is an essential accessibility feature of carousels. - If a slide is hidden while a screen reader user is reading it, the screen reader will lose its point of regard, typically forcing the screen reader's reading cursor to the top of the page. - this is particularly disorienting if the user is not aware of the automatic rotation. -

-

- The requirements for controlling the slide rotation include pausing rotation on keyboard focus and pointer hover, an explicit pause button, previous button and a next slide buttons. Optionally a tablist can be used to provide additional control over the navigation of the slides. + 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.

-
-
Pause Rotation
-
The auto-rotation must stop when keyboard focus is on a slide in the carousel. Keyboard only and screen reader users will be disoriented if keyboard focus disappears when the slides change.
-
The auto-rotation must stop when the pointer hovers over an image in the carousel.
- -
Pause Button
-
Used to stop the auto-rotation of slides, and can optionally be a toggle to restart the rotation of slides
-
This is important to inform screen reader users using virtual reading modes to switch to application mode to stop the rotation of slides.
- -
Previous Slide Button
-
Used to move to the previous slide in the set of slides.
-
The label for the previous button should contain information on the slide position of the previous slide in the sequence of slides and the total number of slides (e.g. Slide 3 of 6).
- -
Next Slide Button
-
Used to move to the next slide in the set of slides.
-
The label for the next button should contain information on the slide position of the previous slide in the sequence of slides and the total number of slides (e.g. Slide 5 of 6).
- -
tablist Widget (optional)
-
Used to provide direct navigation to individual slides when a carousel provides visual controls indicating number of slides and direct navigation to a slide.
-
The set of controls for navigating slides can be modelled using the tablist pattern.
-
+

Features needed to provide sufficient rotation control include:

+
    +
  1. Rotation pauses when keyboard focus enters the carousel.
    2. +
  2. Rotation pauses when the mouse hovers over the carousel.
    3. +
  3. A button for pausing 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.
    4. +
  4. Buttons for displaying the previous and next slides.
    5. +
  5. 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.
    6. +

Example

From 6cf4a4bf10667b82e13291fbf774b6f2f088f372 Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 12 Dec 2018 16:48:00 -0800 Subject: [PATCH 03/15] Revise keyboard interaction. --- aria-practices.html | 39 ++++++++------------------------------- 1 file changed, 8 insertions(+), 31 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 2a096b642c..0218462cf0 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -497,9 +497,9 @@

Carousel (Image or Slide Rotator)

Features needed to provide sufficient rotation control include:

    -
  1. Rotation pauses when keyboard focus enters the carousel.
    2. -
  2. Rotation pauses when the mouse hovers over the carousel.
    3. -
  3. A button for pausing 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.
    4. +
  4. Rotation stops when keyboard focus enters the carousel. It does not restart unless the user explicitly requests it to do so.
    5. +
  5. Rotation is stopped whenever the mouse is hovering over the carousel.
    6. +
  6. 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.
  7. Buttons for displaying the previous and next slides.
  8. 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.
@@ -514,38 +514,15 @@

Example

Keyboard Interaction

- -

Moving keyboard focus to any interactive element immediately stops slide rotation. Automated slide rotation should not resume unless explicitly requested by the user (e.g. through an optional resume rotation button)

- -

For the pause, previous and next buttons:

  • - Tab: The tab sequence begins with the pause button, next the previous slide button, then to interactive content in the slide and then to the next slide button. -
    • -
  • - Enter or Space: Activates the previous or next button rotating in new slide content or pauses the rotation of the slides. + Automatic slide rotation stops when any element in the carousel receives keyboard focus. + It does not resume unless the user activates the control for starting and stopping rotation.
    • +
  • Tab and Shift + Tab: Move focus through the carousel as specified by the page tab sequence; no special scripting is necessary.
    • +
  • Button elements implement the keyboard interaction defined in the button pattern.
    • +
  • If tabs are used for slide selection, they implement the keyboard interaction defined in the Tabs Pattern.
-

- -

For the optional tablist:

-
    -
  • - Tab: The tab sequence begins with the pause button, next the tablist, the interactive slide content, previous slide button, and then to the next slide button. Keyboard focus moves to the tab element representing the current slide. - When the tablist has keyboard focus, moves focus to the interactive slide content. -
    • -
  • - Left Arrow: moves focus to the previous tab (i.e. slide). - If focus is on the first tab, moves focus to the last tab. -
    • -
  • - Right Arrow: Moves focus to the next tab (i.e. slide). - If focus is on the last tab element, moves focus to the first tab. -
    • -
  • Home (Optional): Moves focus to the first tab (i.e. slide).
    • -
  • End (Optional): Moves focus to the last tab (i.e. slide).
    • -
-

From f2c06f5489963efba23f98aecbbae17f3c5c1637 Mon Sep 17 00:00:00 2001 From: Matt King Date: Fri, 14 Dec 2018 01:43:28 -0800 Subject: [PATCH 04/15] partial draft of roles, states, and props --- aria-practices.html | 77 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 64 insertions(+), 13 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 0218462cf0..05295905e6 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -511,35 +511,86 @@

Example

issue 458.

+ +
+

Terms

+

The following terms are used to describe components of a carousel.

+
+
Rotation Control
+
An interactive element that stops and starts automatic slide rotation.
+
Next Slide Control
+
An interactive element, often styled as an arrow, that displays the next slide in the rotation sequence.
+
Previous Slide Control
+
An interactive element, often styled as an arrow, that displays the previous slide in the rotation sequence.
+
Slide Selection Controls
+
A group of elements, often styled as small dots, that enable the user to display a specific slide in the rotation sequence.
+
+

Keyboard Interaction

  • Automatic slide rotation stops when any element in the carousel receives keyboard focus. - It does not resume unless the user activates the control for starting and stopping rotation. + It does not resume unless the user activates the rotation control.
    • -
  • Tab and Shift + Tab: Move focus through the carousel as specified by the page tab sequence; no special scripting is necessary.
    • +
  • Tab and Shift + Tab: Move focus through the interactive elements of the carousel as specified by the page tab sequence; no special scripting is necessary.
  • Button elements implement the keyboard interaction defined in the button pattern.
    • -
  • If tabs are used for slide selection, they implement the keyboard interaction defined in the Tabs Pattern.
    • +
  • If tab elements are used for slide selection controls, they implement the keyboard interaction defined in the Tabs Pattern.

WAI-ARIA Roles, States, and Properties

    -
  • The complementary or region landmark used to identify the carousel should have an accessible name (e.g. "Image Carousel") indicating it contains auto-rotating slides using aria-label.
    • -
  • The pause button uses aria-pressed="true" to indicate the rotator is paused.
    • -
  • The pause button uses aria-pressed="false" to indicate the rotator is automatically rotating.
    • -
  • The element that serves as the container the for the set of tabs has role tablist.
    • -
  • Each element that serves as a tab has role tab and is contained within the element with role tablist.
    • -
  • Each element that contains slide content for a tab has role tabpanel.
    • -
  • Each element with role tab has the property aria-controls referring to its associated tabpanel element.
    • -
  • The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
    • -
  • Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
    • +
  • + A carousel container element that encompasses all components of the carousel, including both carousel controls and slides, + has either role region + or role group. + The most appropriate role for the carousel container depends on the information architecture of the page. + See the landmark regions guidance to determine whether the carousel warrants being designated as a landmark region. +
    • +
  • The carousel container has the aria-roledescription property set to carousel.
    • +
  • + If the carousel has a visible label, its accessible label is provided by the property + aria-labelledby on the carousel container set to the ID of the element containing the visible label. + Otherwise, an accessible label is provided by the property aria-label set on the carousel container. + Note that since the aria-roledescription is set to "carousel", the label should not contain the word "carousel". +
    • +
  • + The rotation control, next slide control, and previous slide control are + either native button elements with an implicit role of button (recommended) + or implement the button pattern. +
    • +
  • + The rotation control has an accessible label provided by either its inner text or aria-label. + The label changes to match the action the button will perform, e.g., "Stop slide rotation" or "Start slide rotation". + 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., aria-pressed, specified. +
    • +
  • + If slide selection controls are present and are implemented as tab elements, + each slide container has the role tabpanel. + Otherwise, each slide container has the role group + and the property aria-roledescription set to slide. +
    • +
  • If slide selection controls are included, they are either: +
      +
    • + (Recommended) Implemented using the tabs pattern where each control is a tab element and the set of controls is grouped in a tablist element. + See the tabs pattern for the complete list of implementation details. +
      • +
    • Implemented as a group of buttons where: +
        +
      • The set of controls is contained in an element with role group and has a label.
        • +
      • Each selection control is a native button or implements the button pattern.
        • +
      • The button representing the currently display slide has aria-disabled.
        • +
      +
      • +
    +
-
From c473dc85d29e90113113fdd5e08335756f1657a4 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sat, 15 Dec 2018 16:13:35 -0800 Subject: [PATCH 05/15] another draft of carousel roles, states, and props --- aria-practices.html | 47 ++++++++++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 05295905e6..6353a17e2f 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -542,6 +542,13 @@

Keyboard Interaction

WAI-ARIA Roles, States, and Properties

+

This section describes the element composition for three styles of carousels:

+
    +
  • Basic: Has rotation , previous slide, and next slide controls but no slide selection controls.
    • +
  • Tabbed: Has basic controls plus a single tab stop for slide selection controls implemented using the tabs pattern.
    • +
  • Grouped: Has basic controls plus a group of tab stops for slide selection controls implemented using the button pattern. Because each slide adds an element to the page tab sequence, this is the least friendly style for keyboard users.
    • +
+
Basic carousel elements
  • A carousel container element that encompasses all components of the carousel, including both carousel controls and slides, @@ -568,28 +575,32 @@

    WAI-ARIA Roles, States, and Properties

    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., aria-pressed, specified.
    • +
  • Each slide container has role group with the property aria-roledescription set to slide.
    • +
+
Tabbed Carousel Elements
+

The structure of a tabbed carousel is the same as a basic carousel except that:

+
  • - If slide selection controls are present and are implemented as tab elements, - each slide container has the role tabpanel. - Otherwise, each slide container has the role group - and the property aria-roledescription set to slide. + Each slide container has role + tabpanel + and it does not have the aria-roledescription property.
    • -
  • If slide selection controls are included, they are either: -
      -
    • - (Recommended) Implemented using the tabs pattern where each control is a tab element and the set of controls is grouped in a tablist element. - See the tabs pattern for the complete list of implementation details. -
      • -
    • Implemented as a group of buttons where: -
        -
      • The set of controls is contained in an element with role group and has a label.
        • -
      • Each selection control is a native button or implements the button pattern.
        • -
      • The button representing the currently display slide has aria-disabled.
        • -
      -
      • -
    +
  • + It has slide selection controls implemented using the + tabs pattern + where each control is a tab element and the set of controls is grouped in a tablist + element. See the + tabs pattern + for the complete list of implementation details.
+
Grouped Carousel
+

A grouped carousel has the same structure as a basic carousel, but it also includes slide selection controls where:

+
    +
  • The set of controls is contained in an element with role group and has a label.
    • +
  • Each selection control is a native button or implements the button pattern.
    • +
  • The button representing the currently display slide has aria-disabled.
    • +
From 114d39d43599cb5dae3ac3d4838363457cb937e6 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sat, 15 Dec 2018 18:38:09 -0800 Subject: [PATCH 06/15] another carousel props draft --- aria-practices.html | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 6353a17e2f..fb809ac2ae 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -545,8 +545,8 @@

WAI-ARIA Roles, States, and Properties

This section describes the element composition for three styles of carousels:

  • Basic: Has rotation , previous slide, and next slide controls but no slide selection controls.
    • -
  • Tabbed: Has basic controls plus a single tab stop for slide selection controls implemented using the tabs pattern.
    • -
  • Grouped: Has basic controls plus a group of tab stops for slide selection controls implemented using the button pattern. Because each slide adds an element to the page tab sequence, this is the least friendly style for keyboard users.
    • +
  • Tabbed: Has basic controls plus a single tab stop for slide selection controls implemented using the tabs pattern.
    • +
  • Grouped: Has basic controls plus a series of tab stops in a group of slide selection controls where each control implements the button pattern. Because each slide selector button adds an element to the page tab sequence, this style is the least friendly for keyboard users.
Basic carousel elements
    @@ -581,17 +581,15 @@
    Tabbed Carousel Elements

    The structure of a tabbed carousel is the same as a basic carousel except that:

    • - Each slide container has role - tabpanel + Each slide container has role tabpanel, and it does not have the aria-roledescription property.
      • -
    • - It has slide selection controls implemented using the - tabs pattern - where each control is a tab element and the set of controls is grouped in a tablist - element. See the - tabs pattern - for the complete list of implementation details. +
    • It has slide selection controls implemented using the tabs pattern where: +
        +
      • Each control is a tab element; activating the tab displays the slide associated with that tab.
        • +
      • the set of controls is grouped in a tablist element.
        • +
      • The tab, tablist, and tabpanel implement the properties specified in the tabs pattern.
        • +
    Grouped Carousel
    From 484bb8c005da703bc125e05b3ed23f05c1bf1f1f Mon Sep 17 00:00:00 2001 From: Matt King Date: Sat, 15 Dec 2018 19:06:32 -0800 Subject: [PATCH 07/15] Another draft of props section of carousel --- aria-practices.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index fb809ac2ae..be0a13339c 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -586,8 +586,8 @@
    Tabbed Carousel Elements
  • It has slide selection controls implemented using the tabs pattern where:
      -
    • Each control is a tab element; activating the tab displays the slide associated with that tab.
      • -
    • the set of controls is grouped in a tablist element.
      • +
    • Each control is a tab element, so activating a tab displays the slide associated with that tab.
      • +
    • The set of controls is grouped in a tablist element.
    • The tab, tablist, and tabpanel implement the properties specified in the tabs pattern.
    • @@ -595,9 +595,10 @@
    Tabbed Carousel Elements
    Grouped Carousel

    A grouped carousel has the same structure as a basic carousel, but it also includes slide selection controls where:

      -
    • The set of controls is contained in an element with role group and has a label.
      • -
    • Each selection control is a native button or implements the button pattern.
      • -
    • The button representing the currently display slide has aria-disabled.
      • +
    • The set of slide selection controls is contained in an element with role group.
      • +
    • The group containing the controls has an accessible label provided by the value of aria-label that identifies the purpose of the controls, e.g., "Choose slide to display".
      • +
    • Each control is a native button element (recommended) or implements the button pattern.
      • +
    • The button representing the currently displayed slide has the property aria-disabled set to true. Note: aria-disabled is preferable to the HTML disabled attribute because it helpful for the disabled button to be included in the page tab sequence in this circumstance.
From e6e7f4dd4f2206876e3b5f698791d012455bca0d Mon Sep 17 00:00:00 2001 From: Matt King Date: Sat, 15 Dec 2018 19:22:43 -0800 Subject: [PATCH 08/15] Complete draft of carousel props section --- aria-practices.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index be0a13339c..8bf3644a21 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -522,8 +522,8 @@

Terms

An interactive element, often styled as an arrow, that displays the next slide in the rotation sequence.
Previous Slide Control
An interactive element, often styled as an arrow, that displays the previous slide in the rotation sequence.
-
Slide Selection Controls
-
A group of elements, often styled as small dots, that enable the user to display a specific slide in the rotation sequence.
+
Slide Picker Controls
+
A group of elements, often styled as small dots, that enable the user to pick a specific slide in the rotation sequence to display.
@@ -536,7 +536,7 @@

Keyboard Interaction

  • Tab and Shift + Tab: Move focus through the interactive elements of the carousel as specified by the page tab sequence; no special scripting is necessary.
  • Button elements implement the keyboard interaction defined in the button pattern.
    • -
  • If tab elements are used for slide selection controls, they implement the keyboard interaction defined in the Tabs Pattern.
    • +
  • If tab elements are used for slide picker controls, they implement the keyboard interaction defined in the Tabs Pattern.
    • @@ -544,9 +544,9 @@

    Keyboard Interaction

    WAI-ARIA Roles, States, and Properties

    This section describes the element composition for three styles of carousels:

    Basic carousel elements
    Tabbed Carousel Elements

    The structure of a tabbed carousel is the same as a basic carousel except that:

    -
    Grouped Carousel
    +
    Grouped Carousel Elements

    A grouped carousel has the same structure as a basic carousel, but it also includes slide picker controls where:

    From c81e8b376a00074e5979881dd31b79aa493a6fbe Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 17 Dec 2018 20:16:54 -0800 Subject: [PATCH 10/15] Changes from meeting feedback --- aria-practices.html | 46 +++++++++++++++++++++++++++++++-------------- 1 file changed, 32 insertions(+), 14 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index f467d476ba..61882e219a 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -486,23 +486,28 @@

    Carousel (Image or Slide Rotator)

    issue 43.

    - 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. + A carousel presents a set of items, referred to as slides, by rotating one or more of the slides into view. + Typically, only one slide is displayed at a time. While a slide may contain any type of content, image carousels where each slide contains nothing more than a single image are common. + In some implementations, rotation automatically starts when the page loads, and it may also automatically stop once all the slides have been displayed.

    - 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. + Ensuring all users can easily control and are not adversely effected by slide rotation is an essential aspect of making carousels accessible. + For instance, the screen reader experience can be confusing and disorienting if slides that are not visible on screen are incorrectly hidden, e.g., displayed off-screen. + Similarly, if slides rotate automatically and a screen reader user is not aware of the rotation, the user may read an element on slide one, execute the screen reader command for next element, and, instead of hearing the next element on slide one, hear an element from slide 2 without any knowledge that the element just announced is from an entirely new context.

    Features needed to provide sufficient rotation control include:

    -
      -
    1. Rotation stops when keyboard focus enters the carousel. It does not restart unless the user explicitly requests it to do so.
      2. -
    2. Rotation is stopped whenever the mouse is hovering over the carousel.
      3. -
    3. 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.
      4. +
      • Buttons for displaying the previous and next slides.
        • -
      • 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.
        • -
    +
  • Optionally, a control, or group of controls, for choosing a specific slide to display. For example, slide picker controls can be marked up as tabs in a tablist with the slide represented by a tabpanel element.
    • +
  • If the carousel can automatically rotate, it also: +
      +
    • Has 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.
      • +
    • Stops rotating when keyboard focus enters the carousel. It does not restart unless the user explicitly requests it to do so.
      • +
    • Stops rotating whenever the mouse is hovering over the carousel.
      • +
    +
    • +

    Example

    @@ -516,6 +521,8 @@

    Example

    Terms

    The following terms are used to describe components of a carousel.

    +
    Slide
    +
    A single content container within a set of content containers that hold the content to be presented by the carousel.
    Rotation Control
    An interactive element that stops and starts automatic slide rotation.
    Next Slide Control
    @@ -531,11 +538,14 @@

    Terms

    Keyboard Interaction

    • - Automatic slide rotation stops when any element in the carousel receives keyboard focus. + If the carousel has an auto-rotate feature, automatic slide rotation stops when any element in the carousel receives keyboard focus. It does not resume unless the user activates the rotation control.
      • -
    • Tab and Shift + Tab: Move focus through the interactive elements of the carousel as specified by the page tab sequence; no special scripting is necessary.
      • -
    • Button elements implement the keyboard interaction defined in the button pattern.
      • +
    • Tab and Shift + Tab: Move focus through the interactive elements of the carousel as specified by the page tab sequence -- scripting for Tab is not necessary.
      • +
    • + Button elements implement the keyboard interaction defined in the button pattern. + Note: Activating the rotation control, next slide, and previous slide do not move focus, so users may easily repetitively activate them as many times as desired. +
    • If tab elements are used for slide picker controls, they implement the keyboard interaction defined in the Tabs Pattern.
    @@ -593,6 +603,14 @@
    Basic carousel elements
  • Note that since the aria-roledescription is set to "slide", the label does not contain the word "slide".
    • +
  • + Optionally, an element wrapping the set of slide elements has aria-atomic set to false + and aria-live set to: +
      +
    • off: ifthe the carousel is automatically rotating. +
    • polite: if the carousel is NOT automatically rotating. +
    +
    • Tabbed Carousel Elements

    The structure of a tabbed carousel is the same as a basic carousel except that:

    From 88560246147ee0df03c0dd67882face159127de2 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 17 Dec 2018 21:35:56 -0800 Subject: [PATCH 11/15] Fixes in response to review comments from @charmarkk --- aria-practices.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 61882e219a..14f81f8a61 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -554,7 +554,7 @@

    Keyboard Interaction

    WAI-ARIA Roles, States, and Properties

    This section describes the element composition for three styles of carousels:

      -
    • Basic: Has rotation , previous slide, and next slide controls but no slide picker controls.
      • +
    • Basic: Has rotation, previous slide, and next slide controls but no slide picker controls.
    • Tabbed: Has basic controls plus a single tab stop for slide picker controls implemented using the tabs pattern.
    • Grouped: Has basic controls plus a series of tab stops in a group of slide picker controls where each control implements the button pattern. Because each slide selector button adds an element to the page tab sequence, this style is the least friendly for keyboard users.
    @@ -600,7 +600,7 @@
    Basic carousel elements
    An exception is helpful in this implementation because group elements do not support aria-setsize or aria-posinset. The tabbed carousel implementation pattern does not have this limitation. -
  • Note that since the aria-roledescription is set to "slide", the label does not contain the word "slide".
    • +
  • Note that since the aria-roledescription is set to "slide", the label does not contain the word "slide."
  • @@ -623,7 +623,7 @@
    Tabbed Carousel Elements
    • Each control is a tab element, so activating a tab displays the slide associated with that tab.
    • The accessible name of each tab indicates which slide it will display by including the name or number of the slide, e.g., "Slide 3". Slide names are preferable if each slide has a unique name.
      • -
    • The set of controls is grouped in a tablist element with an accessible name provided by the value of aria-label that identifies the purpose of the tabs, e.g., "Choose slide to display".
      • +
    • The set of controls is grouped in a tablist element with an accessible name provided by the value of aria-label that identifies the purpose of the tabs, e.g., "Choose slide to display."
    • The tab, tablist, and tabpanel implement the properties specified in the tabs pattern.
    • @@ -632,7 +632,7 @@
    Grouped Carousel Elements

    A grouped carousel has the same structure as a basic carousel, but it also includes slide picker controls where:

    • The set of slide picker controls is contained in an element with role group.
      • -
    • The group containing the picker controls has an accessible label provided by the value of aria-label that identifies the purpose of the controls, e.g., "Choose slide to display".
      • +
    • The group containing the picker controls has an accessible label provided by the value of aria-label that identifies the purpose of the controls, e.g., "Choose slide to display."
    • Each picker control is a native button element (recommended) or implements the button pattern.
    • The accessible name of each picker button matches the name of the slide it displays. From 60248e58273794402d4d848cfdb8e33f014d14f0 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 17 Dec 2018 22:02:00 -0800 Subject: [PATCH 12/15] Add slide show to section title --- aria-practices.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aria-practices.html b/aria-practices.html index 14f81f8a61..0b413e86bb 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -479,7 +479,7 @@

      WAI-ARIA Roles, States, and Properties

      • +
    • If present, the rotation control is the first element in the Tab sequence inside the carousel. It is essential that it precede the rotating content so it can be easily located.
    • If tab elements are used for slide picker controls, they implement the keyboard interaction defined in the Tabs Pattern.
    From 6f2f95ed729b7b8857169d7adf20e1a9a6be2652 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 14 Jan 2019 16:53:46 -0800 Subject: [PATCH 15/15] Fix typo found by @annabbott in review. --- aria-practices.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aria-practices.html b/aria-practices.html index 44edc496ca..bdd39ade74 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -603,7 +603,7 @@
    Basic carousel elements
    Optionally, an element wrapping the set of slide elements has aria-atomic set to false and aria-live set to:
      -
    • off: ifthe the carousel is automatically rotating. +
    • off: if the carousel is automatically rotating.
    • polite: if the carousel is NOT automatically rotating.