Accessibility tweaks for blog posts' featured image component

[beepdotgov]

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 img element, with an alt text 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:

<figure class="post-feature_image" role="img" title="{{ include_image_alt }}" style="background-image: url('{{ site.baseurl }}{{ include_image }}')">
   [ … ]
</figure>

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.

Steps to reproduce the behavior

• Open https://18f.gsa.gov/2016/07/18/cloud-gov-full-steam-ahead-fedramp-assessment-process/
• Activate a screen reader (or run an accessibility checker, à la WAVE)
• Navigate to the featured image
• Try to read both the alt text and the figure's caption

This issue is done when

• A screen reader is used on https://18f.gsa.gov/2016/07/18/cloud-gov-full-steam-ahead-fedramp-assessment-process/ to confirm that both the image's text equivalent and the figure's caption can be accessed.