Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5226

Gallery Block Accessibility


    • 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

            Unassigned Unassigned
            pcuadrad Pablo Cuadrado (Inactive)
            0 Vote for this issue
            0 Start watching this issue