Accessibility issues with the announcements carousel

[NateWr]

The carousel used for the announcements (see this demo) has a couple issues that probably need to be addressed for accessibility.

1. When using the keyboard to focus on the prev/next buttons and then hitting enter, focus is dropped. It needs to stay on the same prev/next button. It looks like this is the case with the default bootstrap4 carousel.

2. There's no indication of what the buttons control. I'm not sure what the correct approach is here. With the pagination component I've used aria-live="polite". But I think that only works because the content is being replaced. Since the carousel works by selectively showing/hiding things, I'm not 100% sure that aria-live="polite" will signal the change to the user. In this inclusive carousel component article he suggests using something like this:

<div role="region" aria-label="Announcements" aria-describedby="instructions">
  <!-- slides -->
  <div id="instructions">
    <!-- prev/next buttons -->
  </div>
</div>

I'm not totally sure that nails our use case, and sometimes poorly applied aria can be worse than no aria, but I'm not aware of a better alternative here. These kinds of controls are tricky.

Of course, the other option is to get rid of the carousel and simply put one announcement up with a "View All Announcements" link.

[sssoz]

I thought about simply displaying a "View all announcements" link, but don’t users get to select the number of announcements they want to display on the homepage? I am not sure I want to mess too much with that -- unless we can completely remove that option for this theme.

[NateWr]

Yeah they do get to choose. (One of many settings I'd like to turn into a theme option, but that's for the future...) I was just offering an easy escape route. :)

[sssoz]

Actually the fix was much easier than I thought -- just need to move the controls outside the carousel’s slide content! Fixed in ca197ad

[NateWr]

Re-opening this issue because the second point still needs to be addressed.

[sssoz]

@NateWr is the sr-only class in a span indicating "next" and "previous" not clear enough? Currently this is what the theme should be displaying for an arrow button:

<a href="#announcementsCarouselControls" class="btn" role="button" data-slide="next">
	<span aria-hidden="true">→</span>
	<span class="sr-only">Next</span>
</a>

[NateWr]

The next/previous buttons look good! 👍 I'm referering specifically to the role="region" aria-label="Announcements" aria-describedby="instructions" attributes that link the controls to the content in the code snippet I posted at the start. Let me know if it's not clear what's happening there.

[thinkbulecount2]

Hi @sssoz ! Am I here for further UI/UX Review?