Visible content that names, and may also describe, a
Visible content that names, or describes a
When using caption authors SHOULD ensure:
caption is a direct child of a caption is the first child of a caption is the first or last child of a caption is a direct child of a caption is the first non-generic child of a caption is the first or last non-generic child of a Authors SHOULD set figure, table, grid, or caption. However, if a caption contains content that serves as both a name and description for its parent, authors MAY instead set caption that contains a concise name, and set caption that contains the descriptive content.
If the caption represents an accessible name for its containing element, authors SHOULD specify caption.
+ <div role="radiogroup" aria-labelledby="cap"> + <div role="caption" id="cap"> + Choose your favorite fruit + </div> + <!-- ... --> ++ +
If a caption contains content that serves as both a name and description for its parent, authors MAY instead specify caption that represents the "name" of the parent element, and specify caption that represents the descriptive content.
<div role="table" aria-labelledby="name" aria-describedby="desc"> <div role="caption"> @@ -1820,6 +1830,38 @@+ +Definition of Roles
</div> <!-- ... -->
If the caption represents a long-form description, or if the description contains semantic elements which are important in understanding the description, authors MAY instead specify caption that represents the "name" of the parent element, and specify caption that contains the descriptive content.
+ <div role="figure" aria-labelledby="name" aria-details="details"> + <!-- figure content here, such as a complex data viz SVG --> + <div role="caption"> + <div id="name">Sales information for 20XX</div> + <div id="details"> + This barchart represents the total amount of sales over the course + of five years. <a href="...">Sales information for last year</a> can + be reviewed, or you can overlay <button aria-pressed="false">previous year</button> + information in this graphic. + </div> + </div> + <!-- ... --> ++ +
There may be instances where a caption contains only a description, without a suitable text string to serve as the accessible name for the parent element. In such instances, caption MAY be treated solely as descriptive content.
+
+
+ <div role="figure" aria-label="Sales information" aria-details="details"> + <!-- figure content here, such as a complex data viz SVG --> + <div role="caption" id="details"> + This barchart represents the total amount of sales over the course + of five years. <a href="...">Sales information for last year</a> can + be reviewed, or you can overlay <button aria-pressed="false">previous year</button> + information in this graphic. + </div> + <!-- ... --> ++
| Related Concepts: | -<caption> in [[HTML]] <figcaption> in [[HTML]] |
+
+ <caption> in [[HTML]] + <figcaption> in [[HTML]] + <legend> in [[HTML]]
+ |
|---|---|---|
| Required Context Role: |