Example 3: Tabpanel Accessibility Plugin

Modified version of PayPal Accessibility Plugin for Carousel

Accessibility Features

Keyboard Support

Tabs
First interactive content of the carousel
A "Tab" is one of the dots indicating the number slides (e.g. tabpanels) in the carousel.
Tab key moves keyboard focus into and out of the list of tabs.
Left and up arrow expose the previous slide.
Right and down arrow expose the next slide.
Tabpanels
Second section of the carousel for possible interactive content
Tab key moves keyboard focus to any interactive content in a panel (i.e.. typically links and form controls).
Only interactive elements on the visible slide can get focus.
Some carousels may not include links, form controls or other interactive content.
Previous and Next Buttons Buttons
Tab key moves keyboard focus into and out of the button elements.
Enter or space can be used to activate the button.
Since bootstrap.js uses a elements to define previous and next slide buttons, keyboard events need to be added to support the space key to support the default way to activate a "button", since a elements only respond to the enter key
"Pause/Play Carousel" Button (at beginning of page)
Uses button element keyboard support to toggle the carousel on and off.
Button is inside a aside element (e.g. defines a complementary landmark) with aria-label="Carousel Pause/Play Button" attribute.

Keyboard Focus Styling

Tabs
When a "Tab" receives focus a box appears around the list of tabs.
The tabs styling changes to include a partially transparent background image.
The currently selected tab is solid white
Tabpanels
Styling of interactive content is controlled by the authors style sheets
Previous and Next Buttons Buttons
When a button receives focus a border becomes visible and a background gradient similar to the hover styling appears.
"Pause/Play Carousel" Button (at beginning of page)
The button is positioned off screen using CSS absolute positioning when it does not have keyboard focus.
The button is positioned in the upper left corner of the screen when it receives keyboard focus and becomes visible.

Low Vision Support

"tabs" for indicating number of slides and selected slide
Increased size of round tabs for controlling which slide is displayed and indicating the total number of slides in the carousel.
Increased contrast of round tabs and highlighting of selected tab.
Color contrast of text in slide caption
Mouse hover adds a background image to slide caption area to improve color contrast.
Keyboard focus on controls and links within the carousel will also add the background image.

Use of ARIA Roles

complementary Landmark Role
The complementary landmark role is used to identify all the content and interactive controls associated with the carousel widget.
The landmark provides a means to navigate to and identify the carousel features.
tablist and tab Roles
Are defined for the dots used to indicate the number of slides and which slide is selected.
tabpanel Role
Are defined for the slide content.
button Role
The button roles is used to override semantics of the a element used to define the previous and next slide buttons.
Links typically take you to a new web page or a section of a web page, while buttons change the state of a web page, in this case which slide is visible.

Screen Reader Specific Features

Carousel Pause/Play Button
Added as first item on the page using scripting.
In virtual mode (e.g. windows screen reader) a screen reader user can identify that there is a carousel and stop the rotation
When the virtual cursor is on content within a slide and the slide changes the virtual cursor moves the virtual cursor back to the top of the page. Kind of like ground hog day for a screen reader user.
Carousel Description
At the beginning of the carousel, off screen content is used to identify and describe the carousel.