Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

revise caption definition #1703

Merged
merged 8 commits into from
Apr 29, 2022
Merged

revise caption definition #1703

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
50294dc
revise caption definition
scottaohara Mar 12, 2022
40056f3
add in missing id to first example
scottaohara Mar 12, 2022
753495c
fix spacing issues
scottaohara Mar 12, 2022
4af5c88
include additional example
scottaohara Apr 4, 2022
7a58493
Update index.html
scottaohara Apr 28, 2022
cdc2951
Update index.html
scottaohara Apr 28, 2022
b1e44e3
Update index.html
scottaohara Apr 28, 2022
f570537
Update index.html
scottaohara Apr 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 39 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1790,15 +1790,25 @@ <h2>Definition of Roles</h2>
<div class="role" id="caption">
<rdef>caption</rdef>
<div class="role-description">
<p>Visible content that names, and may also describe, a <rref>figure</rref>, <rref>table</rref>, <rref>grid</rref>, or <rref>treegrid</rref>.</p>
<p>Visible content that names, or describes a <rref>group</rref>, <rref>figure</rref>, <rref>table</rref>, <rref>grid</rref>, <rref>radiogroup</rref>, or <rref>treegrid</rref>.</p>
<p>When using <code>caption</code> authors SHOULD ensure:</p>
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
<ul>
<li>The <code>caption</code> is a direct child of a <rref>figure</rref>, <rref>table</rref>, <rref>grid</rref>, or <rref>treegrid</rref>.</li>
<li>The <code>caption</code> is the first child of a <rref>table</rref>, <rref>grid</rref>, or <rref>treegrid</rref>.</li>
<li>The <code>caption</code> is the first or last child of a <rref>figure</rref>.</li>
<li>The <code>caption</code> is a direct child of a <rref>group</rref>, <rref>figure</rref>, <rref>grid</rref>, <rref>radiogroup</rref>, <rref>table</rref>, or <rref>treegrid</rref>.</li>
pkra marked this conversation as resolved.
Show resolved Hide resolved
<li>The <code>caption</code> is the first non-<code>generic</code> child of a <rref>group</rref>, <rref>radiogroup</rref>, <rref>grid</rref>, <rref>table</rref>, or <rref>treegrid</rref>.</li>
<li>The <code>caption</code> is the first or last non-<code>generic</code> child of a <rref>figure</rref>.</li>
</ul>
<p>Authors SHOULD set <pref>aria-labelledby</pref> on the parent <code>figure</code>, <code>table</code>, <code>grid</code>, or <rref>treegrid</rref> to reference the element with role <code>caption</code>. However, if a <code>caption</code> contains content that serves as both a name and description for its parent, authors MAY instead set <pref>aria-labelledby</pref> to reference an element within the <code>caption</code> that contains a concise name, and set <pref>aria-describedby</pref> to reference an element within the <code>caption</code> that contains the descriptive content.</p>

<p>If the <code>caption</code> represents an accessible name for its containing element, authors SHOULD specify <pref>aria-labelledby</pref> on the parent element to reference the element with role <code>caption</code>.</p>

<pre class="example highlight">
&lt;div role="radiogroup" aria-labelledby="cap"&gt;
&lt;div role="caption" id="cap"&gt;
Choose your favorite fruit
&lt;/div&gt;
&lt;!-- ... --&gt;
</pre>

<p>If a <code>caption</code> contains content that serves as both a name and description for its parent, authors MAY instead specify <pref>aria-labelledby</pref> to reference an element within the <code>caption</code> that represents the "name" of the parent element, and specify <pref>aria-describedby</pref> to reference an element within the <code>caption</code> that contains the descriptive content.</p>

<pre class="example highlight">
&lt;div role="table" aria-labelledby="name" aria-describedby="desc"&gt;
&lt;div role="caption"&gt;
Expand All @@ -1810,6 +1820,24 @@ <h2>Definition of Roles</h2>
&lt;/div&gt;
&lt;!-- ... --&gt;
</pre>

<p>If the <code>caption</code> represents a long-form description, or if the description contains semantic elements which are important in understanding the description, authors MAY instead specify <pref>aria-labelledby</pref> to reference an element within the <code>caption</code> that represents the "name" of the parent element, and specify <pref>aria-details</pref> to reference an element within the <code>caption</code> that contains the descriptive content.</p>
scottaohara marked this conversation as resolved.
Show resolved Hide resolved

<pre class="example highlight">
&lt;div role="figure" aria-labelledby="name" aria-details="details"&gt;
&lt;!-- figure content here, such as a complex data viz SVG -->
&lt;div role="caption"&gt;
&lt;div id="name"&gt;Sales information for 20XX&lt;/div&gt;
&lt;div id="details"&gt;
This barchart represents the total amount of sales over the course
of five years. <a href="...">Sales information for last year</a> can
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
be reviewed, or you can overlay <button aria-pressed="false">previous year</button>
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
information in this graphic.
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- ... --&gt;
</pre>

</div>
<table class="role-features">
<caption>Characteristics:</caption>
Expand Down Expand Up @@ -1838,7 +1866,11 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-related-head" scope="row">Related Concepts:</th>
<td class="role-related"><code>&lt;caption&gt;</code> in [[HTML]] <br/> <code>&lt;figcaption&gt;</code> in [[HTML]]</td>
<td class="role-related">
<code>&lt;caption&gt;</code> in [[HTML]] <br>
<code>&lt;figcaption&gt;</code> in [[HTML]] <br>
<code>&lt;legend&gt;</code> in [[HTML]]
</td>
</tr>
<tr>
<th class="role-scope-head" scope="row">Required Context Role:</th>
Expand Down