Add options to change prev & next button aria labels

README.md

@@ -114,6 +114,9 @@ var flky = new Flickity( '.gallery', {
   // set img data-flickity-lazyload="src.jpg"
   // set to number to load images adjacent cells
 
+  nextButtonAriaLabel: 'Next',
+  // sets next button aria-label
+
   percentPosition: true,
   // sets positioning in percent values, rather than pixels
   // Enable if items have percent widths
@@ -122,6 +125,9 @@ var flky = new Flickity( '.gallery', {
   prevNextButtons: true,
   // creates and enables buttons to click to previous & next cells
 
+  prevButtonAriaLabel: 'Previous',
+  // sets previous button aria-label
+
   pageDots: true,
   // create and enable page dots
 

js/flickity.js

@@ -105,9 +105,11 @@ Flickity.defaults = {
   percentPosition: true,
   resize: true,
   selectedAttraction: 0.025,
-  setGallerySize: true
+  setGallerySize: true,
   // watchCSS: false,
   // wrapAround: false
+  prevButtonAriaLabel: 'Previous',
+  nextButtonAriaLabel: 'Next'
 };
 
 // hash of methods triggered on _create()

js/prev-next-button.js

@@ -59,7 +59,10 @@ PrevNextButton.prototype._create = function() {
   // init as disabled
   this.disable();
 
-  element.setAttribute( 'aria-label', this.isPrevious ? 'Previous' : 'Next' );
+  var prevButtonAriaLabel = this.parent.options.prevButtonAriaLabel;
+  var nextButtonAriaLabel = this.parent.options.nextButtonAriaLabel;
+
+  element.setAttribute( 'aria-label', this.isPrevious ? prevButtonAriaLabel : nextButtonAriaLabel );
 
   // create arrow
   var svg = this.createSVG();

test/index.html

@@ -36,6 +36,12 @@
   <script>
     Flickity.defaults.accessibility = false;
   </script>
+
+  <!-- Customize previouse & next buttons to test the options. -->
+  <script>
+    Flickity.defaults.prevButtonAriaLabel = "Previous Custom Label";
+    Flickity.defaults.nextButtonAriaLabel = "Next Custom Label";
+  </script>
   <!-- unit tests -->
   <script src="unit/init.js"></script>
   <script src="unit/cell-selector.js"></script>