Adding captions to images?

[jmooring]

You’re stretching my a11y knowledge. I’d try it both ways…

• Add the aria-labelledby attribute to the picture element, or
• Add the aria-labelledby attribute to the img element within the picture element

… and then use an a11y validator to see which one passes.

[tut]

I use WAVE accessibility tool and it reports no issues before or after the caption is added. I will test further with other tools. Thanks for this.

[Mehdi_Saada]

Okay you can’t cut a paragraph with a div element, fair enough.
But I changed the display attribute of the figure tag to “inline” or “flex”, in either case it changes nothing to the validator’s complains (The W3C Markup Validation Service).
Why is it treated differently from <img>, this is stupid !

Figure is MADE to be used for captions, I am not switching for some weird, awkward and unnecessary syntax when it’s w3c’s fault to not have standards in line with its own html semantics.

It works, changing display should suffice, hence I’ll keep it that way.

[cshoredaniel]

@jmooring

@chrillek

I have a image render hook producing a figure, and this figure is not wrapped in a p

I’d love to see a test repo that demonstrates this.

I’ve run into this before too, unfortunately I didn’t realize this was unexpected behaviour and do not have a repo to show you. I never identified when it would add the <p> and when not, so I just created the render hook to generate valid HTML when wrapped in a <p>.

If I run into it again, I will set up a demonstration repo.

[chrillek]

I’d like to modify my statement (after I ran my site through the W3C validator): The HTML contains a closing p tag right after the figure, but there was never an opening one (before the figure or at all).

So, you’re right (of course): Using figure in a render_image_hook produces invalid HTML. Firefox apparently simply adds an opening p tag just before the closing one, so that there seems to be an empty paragraph. Duh.