Visible content that names, and may also describe, a figure, table, grid, or treegrid.
+
Visible content that names, or describes a group, figure, table, grid, radiogroup, or treegrid.
When using caption authors SHOULD ensure:
-
The caption is a direct child of a figure, table, grid, or treegrid.
-
The caption is the first child of a table, grid, or treegrid.
-
The caption is the first or last child of a figure.
+
The caption is a direct child of a group, figure, grid, radiogroup, table, or treegrid.
+
The caption is the first non-generic child of a group, radiogroup, grid, table, or treegrid.
+
The caption is the first or last non-generic child of a figure.
-
Authors SHOULD set aria-labelledby on the parent figure, table, grid, or treegrid to reference the element with role caption. However, if a caption contains content that serves as both a name and description for its parent, authors MAY instead set aria-labelledby to reference an element within the caption that contains a concise name, and set aria-describedby to reference an element within the caption that contains the descriptive content.
-
+
If the caption represents an accessible name for its containing element, authors SHOULD specify aria-labelledby on the parent element to reference the element with role caption.
+
+
+ <div role="radiogroup" aria-labelledby="name">
+ <div role="caption">
+ 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 aria-labelledby to reference an element within the caption that represents the "name" of the parent element, and specify aria-describedby to reference an element within the caption that contains the descriptive content.
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 aria-labelledby to reference an element within the caption that represents the "name" of the parent element, and specify aria-details to reference an element within the 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. Sales information for last year can
+ be reviewed, or you can overlay
+ information in this graphic.
+ </div>
+ </div>
+ <!-- ... -->
+
+
Characteristics:
@@ -1838,7 +1866,11 @@
Definition of Roles
Related Concepts:
-
<caption> in [[HTML]] <figcaption> in [[HTML]]
+
+ <caption> in [[HTML]]
+ <figcaption> in [[HTML]]
+ <legend> in [[HTML]]
+