search

wnolfm / a11y-slider

Accessible Carousel using ARIA best practices
0 stars 0 forks source link

Add Tab Support #1

Open wnolfm opened 4 years ago

wnolfm commented 4 years ago

Add Tabs from: https://www.w3.org/WAI/tutorials/carousels/working-example/

wnolfm commented 4 years ago

The structure of a tabbed carousel is the same as a basic carousel except that:

Each slide container has role tabpanel in lieu of group, and it does not have the aria-roledescription property. It has slide picker controls implemented using the tabs pattern where: Each control is a tab element, so activating a tab displays the slide associated with that tab. The accessible name of each tab indicates which slide it will display by including the name or number of the slide, e.g., "Slide 3". Slide names are preferable if each slide has a unique name. The set of controls is grouped in a tablist element with an accessible name provided by the value of aria-label that identifies the purpose of the tabs, e.g., "Choose slide to display." The tab, tablist, and tabpanel implement the properties specified in the tabs pattern.

Spec: https://www.w3.org/TR/wai-aria-practices-1.1/#tabbed-carousel-elements