<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="#mapping_additional_nd_te" class="accname">accessible name and description computation</a> algorithm.</li>

<li>legend: name comes from the text value of the first descendant <a>element</a> node with the role of <code>legend</code>. Although "legend" may be allowed in addition to "author" in some <a>roles</a>, "legend" is used in content only if higher priority "author" features are not provided. Priority is defined by the <a href="#mapping_additional_nd_te" class="accname">accessible name and description computation</a> algorithm.</li>

</div>

</section>

<section id="namefromencapsulation">

<h4>Roles Supporting Name from Encapsulation</h4>

<div id="index_fromencapsulation">

</div>

</section>

<section id="namefromlegend">

<h4>Roles Supporting Name from Legend</h4>

<div id="index_fromlegend">

<li><rref>label</rref></li>

<li><rref>legend</rref></li>

<li>encapsulation</li>

<td class="role-namefrom">

<ul>

<li>author</li>

<li>legend</li>

</ul>

</td>

<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 <a>accessible name</a> for a user interface component if it is programmatically 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>

<p class="ednote">Implementation of the <code>label</code> role as described here is currently unlikely. At this time it is anticipated that the <code>label</code> role will not be available in the ARIA 1.3 release</p>

</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"><rref>section</rref></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"><code>&lt;label&gt;</code> in [[HTML]]</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="legend">

<rdef>legend</rdef>

<div class="role-description">

<p>A visible name or caption for a group of related user interface components.</p>

<p>A element with role <code>legend</code> element can provide an accessible name for elements with grouping roles if it is progammatically associated with the element. Authors MAY associate an element with role <code>legend</code> with an element by using one of two methods:</p>

<ul>

<li>legend: The element contains an element with role <code>legend</code> element. If the element contains more than one element with role <code>legend</code>, only the first descendant element with role <code>legend</code> is used for computing the accessible name.</li>

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

</ul>

<p>The legend method of naming is supported only if the element being named has one of the following grouping roles:</p>

<ul>

<li><pref>group</pref></li>

<li><pref>radiogroup</pref> </li>

</ul>

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

<ul>

<li>All elements with role <code>legend</code> are associated with one or more elements with grouping roles.</li>

<li>When an element with role <code>legend</code> is activated by touch or a pointer, focus moves to the first focusable element in the associated group of user interface components.</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"><rref>section</rref></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"><code>&lt;legend&gt;</code> in [[HTML]]</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>

<td class="role-namefrom">

<ul>

<li>encapsulation</li>

<li>author</li>

</ul>

</td>

<td class="role-namefrom">

<ul>

<li>encapsulation</li>

<li>author</li>

</ul>

</td>

<li>encapsulation</li>

<td class="role-namefrom">

<ul>

<li>author</li>

<li>legend</li>

</ul>

</td>

<td class="role-namefrom">

<ul>

<li>encapsulation</li>

<li>author</li>

</ul>

</td>

<td class="role-namefrom">

<ul>

<li>encapsulation</li>

<li>author</li>

</ul>

</td>

<li>encapsulation</li>

<td class="role-namefrom">

<ul>

<li>encapsulation</li>

<li>author</li>

</ul>

</td>