Improve Screenshot Slider Accessibility

[kevinwhoffman]

We need general feedback from the Accessibility team on the Screenshots UI. Below is one specific issue.

Attempting to tab through the Screenshots slider forces the user to first tab through the large images before they reach the thumbnails. This could be remedied by assigning tabindex="-1" to the large images, which would prevent unwanted focus via keyboard. That means the user would jump directly to the thumbnails for navigation as expected.

This ticket is focused on slider accessibility.

See #2273 for related discussion on the lightbox experience.

[afercia]

Had the opportunity to have a quick look at the current implementation of the slider and thought to give some feedback. I'm a bit biased of course :) The best option for accessibility, and usability, and SEO, is just to don't use sliders:
​https://yoast.com/opinion-on-sliders/

First thing noticed: the prev and next buttons are empty, there's nothing that can be announced. Also, they get revealed just on hover. Since they're hidden with display: none, there's no way to operate them with a keyboard.

Ideally, the markup should provide users with useful information, for example how many items the slider has. This can be done with a list or an ARIA tabbed interface. Making sliders fully accessible is really challenging, I think I've never seen one that was fully accessible. The best implementations use a tabbed interface.

I've done some research on this topic recently, so maybe the best thing to do is sharing some links:

Web Accessibility Tutorials
Carousel Concepts
​https://www.w3.org/WAI/tutorials/carousels/

​http://shouldiuseacarousel.com/
WebAIM | Q&A about this web site
Jared Smith (@jared_w_smith) of WebAIM
Center for Persons with Disabilities
Utah State University

ARIA tabs
​https://www.w3.org/TR/wai-aria-practices/#tabpanel

The Unbearable Inaccessibility of Slideshows
​https://www.sitepoint.com/unbearable-accessible-slideshow/

About Carousels and ARIA Tabs
​http://www.webaxe.org/carousels-and-aria-tabs/

Compare Carousel Examples
​https://jongund.github.io/aria-examples/bootstrap-carousel/

Based on the plugin PayPal developed to enhance bootstrap 3 (​https://paypal.github.io/bootstrap-accessibility-plugin/) and further enhanced:
Tabpanel Accessibility Plugin
​https://jongund.github.io/aria-examples/bootstrap-carousel/carousel-3.html

The last resource is one of the most accessible sliders I've seen but, again, I'd consider to don't use a slider in the first place :)

[tellyworth]

The solution here seems to be to switch from the existing slideshow module to a more accessible one, which deserves its own ticket.