Opened 7 years ago

Closed 7 years ago

Last modified 3 years ago

#2654 closed defect (bug) (maybelater)

Improve Screenshot Slider Accessibility

Reported by: kevinwhoffman's profile kevinwhoffman Owned by:
Milestone: Priority: normal
Component: Plugin Directory Keywords: a11y-feedback


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.

Change History (7)

#1 @kevinwhoffman
7 years ago

  • Milestone set to Plugin Directory v3 - Future

This ticket was mentioned in Slack in #accessibility by kevinwhoffman. View the logs.

7 years ago

#3 @afercia
7 years ago

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:

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
WebAIM | Q&A about this web site
Jared Smith (@jared_w_smith) of WebAIM
Center for Persons with Disabilities
Utah State University

ARIA tabs

The Unbearable Inaccessibility of Slideshows

About Carousels and ARIA Tabs

Compare Carousel Examples

Based on the plugin PayPal developed to enhance bootstrap 3 ( and further enhanced:
Tabpanel Accessibility Plugin

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 :)

Last edited 7 years ago by afercia (previous) (diff)

#4 @rianrietveld
7 years ago

  • Keywords a11y-feedback added; ux-feedback removed

This ticket was mentioned in Slack in #meta by ipstenu. View the logs.

7 years ago

This ticket was mentioned in Slack in #core-editor by afercia. View the logs.

7 years ago

#7 @tellyworth
7 years ago

  • Milestone Plugin Directory v3 - Future deleted
  • Resolution set to maybelater
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.