Brief summary of task:

Improve a11y of Covers block markup

Objectives of task:

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.