-
Task
-
Resolution: Unresolved
-
Should have
-
None
-
5
-
Accessibility, Block: Gallery
Make sure the Gallery block sounds good and makes sense in a Screen Reader, on its three different styles.
Carousel Gallery
- Provide an "aria-label"to "carousel-inner", explaining you are interacting with a slider, a set of pictures. As with the Carousel Header, the Carousel is annouced as a "list box" by VoiceOver because of the "role=listbox" attribute in the markup, you can press VO+Shift+Down Arrow to start interacting with it.
- Add an "aria-live" attribute to "carousel-inner", so when you press one of the buttons, the next image is read aloud automatically.
- Remember image captions for SRs should start with something like "Image of a...", maybe we can add something preceding the caption. Maybe just "Picture:".
- A play/pause button. As this is a Bootstrap Carousel, investigate on how to build that feature, maybe there's something in the Bootstrap docs. Toggling the play/pause button should change the aria-live attribute from "off" to "polite" respectively. "Off" when playing, "polite" when paused.
- The text for the buttons "Previous" and "Next" should be more descriptive, e.g.: "Previous slide".
- Some guidelines here for carousels with autoplay here: https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1.html
Three-columns Gallery
- This is read pretty well, check the captions issue as described above.
Grid Gallery
- This one goes pretty well too, check the captions.
Copied at Github