From 82ae4b481f7dfa771dd5d705fd61f48d5fab9c79 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Fri, 29 Apr 2022 03:10:54 -0400 Subject: [PATCH] revise caption definition (#1703) * revise caption definition This change in the definition is related to the changes in `figure` and `figcaption` in HTML AAM: https://github.com/w3c/html-aam/pull/359 and introduces the idea that a `caption` may contain structured content - and in this PR - `aria-details` is referenced as a way authors should reference such content if within a `caption` Additionally, this PR extends the definition to allow `caption` to be used for purposes of naming/describing a `group` or `radiogroup`, which fills some gaps from the dropped `legend` role. If these updates are accepted, this would help pave the way to resolve #1696 as well. * add in missing id to first example * fix spacing issues * include additional example --- index.html | 60 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 53 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 8d5560702..974d793a7 100644 --- a/index.html +++ b/index.html @@ -1800,15 +1800,25 @@

Definition of Roles

caption
-

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="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 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 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 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. <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, aria-label or aria-labelledby MAY be used to provide an accessible name, and the 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>
+				    <!-- ... -->
+
+
@@ -1848,7 +1890,11 @@

Definition of Roles

- +
Characteristics:
Related Concepts:<caption> in [[HTML]]
<figcaption> in [[HTML]]		 + <caption> in [[HTML]]
+ <figcaption> in [[HTML]]
+ <legend> in [[HTML]] +
Required Context Role: