5. Interactive WAI-ARIA (Intermediate)
Carousels are typically used to present a series of panels or images that rotate at a particular frequency.
WAI-ARIA roles, states, and properties used in carousels
- aria-describedby="[id of div with instructions]"
Though instructions are not always required, they can be helpful for screen reader users when there is non-standard keyboard navigation. In our case, we’ll add a few words and assign them to the “instructions” variable in the default settings of the
init() function for the carousel. The instructions will be rendered in its own
<div> and referenced with
aria-describedby a little later in the code.
We’ll define a few attributes when the carousel is initialized: give it a
role="region" to add it to the landmarks, add a
tabindex to make it keyboard focusable, and reference the ID of the instructions
aria-describedby. Add keyboard operability with
.on('keydown') and a reference to the
onKeyDown function, described below.
Screen reader users will not need the Next/Previous controls, so hide them. They will be using the Arrow keys instead, defined in the
onKeyDown function further below.
Hide images from screen readers. Notice that the
alt text for the images are defined in the HTML but left empty so it is not read in this case. Screen readers will read the
Add screen reader instructions by generating a
<div> that contains the instruction text defined earlier and hide the
<div> by default. The instructions are read when the carousel receives focus, and the
aria-describedby attribute is dynamically added to reference the instructions.
aria-live attribute to the
stopTimer function. Set its value to
polite so content updating in the live region announces when a screen reader is not reading elsewhere on the page. The content of the visible carousel panel is read automatically when it is in focus, manually navigating between panels with the Arrow keys.
Remove the live region when focus on the carousel is removed in the
startTimer function. By doing so, the live region stops reading when the timer is reactivated
onblur, and it does not interfere with the screen reader reading elsewhere on the page.
Hide the active slide from screen readers with
aria-hidden="true". Then, make the next slide visible to screen readers with
aria-hidden="false" in the
Adding Keyboard Operability
Add keyboard operations for the carousel, pulling keyboard events from ik_utils.js to use Left and Right arrows for moving between panels in the carousel, and the Esc key to exit the carousel and resume automatic rotation.
Accessible Carousel in Action
Watch the following video to see how ChromeVox interacts with a carousel. The carousel rotates automatically when focus is elsewhere on the page. When it receives focus, rotation stops, and navigation instructions are read. The Left and Right arrow keys are used to move manually between panels in the carousel while it has focus. The contents of each panel are read through a live region, dynamically added to the main container
<div> when the carousel has focus. Using the Tab key while the carousel has focus sends focus to any focusable element within the panel that is in view, a link to the person who shared the photo in this case. Aim to have the carousel you update in the activity on the following page operate and announce like the one in the video.
Video: Accessible Carousel