Use <figure> and <figcaption> for image captions

Using a <p> tag as a caption is invisible to assistive technology as an image description. The <figure>/<figcaption> pattern creates a machine-readable relationship between an image and its caption, which screen readers surface to users. It also communicates to search engines that the caption describes the image, supporting image SEO.

Quick Reference

• Wrap image + visible caption pairs in <figure> with <figcaption> as a direct child
• <figcaption> must be the first or last child of <figure>
• Do not duplicate alt text in figcaption—alt is the fallback, figcaption is the visible description
• <figure> is appropriate for images, code blocks, diagrams, and charts—not every image

Check

Scan the codebase for images with adjacent visible text that acts as a caption (e.g., a <p> or <span> immediately below an <img> describing it). Verify: 1) Such image-caption pairs are wrapped in <figure>. 2) The caption text is inside a <figcaption> element. 3) <figcaption> is a direct child of <figure>. 4) The alt text on the <img> is not identical to the <figcaption> text—they serve different purposes. Flag any <img> follow…