[wp-meta] [Making WordPress.org] #2654: Improve Screenshot Slider Accessibility

[Making WordPress.org]

#2654: Improve Screenshot Slider Accessibility
------------------------------+-------------------------------------------
 Reporter:  kevinwhoffman     |       Owner:
     Type:  defect            |      Status:  new
 Priority:  normal            |   Milestone:  Plugin Directory v3 - Future
Component:  Plugin Directory  |  Resolution:
 Keywords:  ux-feedback       |
------------------------------+-------------------------------------------

Comment (by 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 more accessible sliders I've seen but,
 again, I'd consider to don't use a slider in the first place :)

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/2654#comment:3>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org