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

Covers Block Accessibility


    • 2
    • Accessibility, Block: Covers

      Test the Covers block for Accessibility.

      Known issues:

      Content Covers

      • The image's alt tags seems to be the article slug currently.
      • Ideally, there shouldn't be two adjacent links with the same text or linking to the same page. The image and the title have pretty much the same text (the slug is pretty much the title), so check the links again after fixing the first issue. If possible, test using VoiceOver's "rotor". Consider hiding one of these links to the SR using aria-hidden.

      Take Action Covers

      • The image alt tag is the article slug.
      • Both the image and the caption link to the same place. Consider using aria-hidden to hide one of these links to the SR.
      • The hashtags are read as "numeric symbol" + the word. Look for the "Hashtag accessibility" issue in this Epic to see if we found a solution for them.
      • The excerpt is never shown/read, maybe we should bring it up on focus and use aria-live=polite on the block to make sure it announces the changes.
      • The CTA is also never shown/read, as it relies on hover. 
      • As nor the CTA, Excerpt or Image captions are there, is pretty hard to know what the cover is about.

      Campaign Covers

      • The same issue with the #Hashtags happens.
      • There is no alt text/caption for the image, it's just a link with the hashtag as a titile, so it's pretty hard to tell what the cover is about. Maybe we should add some SR-only span with some aid text has: "Check our campaigns about: #Climate, #Consumption" and wrap everything in a role=text span to ensure it's read as a single line.



      Copied to Github

            dpivo Dylan Pivo
            pcuadrad Pablo Cuadrado (Inactive)
            0 Vote for this issue
            0 Start watching this issue