From 2ffc69a64c5875a42d68ac64fe54e6298f2fc8d8 Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Fri, 29 Apr 2022 07:12:06 +0000 Subject: [PATCH] revise caption definition (#1703) SHA: 2d2d3413a65c9e63a6fe94b0a378d2cf82c9fc2e Reason: push, by @pkra Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- index.html | 204 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 128 insertions(+), 76 deletions(-) diff --git a/index.html b/index.html index c0a9898c6..678246d75 100644 --- a/index.html +++ b/index.html @@ -1199,7 +1199,7 @@

Accessible Rich Internet Applications (WAI-ARIA) 1.
button
An input that allows for user-triggered actions when clicked or pressed. See related link.
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.
cell
A cell in a tabular container. See related gridcell.
checkbox
@@ -2232,18 +2232,30 @@

button

caption role

-

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:

-

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.

+
Example 5 + 
<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.

+ +
+
+ Example 6 
<div role="table" aria-labelledby="name" aria-describedby="desc">
    <div role="caption">
      <div id="name">Contest Entrants</div>
@@ -2254,6 +2266,42 @@ 
capt
    </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.

+ +
+
+ Example 7 + 
<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. + +

+
+ Example 8 + 
<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>
+   <!-- ... -->
+
+
@@ -2273,7 +2321,11 @@

capt

- + @@ -2782,9 +2834,9 @@

co
  • If the combobox element is a host language element that provides a value, such as an HTML input element, the value of the combobox is the value of that element.
  • Otherwise, the value of the combobox is represented by its descendant elements and can be determined using the same method used to compute the name of a button from its descendant content.
    • -
    +
    - Example 6 + Example 9 
        <label id="tag_label" for="tag_combo">Tag</label>
   <input type="text" id="tag_combo"
       role="combobox" aria-autocomplete="list"
@@ -5505,9 +5557,9 @@ 
    mathAt the time of this writing, some mainstream browsers do not support MathML natively, and must be retrofit using a JavaScript polyfill library. When authoring math content, use native MathML wherever possible, and test thoroughly. Use a polyfill library or provide a fallback image with a text alternative approximation if necessary.

    MathML Example with Embedded TeX Annotation

    -
    +
    - Example 7 + Example 10 
    <!-- Note: Use a JavaScript polyfill library to ensure
      this renders in user agents that do not support MathML. -->
 <!-- The math element has an implicit role="math". -->
@@ -5547,9 +5599,9 @@ 
    math
 				
    Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula
    
 				
    If a rendering engine does not support a native math format such as MathML, authors MAY use JavaScript to downgrade the content to a format the browser can display, such as this HTML image using a data URI and plain text alternative.
    
-				
    
+				
    
         
    
-    Example 8
+    Example 11
   
     
    <img role="math" src="..." alt="x=⟮−b±√⟮b²−4ac⟯⟯÷2a">
    
       
    
 				
@@ -6623,9 +6675,9 @@ 
    
 				
 				
    For any element with a role of presentation and which is not focusable, the user agent MUST NOT expose the implicit native semantics of the element (the role and its states and properties) to accessibility APIs. However, the user agent MUST expose content and descendant elements that do not have an explicit or inherited role of presentation. Thus, the presentation role causes a given element to be treated as having no role or to be removed from the accessibility tree, but does not cause the content contained within the element to be removed from the accessibility tree.
    
 				
    For example, the following two markup snippets will be exposed similarly to an accessibility API.
    
-				
    
+				
    
         
    
-    Example 9
+    Example 12
   
     
    <!-- 1. role="presentation" negates the implicit 'heading' role semantics but does not affect the contents, including the nested hyperlink. -->
 <h1 role="presentation"> Sample Content <a href="...">let's go!</a> </h1>
 
@@ -6638,9 +6690,9 @@ 
    
 				
    For any element with an explicit or inherited role of presentation and which is not focusable, user agents MUST ignore role-specific WAI-ARIA states and properties for that element. For example, in HTML, a ul or ol element with a role of presentation will have the implicit native semantics of its li elements removed because the list role to which the ul or ol corresponds has a required owned element of listitem. Likewise, the implicit native semantics of an HTML table element's thead/tbody/tfoot/tr/th/td descendants will also be removed, because the HTML specification indicates that these are required structural descendants of the table element.
    
 				
    Note
    Only the implicit native semantics of elements that correspond to WAI-ARIA required owned elements are removed. All other content remains intact, including nested tables or lists, unless those elements also have an explicit role of presentation specified.
    
 				
    For example, according to an accessibility API, the following markup elements would appear to have identical role semantics (no roles) and identical content.
    
-				
    
+				
    
         
    
-    Example 10
+    Example 13
   
     
    <!-- 1. [role="presentation"] negates the implicit 'list' and 'listitem' role semantics but does not affect the contents. -->
 <ul role="presentation">
   <li> Sample Content </li>
@@ -6657,18 +6709,18 @@ 
    
 				
    For any element with an explicit or inherited role of presentation, user agents MUST apply an inherited role of presentation to all host-language-specific labeling elements for the presentational element. For example, a table element with a role of presentation will have the implicit native semantics of its caption element removed, because the caption is merely a label for the presentational table.
    
 				
    Authors SHOULD NOT provide meaningful alternative text (for example, use alt="" in HTML) when the presentation role is applied to an image.
    
 				
    In the following code sample, the containing img and is appropriately labeled by the caption paragraph. In this example the img element can be marked as presentation because the role and the text alternatives are provided by the containing element.
    
-				
    
+				
    
         
    
-    Example 11
+    Example 14
   
     
    <div role="img" aria-labelledby="caption">
   <img src="example.png" role="presentation" alt="">
   <p id="caption">A visible text caption labeling the image.</p>
 </div>
    
       
    
 				
    In the following code sample, because the anchor (HTML a element) is acting as the treeitem, the list item (HTML li element) is assigned an explicit WAI-ARIA role of presentation to override the user agent's implicit native semantics for list items.
    
-				
    
+				
    
         
    
-    Example 12
+    Example 15
   
     
    <ul role="tree">
   <li role="presentation">
 	<a role="treeitem" aria-expanded="true">An expanded tree node</a>
@@ -8761,9 +8813,9 @@ 
    
 					
    Authors MUST ensure that a suggestion contains either one insertion child or one deletion child or ensure that it contains two children where one is an insertion and the other is a deletion. Authors MUST ensure a suggestion does not contain any other children.
    
 					
    Authors MAY use aria-details or aria-description to associate the suggestion with related information such as comments, authoring info, and time stamps.
    
-					
    
+					
    
         
    
-    Example 13
+    Example 16
   
     
    <p>
   The best pet is a
   <span role="suggestion">
@@ -9583,8 +9635,8 @@ 
    timeAn element that represents a specific point in time.
    
 				
    Note
    At the present time, there are no WAI-ARIA properties corresponding to the datetime attribute supported on <time> in [HTML]. The addition of this property will be considered for ARIA version 1.3.
    
 				
    Authors SHOULD limit text contents to a valid date- or time-related string, or apply this future datetime-equivalent property to the element which has role time.
    
-				
    
 
 			
-			
    
 
 			
-

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