Flickity previous and next buttons not fully accessible (according to WAVE tool)

[dsg1-wolf]

Heya! According to this tool ([https://wave.webaim.org/]), both the next and previous buttons are, even though there's an SVG generated and labelled with ARIA nomenclature, considered empty and a possible problem for people relying on screen readers.

Would it be a possible solution to add a title tag to the SVG itself so it may be considered well-formed and readable again?? I.e. for the "previous" button:

<button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous">
<svg class="flickity-button-icon" role="img" aria-describedby="prevCont" viewBox="0 0 100 100">
<title id="prevCont">Previous Content</title>
<path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path>
</svg>
</button>

Regards, Tom

[frizzant]

As a quick fix i'd recommend this solution of my own:

  const sliderInstance= new Flickity(<theSelector>, {});
  const nextButton = document.querySelector('.next');
  const previousButton = document.querySelector('.next');
  
  nextButton.addEventListener('click', () => {
          sliderInstance?.next();
  });
  
  previousButton.addEventListener('click', () => {
          sliderInstance?.previous();
  });

to check if it's the last / first slide you can do something like this:

  sliderInstance?.on('change', (index) => {
		  if (index === 0) {
			  // first item reached
			  addAndRemoveClass(previousButton, 'is-disabled', false)
			  addAndRemoveClass(nextButton, false, 'is-disabled')
			  return;
		  }
  
		  if (index === sliderInstance?.cells.length - 1) {
			  // last item reached
			  addAndRemoveClass(nextButton, 'is-disabled', false)
			  addAndRemoveClass(previousButton, false, 'is-disabled')
			  return;
		  }
  
		  // if nothing else is true do this
		  addAndRemoveClass(nextButton, false, 'is-disabled')
		  addAndRemoveClass(previousButton, false, 'is-disabled')
	  });

Now simply add your buttons, disable the "automatically" generated ones, and replace the markup as wished.

I hope this helps you =)

[desandro]

You got it. <title> will be added to the previous & next button SVGs

[TrevorBurnham]

👋 Hey folks, I'd like to suggest an alternative solution here: Since the prev/next arrow SVGs are redundant with the aria-label on the button, IMO the best experience for assistive devices would be for them to be hidden (aria-hidden=true). The reasons:

1. There are no circumstances under which we actually want this title text to be read. If a screen reader were to announce both the aria-label and the contents of the button, it would read it as "Previous Previous" or "Next Next".
2. Assistive devices offer users the ability to navigate just the images of a page, typically including SVGs. In that mode, ideally users would hear the alt text of the images in the carousel, without hearing about images called "Previous" and "Next".

aria-hidden should satisfy the WAVE tool, and is appropriate for this case (since, again, the button with aria-label is complete—from an accessibility standpoint—without the SVG).