I'm building a content slider for a news site and faced with the issue of keyboard and screen-reading accessibility.

Case #1: Pure image slider

For generic image slider it appears you can go with the following: - make prev-next buttons focusable so user can switch the images.

Focusable areas are shown in red

Case #2: Content over the images

For content carousel with links / content in the slides it will not work that way, because you also need to make content focusable.

In that case I can't seem to get the convention how focus should move within slides / arrows.

There are basically two options:

1. Lesser amount of slides: Focus only moves within arrows and active slide (e.g. Guardian) So to move to the next slide, user goes TAB to the arrow, then SHIFT + TAB to make slide content focusable:

2. Focus moves within arrows and each slide (Amazon). So to get to next arrow user needs to go through all slides first.

Screen readers and sliders

I think I’m lost here so if anyone has some kind of experience it is appreciated. I suppose it can be presented to screen readers just as plain list with arrows and navigation hidden?

Questions

Are there any other (maybe better) conventions for this, e.g. using keyboard arrows to move within the slides? How do you signify to the user it can be moved with the arrows?

How do you handle the e.g. dot navigation?

How do you handle looped sliders?

You shouldn’t really use a slider. Yes, but...

One can argue that you shouldn't use the slider at all and yes that's true. But it seems that some people would use that anyway so it’s better to make sliders more accessible rather than make them find some other ones which are not accessible at all.