Build your web apps using Smart UI
Smart.Carousel - Accessibility
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.
The following keyboard shortcuts are available to interact with the Carousel:
|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.