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 Carousel" Button (at beginning of page)
Uses button element keyboard support.
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 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.
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 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. Converted ARIA to tab panel
Accessibility Features
Keyboard Support
Keyboard Focus Styling
Use of ARIA Roles
Screen Reader Specific Features