4

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

enter image description here

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:

enter image description here

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

enter image description here

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.

Improve this question

3 Answers 3

Reset to default
3

So, should I use a carousel?

Accessibility expert warns: stop using carousels

Web Accessibility Tutorials, Carousels Tutorial

Accessible Carousels: Part 1

Accessible Carousels: Part 2, Keyboard Control

Accessible Carousels: Part 3, aria-live

A Content Slider

Carousels Don’t Have to be Complicated

Improve this answer
2
  • Thanks for Accessible Carousels series, some good info out there
    – Runnick
    Jun 9, 2018 at 11:19
  • It would be good to provide a summary of your thoughts based on the references that you have cited in response to the question that is asked :)
    – Michael Lai ♦
    Jun 13, 2018 at 3:11
1

I am in favour of not using a carousel to begin with, you're hiding content that is apparently important to show..

But that aside, you could ignore the arrows in the tabbing order and go through the slides by using tab directly while focussing on the clickable component on each slide.

This is assuming you have a link on each slide and not that many (like amazon) to be a nuisance to users wanting to navigate to content further down on the page.

Improve this answer
3
  • Agree with the “not using carrousel to begin with”, especially since an arrow only provides the user with no information on what’s beyond the arrow, so no reason to click (or enter) the arrow. From that perspective, using the amazon solution without arrows (so showing all thumbnails) may be a solution preferable to arrows.
    – wintvelt
    Jun 4, 2018 at 15:34
  • I understand that point, but I'm developing a generic solution (WP theme) where users will still use a carousel / slider because everyone they know uses it. So I better have them use my more or less accessible carousel than some third-party default one.
    – Runnick
    Jun 7, 2018 at 9:06
  • @Runnick, fair enough. But I think my solution still applies and is more accessible.
    – Martyn
    Jun 7, 2018 at 9:11
0

The content type/value will help you decide.
For example: If the content is just images with important visual information for the visitor, go with the first case.
If content is images with important visual information for the visitor and text, go with case 2 - 1.
If text is more important than images choose case 2 - 2.

The rest is pretty much technical stuff and I am not sure that this is the right place to answer. A brief explanation is that links can contain images. So jumping through links means that you also jump through images.

Install ChromeVox, navigate to MORE THEMES section of www.magnumphotos.com, pretend that you can't control your mouse or close your eyes and tab.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.