Accessible360 / accessible-slick

the last (accessible) carousel you'll ever need.

Home Page:https://accessible360.github.io/accessible-slick

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add new setting for optional sr-only instructions

jasonwebb opened this issue · comments

For most use cases, the addition of ARIA attributes likerole="region" on the wrapper, role="group" on the slides, and the removal of the tab markup on the slides and slide dots is enough to clearly convey the structure and behaviors of a slider.

However, sometimes sliders are used in strange ways that cannot be conveyed through abstract ARIA attributes, like when the asNavFor mode (slider syncing) is used to connect multiple sliders together. If you have used custom JavaScript to add functionality to a slider, or have connected two or more sliders together somehow (like thumbnail images and main images on an e-commerce PDP), be sure to explain this functionality to screen reader users!

  • Add new instructionsText setting that takes an arbitrary string and places it at the very beginning of the slider as screen-reader-only-text.
  • Document this new setting in the main README.
  • Use it in at least one example in docs/index.html.