A11y: `image_wrapper` macro captions

[edisile]

Summary

The image_wrapper macro defined in macros/_macro-image.jinja should associate caption elements to the image

Explanation

The current implementation of the macro features an image and a caption slot, but has no way to link them to each other. The latter slot's contents are rendered inside a <p> tag, meaning that the caption will be exposed in the accessibility tree as regular text content on the page. This might confuse users that consume content through a screen reader by adding an unrelated paragraph describing an image they have no way of knowing is there.

Solution

Captions should be associated to the image they are tied to via the aria-describedby attribute. Ideally, semantic markup using <figure> and <figcaption> tags should also be used, but doing this alone wouldn't be enough because screen reader support for these tags is quite spotty