Research carousel accessibility

[nakayan5]

Description

read this article and research carousel accessibility

modify component if necessary

Problem Statement/Justification

none

Proposed Solution or API

No response

Alternatives

No response

Are you willing to participate in implementing this feature and create a pull request include the implementation?

None

Additional Information

No response

[nakayan5]

@GensIto
assign you to this issue too.
please comment if you confirm.

[setodeve]

General Requirements

• Visible Labels:

  • Carousel container has an accessible label using aria-labelledby or aria-label.
  • Label does not include the word "carousel".

• Roles and Descriptions:

  • Carousel container has role="region" or role="group".
  • aria-roledescription="carousel" is set on the carousel container.
  • Each slide container has role="group" with aria-roledescription="slide".

Rotation Control

• Rotation Control Button:
  • Exists as a native button element or implements the button pattern.
  • Accessible label provided by aria-label or inner text.
  • Label changes based on action (e.g., "Stop slide rotation" or "Start slide rotation").
  • Button does not use aria-pressed.

Slide Navigation

• Next and Previous Slide Controls:

  • Exist as native button elements or implement the button pattern.
  • Styled as arrows.
  • Do not move focus when activated.

• Slide Picker Controls (if present):

  • Group of elements, often styled as small dots or tabs.
  • Each control is a native button element or implements the button pattern.
  • Accessible name indicates the slide it will display.
  • Current slide control has aria-disabled="true".

Keyboard Interaction

• Tab and Shift + Tab Navigation:

  • Moves focus through carousel interactive elements.

• Automatic Slide Rotation:

  • Stops when any carousel element receives keyboard focus.
  • Does not resume unless the user activates the rotation control.
  • Stops when the mouse hovers over the carousel.

WAI-ARIA Implementation

• Basic Carousel Elements:

  • Carousel container includes all components, with role="region" or role="group".
  • Rotation, next slide, and previous slide controls are native button elements or implement the button pattern.
  • Each slide container has role="group" with aria-roledescription="slide".
  • Each slide has an accessible name using aria-labelledby or aria-label.
  • Wrapper element for slides has aria-atomic="false" and aria-live="off" if rotating, aria-live="polite" if not.

• Tabbed Carousel Elements:

  • Slide containers have role="tabpanel" instead of role="group".
  • Slide picker controls follow the Tabs Pattern.
  • Each control is a tab element, displaying the associated slide when activated.
  • Accessible name of each tab indicates the slide it will display.
  • Controls are grouped in a tablist element with an accessible name.

• Grouped Carousel Elements:

  • Slide picker controls are in an element with role="group".
  • Group containing picker controls has an accessible label.
  • Each picker control is a native button element or implements the button pattern.
  • Accessible name of each picker button matches the slide it displays.
  • Current slide picker button has aria-disabled="true".

[nakayan5]

@setodeve
double check is done