Skip to content

Commit

Permalink
contextual role concept proposal
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
scottaohara authored May 11, 2023
1 parent da53b7d commit c8435a9
Showing 1 changed file with 64 additions and 0 deletions.
64 changes: 64 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,70 @@ <h3>Exposing HTML Features That Do Not Directly Map to Accessibility APIs</h3>
<abbr title="application programming interface">API</abbr> properties</a> in the [[core-aam-1.2]].
</p>
</section>
<section id="mapping_contextual">
<h3>Exposing HTML Features With Contextual Roles</h3>
<p>
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.
</p>
<p>
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
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
appropriate for that context.
</p>
<p>
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.
</p>
<div class="note">
<p>Previously, the concept of a contextual role was loosely referred to as an element's "scoped" relationship to another element.</p>
</div>
<div class="example">
<p>
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
<code>menu</code>, <code>ol</code> or <code>ul</code> element that has not had its `list` role mapping suppressed.
</p>
<pre><code>&lt;ul>
&lt;li>...&lt;/li> &lt;!-- role=listitem -->
&lt;/ul>
&lt;article>
...
&lt;li>...&lt;/li> &lt;!-- not role=listitem -->
...</code></pre>
</div>
<div class="example">
<p>
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
the <code>body</code> or <code>main</code> elements, or if the <code>aside</code> has been provided an accessible name.
</p>
<pre><code>&lt;body>
...
&lt;main>
...
&lt;article>
&lt;aside>...&lt;/aside> &lt;!-- not role=complementary -->
...
&lt;aside aria-label=named>...&lt;/aside> &lt;!-- role=complementary -->
&lt;/article>
...
&lt;aside>...&lt;/aside> &lt;!-- role=complementary -->
&lt;/main>
&lt;aside>...&lt;/aside> &lt;!-- role=complementary -->
...
&lt;footer>
...
&lt;aside>...&lt;/aside> &lt;!-- not role=complementary -->
&lt;/footer></code></pre>
</div>

<div class="example">
<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>

<pre><code>&lt;section title="accessible name">...&lt;/section> &lt;!-- role=region -->
...
&lt;section aria-label="accessible name">...&lt;/section> &lt;!-- role=region -->
...
&lt;section>...&lt;/section> &lt;!-- not role=region --></code></pre>
</div>
</section>
<section>
<h3>HTML Element Role Mappings</h3>
<ul>
Expand Down

0 comments on commit c8435a9

Please sign in to comment.