Carousels

[IanPouncey]

Carousels

Extrapolation from GEL technical recommendations

Required

-

Recommended

• The carousel content and controls in contained within an element with role="group".
• "Previous" and "Next" controls should be <button type="button"> elements.
• Inactive "Previous" and "Next" controls should have disabled attribute.
• Carousels items should be displayed in a single row and not wrap.
• A visible scrollbar should be displayed when the carousel items exceed the width of the container.
• Items that are less than 50% in view should be visually obscured by reducing their opacity.
• Smooth scrolling should be implemented, unless the user has chosen to reduce animations in their system settings.
• Hidden carousel items have an inert attribute, and the inert attribute polyfilled for browser that don't support it.

Note: there is a requirement for <button> accessible names to be in visually hidden text (when the text is not displayed) rather than aria-label attributes to that the strings are translated by browser translation extensions; this requirement should belong to the button component, not individual instances of buttons.

Implied

• "Previous" and "Next" controls should be before the carousel content in the source / focus order.
• When the user has chosen to reduce animations in their system settings, the carousel items should "snap" in to place without scrolling over time.
• One or more of the following is true:
  • The scrolling area is focusable and the scroll position can be changed using the keyboard.
  • Items within the carousel are focusable and the scroll position can be changed using the left and right arrow keys while carousel item content is focused.

Suggested ACT expectations

• The carousel content and controls in contained within an element with role="group".
• "Previous" and "Next" controls should be <button type="button"> elements.
• Inactive "Previous" and "Next" controls should have disabled attribute.
• Carousels items should be displayed in a single row and not wrap.
• A visible scrollbar should be displayed when the carousel items exceed the width of the container.
• Items that are less than 50% in view should be visually obscured by reducing their opacity.
• Smooth scrolling should be implemented, unless the user has chosen to reduce animations in their system settings.
• Hidden carousel items have an inert attribute, and the inert attribute polyfilled for browser that don't support it.
• "Previous" and "Next" controls should be before the carousel content in the source / focus order.
• When the user has chosen to reduce animations in their system settings, the carousel items should "snap" in to place without scrolling over time.
• One or more of the following is true:
  • The scrolling area is focusable and the scroll position can be changed using the keyboard.
  • Items within the carousel are focusable and the scroll position can be changed using the left and right arrow keys while carousel item content is focused.