diff --git a/third_party/aria-practices/src/content/patterns/carousel/examples/carousel-2-tablist.html b/third_party/aria-practices/src/content/patterns/carousel/examples/carousel-2-tablist.html index cb460494bb058..f310c02aee21d 100644 --- a/third_party/aria-practices/src/content/patterns/carousel/examples/carousel-2-tablist.html +++ b/third_party/aria-practices/src/content/patterns/carousel/examples/carousel-2-tablist.html @@ -2,85 +2,13 @@ - Auto-Rotating Image Carousel with Tabs for Slide Control Example - - - - - - - - - -
-

Auto-Rotating Image Carousel with Tabs for Slide Control Example

- -
-

About This Example

- -

- The following example implementation of the Carousel Pattern demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads. - This example also illustrates how to use the tabs pattern to provide users with a way to skip slides in the sequence by directly choosing which one to view. - Navigation among slides is provided by a series of circular buttons that function as tabs and are rendered over the rotating slides. - Automatic rotation stops when users move focus to any control or link in the carousel or hover the mouse over carousel content. - The accessibility features section that follows the example describes these aspects of the design in detail. -

-

Similar examples include:

- -
- -
-

Example Options

- -
- Carousel View and Behavior Options - - -

This option is more accessible than rendering controls and captions within the image, because controls are easier to perceive and captions are easier to read without rotating images behind them.

- - -

- This option controls whether the carousel is paused or playing on page load. - The paused option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation, but allows users to start auto-rotation using the start/stop button. -

-

Note: If the user has chosen reduced motion in system settings, auto-rotation will always be paused on load.

- - -

- This option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation by disabling the auto-rotation feature and removing the start/stop button from the user interface. - Users can use the tablist to manually navigate through the slides. -

-
-
- -
-
-

Example

-
-
- -
-

Accessibility Features

-

Controlling Automatic Slide Rotation

-

- Users can stop and start slide rotation, which is an essential aspect of accessibility of the carousel for a variety of people with disabilities. - People with low vision or a cognitive disability that affects visual processing or reading benefit from being able to control slide rotation so they have sufficient time to explore slide content. - Similarly, since screen reader users cannot perceive automatic rotation, it can make reading the page confusing and disorienting. - For example, when slides are automatically rotating, a screen reader user may read an element on slide one, execute a screen reader command to read the 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. -

-

This example includes the following features for giving users control over slide rotation:

-
    -
  • If operating system preferences have been set for reduced motion or disabling animations, the auto-rotation is initially paused.
    • -
  • - Hovering the mouse over any carousel content pauses automatic rotation. - Automatic rotation resumes when the mouse moves away from the carousel unless another condition that prevents rotation, such as keyboard focus, has been triggered. -
    • -
  • - Moving keyboard focus to any of the carousel content, including the tab elements, pauses automatic rotation. - Automatic rotation only resumes if the user explicitly activates the Play button. -
    • -
  • - The carousel also contains a rotation control button that can stop and start automatic rotation. -
      -
    • The rotation control button is the first element in the screen reader reading order.
      • -
    • The rotation control button is always visible so it is available to all users whether they are interacting via a mouse, keyboard, assistive technology, or touch.
      • -
    • If the carousel is rotating, the button's accessible name is Stop Automatic Slide Show, informing screen reader users that the slides are changing in addition to providing a way to stop the changes.
      • -
    • If the carousel is not rotating, the accessible name of the button is Start Automatic Slide Show.
      • -
    • If a user activates the rotation control button to start rotation it is assumed the user wants auto-rotation to start immediately and focus or hover states within the carousel are ignored.. The rotation will only stop if the button is activated again,
      • -
    -
    • -
  • - The example includes an option to completely disable automatic slide rotation. - When this option is selected the start/stop button is not rendered and slides can only be rotated through activation of the tab controls. -
    • -
-

Color Contrast of Text and Rotation Controls

-

- In the view of this carousel where the controls and captions are displayed inside the image, background images could cause color contrast for the controls and text to become insufficient. - However, this view includes the following features to prevent this potential problem and ensure it meets WCAG 2.1 color contrast requirements: -

-
    -
  • - When the tabs controlling the rendering of slides are inside the image, the tabs have foreground and background colors that meet WCAG 2.1 color contrast requirements. - In addition, the focus styling uses SVG images that make the focus indicator highly visible when a control receives keyboard focus. -
    • -
  • The transparency of the caption area is decreased so the caption text meets the WCAG 2.1 color contrast requirements.
    • -
- -

- One way to avoid the color contrast issues of controls and text inside the image is to move them to outside the image. - Moving the controls and text to a solid background makes it easier for the author to control color contrast and for the user to perceive them. - An example of this technique is one of the view options. -

- -

Focus Styling of the Tablist and Tabs

-
    -
  • When a tab receives focus, the entire tab list is also highlighted with a border as an affordance that indicates to users that arrow keys are used to navigate among controls in the group.
    • -
  • The CSS border width used for focus styling is changed from 0 to 2 pixels when the control receives focus to support visibility of focus when operating system high contrast options are enabled.
    • -
-

Screen Reader Announcement of Slide Changes

-

- When automatic rotation is turned off, the carousel slide content is included in a live region. - This makes it easier for screen reader users to scan through the carousel slides. - When screen reader users activate a new tab, the new slide content is announced, giving users immediate feedback that helps them determine whether or not to interact with the content. - Very importantly, if automatic rotation is turned on, the live region is disabled. - If it were not, the page would become unusable as announcements of the continuously changing content constantly interrupt anything else the user is reading. -

-

- Note that making a tab panel live is not recommended for typical tabs. - In the carousel use case, where the primary intent is quick, light-weight scanning of content, the live region is used to simulate the type of experience that non-screen reader users have with auto-rotation. -

-
- -
-

Keyboard Support

-
-

Rotation Control Button

- - - - - - - - - - - - - - - - - -
KeyFunction
Tab -
    -
  • Moves focus through interactive elements in the carousel.
    • -
  • Rotation control button and tab list precede the slide content in the Tab sequence.
    • -
-
Enter or SpaceToggle automatic rotation of slides in the carousel.
-
- -
-

Tabs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Tab -
    -
  • - When focus moves into the tablist, places focus on the active tab element. - Each slide in the carousel is controlled by a tab. -
    • -
  • When the tab list contains the focus, moves focus to the next element in the tab sequence, which is a link in the currently shown slide.
    • -
-
Right Arrow -
    -
  • Moves focus to the next tab.
    • -
  • If focus is on the last tab, moves focus to the first tab.
    • -
  • Shows the slide associated with the newly focused tab.
    • -
-
Left Arrow -
    -
  • Moves focus to the previous tab.
    • -
  • If focus is on the first tab, moves focus to the last tab.
    • -
  • Shows the slide associated with the newly focused tab.
    • -
-
HomeMoves focus to the first tab and shows the first slide.
EndMoves focus to the last tab and shows the last slide.
-
-
- -
-

Role, Property, State, and Tabindex Attributes

-
-

Rotation Control

- - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
- aria-label - - button - - The accessible name changes to reflect the action the button will perform: -
    -
  • If automatic rotation is Paused, the label is "Start automatic slide show".
    • -
  • If the carousel is rotating automatically, the label is "Stop automatic slide show".
    • -
-
-
-
-

Tabs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
Implied role of region - section - -
    -
  • Role region is implied for any section element that has an accessible name.
    • -
  • Defines the carousel and its controls as a landmark region.
    • -
-
- aria-roledescription="carousel" - - section - -
    -
  • Informs assistive technologies to identify the element as a "carousel" rather than as a "region".
    • -
  • Affects how assistive technologies render the role but does not affect functionality, such as commands for navigating to landmark regions.
    • -
  • NOTE: The aria-roledescription value is defined using the language of the page and should be localized by the author.
    • -
-
- aria-label="Highlighted television shows" - - section - Provides a label that describes the content in the carousel region.
- aria-live="off" - - div.carousel-items - -
    -
  • Applied to a div element that contains all the slides.
    • -
  • Identifies the container as a live region that is in the "off" state, meaning assistive technology users are not automatically informed of changes to the region.
    • -
  • The live region is off when the carousel is automatically rotating.
    • -
-
- aria-live="polite" - - div.carousel-items - -
    -
  • Applied to a div element that contains all the slides.
    • -
  • Identifies the container element as a live region in the "polite" state, meaning assistive technology users are informed of changes to the region at the next available opportunity.
    • -
  • This causes screen readers to automatically announce the content of a slide when its associated tab is activated.
    • -
-
- tablist - - div - Indicates that the element serves as a container for a set of tabs.
- aria-label="Slides" - - div - Provides an accessible name for the tablist.
- tab - - button - -
    -
  • Indicates the element serves as a tab control.
    • -
  • When focused, it is automatically activated, causing its associated tabpanel (i.e. slide) to be displayed.
    • -
-
- aria-label="Slide X" - - button - Provides an accessible name for the tab.
- aria-selected="true" - - button - -
    -
  • Indicates the tab control is activated and its associated panel is displayed.
    • -
  • Set when a tab receives focus.
    • -
-
- aria-selected="false" - - button - -
    -
  • Indicates the tab control is not active and its associated panel is NOT displayed.
    • -
  • Set for all tab elements in the tab set except the for the tab associated with the currently displayed slide.
    • -
-
- tabindex="-1" - - button - -
    -
  • Removes the element from the page Tab sequence.
    • -
  • Set when a tab is not selected so that only the selected tab is in the page Tab sequence.
    • -
  • Since the tab element is an HTML button, the tabindex attribute is removed when a tab is selected (activated) rather than setting tabindex="0".
    • -
  • - This approach to managing focus is described in the section on - Managing Focus Within Components Using a Roving tabindex. -
    • -
-
- aria-controls="IDREF" - - button - Refers to the tabpanel element associated with the tab.
- tabpanel - - div - -
    -
  • Indicates the element serves as a tabpanel that is controlled by its associated tab element.
    • -
  • Is hidden unless its associated tab control is activated.
    • -
-
- aria-roledescription="slide" - - div - -
    -
  • Informs assistive technologies to identify the element as a "slide" rather than as a "tabpanel".
    • -
  • Affects how assistive technologies render the role but does not affect assistive technology functionality.
    • -
  • NOTE: The aria-roledescription value is defined using the language of the page and should be localized by the author.
    • -
-
- aria-label="X of Y" - - div - -
    -
  • Provides an accessible name for the tab panel (slide) that indicates what position the slide is in the set of slides.
    • -
  • When combined with the aria-roledescription, a screen reader could announce a tab panel as a slide with its position, e.g., "Slide 1 of 6".
    • -
-
-
-
- -
-

JavaScript and CSS Source Code

- -
- -
-

HTML Source Code

-

To copy the following HTML code, please open it in CodePen.

- -
- - -
-
diff --git a/third_party/aria-practices/src/content/patterns/carousel/examples/js/carousel-tablist.js b/third_party/aria-practices/src/content/patterns/carousel/examples/js/carousel-tablist.js index 8c509dce446ec..f92595a3af973 100644 --- a/third_party/aria-practices/src/content/patterns/carousel/examples/js/carousel-tablist.js +++ b/third_party/aria-practices/src/content/patterns/carousel/examples/js/carousel-tablist.js @@ -13,7 +13,7 @@ var CarouselTablist = function (node, options) { // merge passed options with defaults options = Object.assign( - { moreaccessible: false, paused: false, norotate: false }, + { moreaccessible: false, paused: true, norotate: false }, options || {} );