Open jasonday opened 2 years ago
That's a nice idea! Is it likely to break anything (I can't see anything obvious...)?
@LisaFC does the imgproc shortcode need to have alt text added (or is there another way to add alt text that marries this shortcode with Hugo's approach)? Note: images either need alt=""
to indicate that it's a decorative image or alt="image description"
to ensure screen readers can parse the image. figcaption
s are not a substitute for alt text.
For example, I could see:
resources:
- src: "**spruce*.jpg"
params:
byline: "Photo: Bjørn Erik Pedersen / CC-BY-SA"
alt: "Norway Spruce Picea abies shoot with foliage buds."
And then in the improc code:
<img class="card-img-top" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $image.Params.alt }}>
I can add this to my pull request if this shortcode does not work with Hugo's method of adding alt text to a page bundle image.
FWIW I've done this in a markdown hook using a number of different methods I've found around to also make responsive images. See render-image.html in yusaopeny_docs
The code used looks like ![Alt text](image.png "This is a caption/alt.")
where the text after is used as both the caption and the alt text, although that could be modified, I'm not sure how supporting both separately would work in markdown.
Current output of
imgproc
from docsy-example site:To be more semantically aligned and to improve accessibility, I propose using
<figure>
and<figcaption>
for images included in this manner, which creates a programmatic association between the image and the additional text, providing more context for screen readers :