Skip to content

Commit

Permalink
Issue 876 role label (#926)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jongund @jnurthen
jongund authored and jnurthen committed Apr 10, 2019
1 parent 4278c8a commit 78b9178
Showing 1 changed file with 150 additions and 9 deletions.
159 changes: 150 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -530,6 +530,7 @@ <h3>Accessible Name Calculation</h3>
<ol>
<li>author: name comes from values provided by the author in explicit markup features such as the <pref>aria-label</pref> attribute, the <pref>aria-labelledby</pref> attribute, or the host language labeling mechanism, such as the <code>alt</code> or <code>title</code> attributes in <abbr title="Hypertext Markup Language">HTML</abbr>, with HTML <code>title</code> attribute having the lowest precedence for specifying a text alternative.</li>
<li>contents: name comes from the text value of the <a>element</a> node. Although this may be allowed in addition to "author" in some <a>roles</a>, this is used in content only if higher priority "author" features are not provided. Priority is defined by the <a href="https://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te">accessible name and description computation</a> algorithm. [[ACCNAME-1.1]]</li>
<li>encapsulation: name comes from the text value of the <a>element</a> node with role <code>label</code> that is the closest ancestor. Although "encapsulation" may be allowed in addition to "author" and "contents" in some <a>roles</a>, "encapsulation" is used only if higher priority "author" features are not provided. Priority is defined by the <a href="https://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te">accessible name and description computation</a> algorithm. [[ACCNAME-1.1]]</li>
</ol>
</dd>
</dl>
Expand Down Expand Up @@ -671,6 +672,7 @@ <h3>Document Structure</h3>
<li><rref>heading</rref></li>
<li><rref>img</rref></li>
<li><rref>insertion</rref></li>
<li><rref>label</rref></li>
<li><rref>list</rref></li>
<li><rref>listitem</rref></li>
<li><rref>math</rref></li>
Expand Down Expand Up @@ -1573,6 +1575,7 @@ <h2>Definition of Roles</h2>
<td class="role-namefrom">
<ul>
<li>contents</li>
<li>encapsulation</li>
<li>author</li>
</ul>
</td>
Expand Down Expand Up @@ -3374,6 +3377,117 @@ <h2>Definition of Roles</h2>
</tr>
</tbody>
</table>
</div>
<div class="role" id="label">
<rdef>label</rdef>
<div class="role-description">
<p>A visible name or caption for a user interface component.</p>
<p>An element with role <code>label</code> can provide an accessible name for a user interface component if it is programatically associated with the element. Authors MAY associate an element with role <code>label</code> with another element by using one of two methods:</p>

<ul>
<li>encapsulation: The element with role <code>label</code> contains the element it names.
<li>reference: The element with role <code>label</code> is referenced by the element it names via the <pref>aria-labelledby</pref> attribute.</li>
</ul>

<p>The encapsulation method of naming is supported only if the element being named has one of the following roles:</p>
<ul>
<li><pref>checkbox</pref></li>
<li><pref>listbox</pref></li>
<li><pref>meter</pref></li>
<li><pref>radio</pref></li>
<li><pref>searchbox</pref></li>
<li><pref>spinbutton</pref></li>
<li><pref>switch</pref></li>
<li><pref>textbox</pref></li>
</ul>

<p>Authors SHOULD ensure that:</p>

<ul>
<li>All elements with role <code>label</code> are associated with one or more other elements.</li>
<li>When an element with role <code>label</code> is activated by touch or a pointer and its associated element is focusable, focus moves to the associated element. If more than one focusable element is associated with the same label, focus moves to the first element.</li>
</ul>
</div>
<table class="role-features">
<caption>Characteristics:</caption>
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th class="role-abstract-head" scope="row">Is Abstract:</th>
<td class="role-abstract"> </td>
</tr>
<tr>
<th class="role-parent-head" scope="row">Superclass Role:</th>
<td class="role-parent">
<ul>
<li><rref>section</rref></li>
</ul>
</td>
</tr>
<tr>
<th class="role-children-head" scope="row">Subclass Roles:</th>
<td class="role-children"></td>
</tr>
<tr>
<th class="role-base-head" scope="row">Base Concept:</th>
<td class="role-base"><a href="https://www.w3.org/TR/html5/sec-forms.html#the-label-element"><abbr title="Hypertext Markup Language">HTML</abbr> <code>label</code></a></td>
</tr>
<tr>
<th class="role-related-head" scope="row">Related Concepts:</th>
<td class="role-related"> </td>
</tr>
<tr>
<th class="role-scope-head" scope="row">Required Context Role:</th>
<td class="role-scope"><rref></rref></td>
</tr>
<tr>
<th class="role-mustcontain-head" scope="row">Required Owned Elements:</th>
<td class="role-mustcontain"> </td>
</tr>
<tr>
<th class="role-required-properties-head">Required States and Properties:</th>
<td class="role-required-properties"> </td>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"></td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
<td class="role-inherited">Placeholder</td>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">
<ul>
<li>contents</li>
<li>author</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
<td class="role-namerequired">True</td>
</tr>
<tr>
<th class="role-namerequired-inherited-head" scope="row">Inherits Name Required:</th>
<td class="role-namerequired-inherited"> </td>
</tr>
<tr>
<th class="role-childpresentational-head" scope="row">Children Presentational:</th>
<td class="role-childpresentational"> </td>
</tr>
<tr>
<th class="role-presentational-inherited-head" scope="row">Inherits Presentational:</th>
<td class="role-presentational-inherited"> </td>
</tr>
</tbody>
</table>
</div>
<div class="role" id="landmark">
<rdef>landmark</rdef>
Expand Down Expand Up @@ -3717,7 +3831,12 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>encapsulation</li>
<li>author</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -4270,7 +4389,12 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>encapsulation</li>
<li>author</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -5536,6 +5660,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
<td class="role-namefrom">
<ul>
<li>contents</li>
<li>encapsulation</li>
<li>author</li>
</ul>
</td>
Expand Down Expand Up @@ -6425,7 +6550,12 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>encapsulation</li>
<li>author</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -6973,7 +7103,12 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>encapsulation</li>
<li>author</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down Expand Up @@ -7384,10 +7519,11 @@ <h5>Presentational Roles Conflict Resolution</h5>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">
<ul>
<li>contents</li>
<li>author</li>
</ul>
<ul>
<li>contents</li>
<li>encapsulation</li>
<li>author</li>
</ul>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -8051,7 +8187,12 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-namefrom-head" scope="row">Name From:</th>
<td class="role-namefrom">author</td>
<td class="role-namefrom">
<ul>
<li>encapsulation</li>
<li>author</li>
</ul>
</td>
</tr>
<tr>
<th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
Expand Down

0 comments on commit 78b9178

Please sign in to comment.