PLANET-5226 Gallery Block Accessibility

[planet-4]

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.

Reporter: pcuadrad
Sections: Block: Gallery

Potentially affected repositories: planet4-plugin-gutenberg-blocks

Testing

Add the Gallery block to a page and test it with a screen reader. You can check the docs for more details on how the block works.