WordPress.org

Making WordPress.org

Opened 5 months ago

Last modified 4 months ago

#2654 new defect

Improve Screenshot Slider Accessibility

Reported by: kevinwhoffman Owned by:
Milestone: Plugin Directory v3 - Future 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 (6)

#1 @kevinwhoffman
5 months ago

  • Milestone set to Plugin Directory v3 - Future

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


5 months ago

#3 @afercia
5 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 4 months ago by afercia (previous) (diff)

#4 @rianrietveld
5 months ago

  • Keywords a11y-feedback added; ux-feedback removed

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


5 months ago

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


4 months ago

Note: See TracTickets for help on using tickets.