While pairing on #3862, I noticed that the "featured image" component on blog posts (example 1, example 2, example 3) uses some potentially inaccessible markup.
From the visuals, I expected the image would have been marked up as an img element, with an alt text containing its text equivalent, and some CSS (e.g., cover) to control its layout.
The featured image is currently rendered as a background-image on a figure element, with a title attribute used for the image's text equivalent. And visually, this looks beautiful! With that, it's worth noting that the title attribute isn't especially accessible (reference 1, reference 2), which means many users may not be able to access the image's description.
Also, the presence of role="img"could mean that the contents of the image (like the caption, when present) isn't accessible to certain kinds of AT. (Note: I'm currently unable to access a screen reader on this machine, so I could be wrong about this! Basing this on a.) my understanding of role="img" being treated as a replaced element and b.) this note on MDN, but I'd be happy to be proven wrong.
Switching the title to aria-label would make the image's text alternative more accessible, but might not address how role="img" (potentially) complicates access to the internal figcaption. It might be worth refactoring this component to remove the role, inline the image, and allow direct access to both an alt="" attribute and the figure's figcaption.
Expected Behavior
While pairing on #3862, I noticed that the "featured image" component on blog posts (example 1, example 2, example 3) uses some potentially inaccessible markup.
From the visuals, I expected the image would have been marked up as an
imgelement, with analttext containing its text equivalent, and some CSS (e.g.,cover) to control its layout.Actual Behavior
Here's the relevant bit of
_includes/feature-image.html:The featured image is currently rendered as a
background-imageon afigureelement, with atitleattribute used for the image's text equivalent. And visually, this looks beautiful! With that, it's worth noting that thetitleattribute isn't especially accessible (reference 1, reference 2), which means many users may not be able to access the image's description.Also, the presence of
role="img"could mean that the contents of the image (like the caption, when present) isn't accessible to certain kinds of AT. (Note: I'm currently unable to access a screen reader on this machine, so I could be wrong about this! Basing this on a.) my understanding ofrole="img"being treated as a replaced element and b.) this note on MDN, but I'd be happy to be proven wrong.Switching the
titletoaria-labelwould make the image's text alternative more accessible, but might not address howrole="img"(potentially) complicates access to the internal figcaption. It might be worth refactoring this component to remove therole, inline the image, and allow direct access to both analt=""attribute and the figure'sfigcaption.Steps to reproduce the behavior
This issue is done when