Alt text images

[AdrianDAlessandro]

This PR enables us to use {: .no-caption } as an attribute list after defining images for when we do not want there to be a caption.

I will add the following to the README after #41 is merged:

Images are converted to figures automatically using the MkDocs Caption extension. This extension enables putting captions on tables and lists as well as images, however the most basic behaviour uses the image's Alt Text field to populate the figure caption.

For Example:

![figure caption](img.jpg)

Will be converted to:

<p>
<figure id=_figure-1>
    <img alt="figure caption" src="img.jpg" />
    <figcaption>Figure 1: figure caption</figcaption>
</figure>
</p>

Which will render as a centred image with the caption "Figure 1: figure caption".

If you do not want the image to have a caption, you can label it as a no-caption class using an Attribute List. Reminder, it is important to include Alt Text for accessibility reasons.

![figure caption](img.jpg) {: .no-caption }

You can then add to the attribute list to further specify the style. A useful one is for centering images:

![figure caption](img.jpg) {: .no-caption style="display:block;margin:auto;"}

More information on image style options can be found in the Mozilla Documentation.

Close #46

[dc2917]

This looks good to me, and does what we want it to.

As a sort-of aside:

Reminder, it is important to include Alt Text for accessibility.

Would we therefore not want it to do something like:

<p>
<figure id=_figure-1>
    <img src="img.jpg" alt=figure caption/>
    <figcaption>Figure 1: figure caption</figcaption>
</figure>
</p>

i.e. populate the alt attribute of the img tag as well? I'd have thought that if the caption is just text on the page then a screen reader would pick it up, but I had a quick google and a read of this article, where someone has tested different screen readers, browsers and combinations of alt text and caption presence. It seems that in many cases, if the alt attribute is empty, the screen reader just ignores the image, including the caption 😕

[SaranjeetKaur]

Thanks @AdrianDAlessandro! I feel it is important to include alt-text on images. Do you think we should link a alt-text guide for reference on the README?

As Dan mentioned, I would also prefer to populate the alt attribute.

[AdrianDAlessandro]

Thanks @dc2917 and @SaranjeetKaur

I've checked the mkdocs-caption plugin and it does maintain the alt text (see source code), unlike how their documentation suggests (which is where I pulled that lump of html from). So I'll adjust that accordingly for the README.

[dalonsoa]

LGTM!

[dalonsoa]

Maybe mention that it also becomes the actual Alt Text, in addition to the caption, important for screen readers, as mentioned?