Add ability to localize the aria labels

[jonnitto]

Unfortunately, all aria labels are hardcoded in English. This PR allows setting the label for page dots and the previous/next buttons.

[desandro]

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

Thank you for this PR! This is a nice addition. I'd like see others interest before I decide to add this feature.

[jonnitto]

Are there any releases planned? This feature is critical to us, as we need to cover accessibility.

[desandro]

In the meantime, you can add this behavior by adding this duck-punch code before you initialize Flickity

Flickity.defaults.pageDotAriaLabel = 'Page dot %n';
Flickity.defaults.previousAriaLabel = 'Previous';
Flickity.defaults.nextAriaLabel = 'Next';

var addDots = Flickity.PageDots.prototype.addDots;
Flickity.PageDots.prototype.addDots = function() {
  addDots.apply( this, arguments );

  var ariaLabel = this.parent.options.pageDotAriaLabel;
  this.dots.forEach( function( dot, i ) {
    var label = ariaLabel.replace( '%n', i + 1 );
    dot.setAttribute( 'aria-label', label );
  });
};

var _createButton = Flickity.PrevNextButton.prototype._create;
Flickity.PrevNextButton.prototype._create = function() {
  _createButton.apply( this, arguments );
  var optionName = this.isPrevious ? 'previous' : 'next';
  var label = this.parent.options[ optionName + 'AriaLabel' ];
  this.element.setAttribute( 'aria-label', label );
};

You can then set pageDotAriaLabel, previousAriaLabel, and nextAriaLabel option.

[jonnitto]

Thank you for your example! ❤️ I've adjusted my code with your variable names and changed also the code a bit, to have it the same way as in your example.

[jonnitto]

Any progress on this?

[vasanthangel4]

Hi @desandro : when we enabling the voiceover and accessibility carousel scrolling not working with Three-finger triple tap. Safari browser in ios device. android application is working fine. please let us know if you have solution. i have applied accessibility improvement PR, but it is not helping. please let me know if any vanila js fix for this issue.