Skip to content

Commit

Permalink
Update index.html (#1745)
Browse files Browse the repository at this point in the history 
Closes #1734

Various wording updates to move away from the parent > child relationship that was originally written, and instead loosen the placement requirements to allow for intervening generic elements, or other potential generic content to precede the caption in the DOM of its containing element.
  • Loading branch information
@scottaohara @jnurthen
scottaohara authored and jnurthen committed Oct 10, 2023
1 parent b8ca99e commit d514540
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1730,11 +1730,11 @@ <h2>Definition of Roles</h2>
<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>
<ul>
<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>
<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>
<li>The <code>caption</code> is a descendant of a <rref>group</rref>, <rref>figure</rref>, <rref>grid</rref>, <rref>radiogroup</rref>, <rref>table</rref>, or <rref>treegrid</rref>.</li>
<li>The <code>caption</code> is the first non-<code>generic</code> descendant 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> descendant of a <rref>figure</rref>.</li>
</ul>
<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>
<p>If the <code>caption</code> represents an accessible name for its containing element, authors SHOULD specify <pref>aria-labelledby</pref> on the containing element to reference the element with role <code>caption</code>.</p>

<pre class="example highlight">
&lt;div role="radiogroup" aria-labelledby="cap"&gt;
Expand All @@ -1744,7 +1744,7 @@ <h2>Definition of Roles</h2>
&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 represents the descriptive content.</p>
<p>If a <code>caption</code> contains content that serves as both a name and description for its containing element, authors MAY instead specify <pref>aria-labelledby</pref> to reference an element within the <code>caption</code> that represents the "name" of the containing element, and specify <pref>aria-describedby</pref> to reference an element within the <code>caption</code> that represents the descriptive content.</p>

<pre class="example highlight">
&lt;div role="table" aria-labelledby="name" aria-describedby="desc"&gt;
Expand All @@ -1758,7 +1758,7 @@ <h2>Definition of Roles</h2>
&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>
<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 containing element, and specify <pref>aria-details</pref> to reference an element within the <code>caption</code> that represents the descriptive content.</p>

<pre class="example highlight">
&lt;div role="figure" aria-labelledby="name" aria-details="details"&gt;
Expand All @@ -1775,7 +1775,7 @@ <h2>Definition of Roles</h2>
&lt;!-- ... --&gt;
</pre>

<p>There may be instances where a <code>caption</code> contains only a description, without a suitable text string to serve as the accessible name for the parent element. In such instances, <pref>aria-label</pref> or <pref>aria-labelledby</pref> MAY be used to provide an accessible name, and the <code>caption</code> MAY be treated solely as descriptive content.
<p>There may be instances where a <code>caption</code> contains only a description, without a suitable text string to serve as the accessible name for its containing element. In such instances, <pref>aria-label</pref> or <pref>aria-labelledby</pref> MAY be used to provide an accessible name, and the <code>caption</code> MAY be treated solely as descriptive content, referenced via <pref>aria-details</pref>.

<pre class="example highlight">
&lt;div role="figure" aria-label="Sales information" aria-details="details"&gt;
Expand Down

0 comments on commit d514540

Please sign in to comment.