Some rules for image captions and alt text

Images are often wrapped in a figure. Figures often contain a figcaption to “represent a caption or legend describing the rest of the contents of its parent
element.” And best practices advise us to use the alt attribute on an img to “provides fallback (alternate) text to display when the image specified by the element is not loaded.”

Some things about the relationship between figcaption and alt text:

• The alt attribute is mandatory, even if it’s empty (""). A figcaption is optional. It’s a good idea to use something like Emmet to auto-generate the tag for you as you type.
• The text used for the alt attribute should be different from the text contained in a figcaption. It’s redundant content that is annoying to an end user who has to hear it announced twice.
• Marking an image as decorative (alt="") is invalid when a figcaption is present. That makes a lotta sense to me, as why would you describe the image in one place if it isn’t meant to be announced?
• Some screenreaders may announce an image with whitespace used as the alt value (alt=" "). Didn’t know that! Wish I had more ways to test that and hear how it sounds.