Skip to content

Instantly share code, notes, and snippets.

@greggnakamura

greggnakamura/slickjs-a11y-fixes.js

Last active December 20, 2019 18:16
Show Gist options
  • Save greggnakamura/a69ebb10b0a6ce01dbb9d1be00b0673c to your computer and use it in GitHub Desktop.
Save greggnakamura/a69ebb10b0a6ce01dbb9d1be00b0673c to your computer and use it in GitHub Desktop.
Download ZIP
Slick JS A11y `listbox`, `aria-selected`, `aria-describedby`, add `role="option"
Raw
slickjs-a11y-fixes.js
/* a11y fixes */
// a11y fixes: init
var $slickSlide = $('.slick-slide');
// a11y fixes: set aria attributes
$slickSlide
.attr('role', 'option')
.attr('aria-selected', 'false')
.removeAttr('aria-describedby');
// a11y fixes: set current 'aria-selected' to 'true'
$('.slick-current').attr('aria-selected', 'true');
// a11y fixes: generic label
$('.slick-track').attr('aria-label', 'carousel');
// a11y fixes: on after slide change
$('.slick').on('afterChange', function(event, slick, currentSlide, nextSlide){
$slickSlide.attr('aria-selected', 'false');
setTimeout(function(){ $slickSlide.removeAttr('aria-describedby'); }, 0);
$('.slick-current').attr('aria-selected', 'true');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment