A11Y Improvements: Add Alt Attribute from Post Metadata Or Default to Empty Value

[jayjayjpg]

Closes #19

Expected

Screen reader users should be able to

• read an image description for images containing informative content
• skip images that are purely decorative and not get notified by their screenreader if they encounter such an image

What this PR does

This adds the ability for blog authors to provide an alternative text for header images that will be set as to the alt attribute via the imageMeta.alt property. If no imageMeta.alt is provided it will default to "" which in turn applies an empty alt attribute to the image instead.

How to reproduce

• start VoiceOver on Mac (or alternatively, e.g. ChromeVox on other OSes)
• navigate to a page with a header image
• focus the page
• navigate to the next graphic using the Graphic navigation command in VoiceOver: Ctrl + Opt + Cmd + G to focus on the image
• --> the screenreader will read the url for the image instead of 1. reading the alt text if one is available or 2. skipping the image entirely no description of the image is available

You can also review the shortcuts for VoiceOver for navigating websites over here

Demos

Example Informative Image

before	after

Example Decorative Image

before (no alt text provided)	after (no alt text provided)

alt="" vs. alt

It seems both the empty attribute syntax with an empty string value (<img alt="">) as well as the sole use of the alt attribute (<img alt>) can be used interchangeably as valid implementations of the WCAG guidelines for decorative images when following the spec of the empty attribute syntax:

Empty attribute syntax
Just the attribute name. The value is implicitly the empty string.
In the following example, the disabled attribute is given with the empty attribute syntax:
<input disabled>

[jayjayjpg]

@mansona Do you have time to take a look?

[jrock2004]

Is this ever going to get merged? Would like to get alt text on my images

[knownasilya]

Ping 👍