Use when reviewing image assets, markup, and CDN or build transforms related to Use <figure> and <figcaption> for image captions. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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.
<figure> with <figcaption> as a direct child<figcaption> must be the first or last child of <figure><figure> is appropriate for images, code blocks, diagrams, and charts—not every imageScan 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> followed by descriptive text that is not structured as figure/figcaption.
For each image with an adjacent caption: 1) Wrap the <img> and its caption text in a <figure> element. 2) Move the caption text into a <figcaption> element inside <figure>. 3) Review the <img> alt attribute—if the figcaption already fully describes the image for sighted users, the alt can be shorter or empty (alt="") only if the figcaption alone is sufficient for screen readers too; otherwise keep a concise alt. 4) Position <figcaption> as the first or last child of <figure>. Show the corrected HTML.
Explain the semantic meaning of <figure> and <figcaption>. The <figure> element represents self-contained content (an image, code sample, diagram) that is referenced from the main content but could be moved without affecting the document flow. <figcaption> provides a caption or legend for the figure. Screen readers announce the figcaption in association with the figure, giving users context. Without this markup, sighted users see a caption but screen reader users hear only the alt text with no indication that a visible caption exists.
Review image assets, markup, and delivery configuration related to Use <figure> and <figcaption> for image captions. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/images/figure-figcaption
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.
日本語の概要は準備中です。原文の説明を表示しています。
Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. Verify the rendered HTML and HTTP response rather than relying only on source files.
日本語の概要は準備中です。原文の説明を表示しています。
Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks. Automated testing is strongest at catching structural and attribute-level issues; it does not replace keyboard, screen reader, and manual UX testing.
日本語の概要は準備中です。原文の説明を表示しています。
Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path, including error handling and backup methods, not just the primary login form.
日本語の概要は準備中です。原文の説明を表示しています。
Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate the final browser-facing markup, not just the source framework abstraction.
日本語の概要は準備中です。原文の説明を表示しています。
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table markup for screen readers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
日本語の概要は準備中です。原文の説明を表示しています。