WordPress.org

Making WordPress.org

Opened 9 months ago

Closed 6 weeks ago

#2654 closed defect (maybelater)

Improve Screenshot Slider Accessibility

Reported by: kevinwhoffman Owned by:
Milestone: Priority: normal
Component: Plugin Directory Keywords: a11y-feedback
Cc:

Description

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
9 months ago

  • Milestone set to Plugin Directory v3 - Future

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


8 months ago

#3 @afercia
8 months 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:
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 :)

Last edited 8 months ago by afercia (previous) (diff)

#4 @rianrietveld
8 months ago

  • Keywords a11y-feedback added; ux-feedback removed

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


8 months ago

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


8 months ago

#7 @tellyworth
6 weeks 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.