Carousel Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

Carousel provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-selected and others. They are applied to the corresponding elements inside the template of the components. The Carousel has default role of "region" which means that the content is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.

The following ARIA attributes are used inside the Carousel component:

  • aria-label - labels the controls for slide selection/navigation to make them recognizable.
  • aria-roledescription - defines a human-readable, author-localized description for the role of the Carousel component which gives the ability to override how the assistive technologies localize and express the name of the role. This attribute is applied to the component itself to indicate that it should interpreted as a "carousel".
  • aria-selected - indicates the currently selected item in the slide indicator of the Carousel.
  • aria-controls - applied to the slider indicator buttons of the Carousel to determine the visibility of the slides.
  • aria-labelledby - applied to each slide to indicate that it is labeled by the title that is located inside of it.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the Carousel:

Key Action
Arrow Up / Arrow Down Navigate to previous/next slide.
Arrow Left / Arrow Right Navigate to the previous/next slide.
Home Navigate to the first slide.
End Navigate to the last slide.
Space Starts/Stops the slideshow.
Enter Starts the slideshow.

Additional information on WAI-ARIA for the SMART Framework can be found here.