Accessible360/accessible-slick

Support customized text for all aria-labels

Opened this issue · 3 comments

The following represents the aria-labels used as of master 61b5322:

  • List / Slider: The aria-label can be customized with the option regionLabel; however, if you do not set a regionLabel then a hard coded "carousel" is used.
  • Item / Slide: The aria-label cannot customized. The aria-label is always set to "slide [number of slide]", example "slide 2".

Issues

  • List / Slider: The markup could have a aria-label or aria-labelledby that provides more details or is translated by a backend CMS (example Drupal).
  • Item / Slide: The hard coded value is not translatable and cannot be customized to provide a more specific label (example: "Image 1 of 5").

Desired Changes to support customizing the aria-labels

  • List / Slider:
    • If the slider element already has an aria-label or aria-labelledby then the slick library should not override it with the hard coded "carousel" or the options.regionLabel.
  • Item / Slide:
    • Add a options.customItemLabel function similar to options.customPaging that is passed the slider and the slide index. This would allow the caller to pass in a custom label function or use the default that would return "slide [number of slide]".
    • If the slide element already has an aria-label or aria-labelledby then the slick library should not override it with the options.customItemLabel.

Generic Example:

customItemLabel: function (slider, i) {
    return 'Image ' + (i + 1) + ' of ' + slider.$slides.length;
}

Example with Drupal:

customItemLabel: function (slider, i) {
    return Drupal.t('Image @index of @total', {
      '@index': i + 1,
      '@total':  slider.$slides.length
    });
}

The opened PR #88 makes the following changes:
List / Slider:

  • If the slider element already has an aria-label or aria-labelledby then the aria-label is not set with the hard coded "carousel" or the options.regionLabel.

Item / Slide:

  • Added a options.customItemLabel function similar to options.customPaging that is passed the slider and the slide index. This allows the caller to pass in a custom label function or use the default that would return "slide [number of slide]".
  • If the slide element already has an aria-label or aria-labelledby then the aria-label is not set with the options.customItemLabel.

@recrit : when will it be released to fix the problem

recrit commented

@achemkhi The PR #88 is opened for the accessible-slick maintainers to review, so it is up to them when it is released.