Skip to content

Commit c8435a9

Browse files
authored
contextual role concept proposal
closes #375 The purpose of this proposal is both to resolve the issue that "scoped" was an undefined term that was used to indicate when certain elements would expose particular ARIA roles or not. However, in the year of noodling on this, other activities to revise what "owned" means in ARIA, the idea of a minimum role, as well as the fact there were other elements in HTML that have "scoped" or "contextual roles" that are based on heuristics, rather than defined standards, became relevant. A change to hopefully help simplify the implementations of contextual roles is that this proposal is aiming to tie the role of an element based on its a11y tree ancestry, rather than based on specific HTML elements in the DOM. This PR represents the initial draft of the proposal. Other work to explicitly call out the elements that have contextual roles, what roles they need to adjust to, and other wording revisions to replace "scoped" with the new term would still need to be made.
1 parent da53b7d commit c8435a9

File tree

1 file changed

+64
-0
lines changed

1 file changed

+64
-0
lines changed

index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,70 @@ <h3>Exposing HTML Features That Do Not Directly Map to Accessibility APIs</h3>
210210
<abbr title="application programming interface">API</abbr> properties</a> in the [[core-aam-1.2]].
211211
</p>
212212
</section>
213+
<section id="mapping_contextual">
214+
<h3>Exposing HTML Features With Contextual Roles</h3>
215+
<p>
216+
An element with a <dfn>contextual role</dfn> is one whose implicit WAI-ARIA role semantics are based on its anestral <a>accessibility tree</a> relationship to another element or elements. Or, an element whose computed role is reliant on whether the element has been provided an accessible name.
217+
</p>
218+
<p>
219+
For instance, an element that is an <STRONG>accessibility child</STRONG> of its required <STRONG>accessibility parent</STRONG> would expose a computed role that was
220+
appropriate for this context. Where the same element might be used in another context with a different accessibility parent, and would therefore expose a computed role
221+
appropriate for that context.
222+
</p>
223+
<p>
224+
When the conditions for an element's contextual role are not met, it will commonly expose a computed role of `generic` or with a <a>minimum role</a>, if applicable.
225+
</p>
226+
<div class="note">
227+
<p>Previously, the concept of a contextual role was loosely referred to as an element's "scoped" relationship to another element.</p>
228+
</div>
229+
<div class="example">
230+
<p>
231+
A <code>li</code> element has an implicit WAI-ARIA role mapping of <code>listitem</code> only when the element is an <a>accessibility child</a> of a
232+
<code>menu</code>, <code>ol</code> or <code>ul</code> element that has not had its `list` role mapping suppressed.
233+
</p>
234+
<pre><code>&lt;ul>
235+
&lt;li>...&lt;/li> &lt;!-- role=listitem -->
236+
&lt;/ul>
237+
&lt;article>
238+
...
239+
&lt;li>...&lt;/li> &lt;!-- not role=listitem -->
240+
...</code></pre>
241+
</div>
242+
<div class="example">
243+
<p>
244+
An <code>aside</code> element has an implicit WAI-ARIA role mapping of <code>complementary</code> only when the element is an <a>accessibility child</a> of
245+
the <code>body</code> or <code>main</code> elements, or if the <code>aside</code> has been provided an accessible name.
246+
</p>
247+
<pre><code>&lt;body>
248+
...
249+
&lt;main>
250+
...
251+
&lt;article>
252+
&lt;aside>...&lt;/aside> &lt;!-- not role=complementary -->
253+
...
254+
&lt;aside aria-label=named>...&lt;/aside> &lt;!-- role=complementary -->
255+
&lt;/article>
256+
...
257+
&lt;aside>...&lt;/aside> &lt;!-- role=complementary -->
258+
&lt;/main>
259+
&lt;aside>...&lt;/aside> &lt;!-- role=complementary -->
260+
...
261+
&lt;footer>
262+
...
263+
&lt;aside>...&lt;/aside> &lt;!-- not role=complementary -->
264+
&lt;/footer></code></pre>
265+
</div>
266+
267+
<div class="example">
268+
<p>A <code>section</code> element has an implicit WAI-ARIA role mapping of <code>region</code> only when the element is provided an <a>accessible name</a>.</p>
269+
270+
<pre><code>&lt;section title="accessible name">...&lt;/section> &lt;!-- role=region -->
271+
...
272+
&lt;section aria-label="accessible name">...&lt;/section> &lt;!-- role=region -->
273+
...
274+
&lt;section>...&lt;/section> &lt;!-- not role=region --></code></pre>
275+
</div>
276+
</section>
213277
<section>
214278
<h3>HTML Element Role Mappings</h3>
215279
<ul>

0 commit comments

Comments
 (0)