Update index.html (#1745)

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.

index.html

@@ -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;
@@ -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;
@@ -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;
@@ -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;