GitHub

@@ -294,7 +294,26 @@ <h4>Computation steps</h4>

294294

</pre>

295295

</details></div>

296296

</li>

297-

<li id="step2C">Otherwise, if computing a <a class="termref" data-lt="accessible name">name</a>, and if the <code>current node</code> has an <code>aria-label</code> <a class="termref">attribute</a> whose value is not the empty string, nor, when trimmed of white space, is not the empty string:

297+

<li id="step2C">Otherwise, if the <code>current node</code> is a control embedded within the label (e.g. the <code>label</code> element in HTML or any element directly referenced by <code>aria-labelledby</code>) for another <a class="termref">widget</a>, where the user can adjust the embedded control's value, then include the embedded control as part of the text alternative in the following manner:

298+

<ul>

299+

<li>If the embedded control has role <a class="role-reference" href="#textbox">textbox</a>, return its value.</li>

300+

<li>If the embedded control has role menu <a class="role-reference" href="#button">button</a>, return the text alternative of the button.</li>

301+

<li>If the embedded control has role <a class="role-reference" href="#combobox">combobox</a> or <a class="role-reference" href="#listbox">listbox</a>, return the text alternative of the chosen <a class="role-reference" href="#option">option</a>.</li>

302+

<li>If the embedded control has role <a class="role-reference" href="#range">range</a> (e.g., a <a class="role-reference" href="#spinbutton">spinbutton</a> or <a class="role-reference" href="#slider">slider</a>):

303+

<ul>

304+

<li>If the <code>aria-valuetext</code> property is present, return its value, </li>

305+

<li>Otherwise, if the <code>aria-valuenow</code> property is present, return its value,</li>

306+

<li>Otherwise, use the value as specified by a host language attribute. </li>

307+

</ul>

308+

</li>

309+

</ul>

310+

<div><details>

311+

<summary>Example:</summary>

312+

<p>Consider a <a class="role-reference" href="#checkbox">check box</a> label that contains a text input field: "Flash the screen [input] times". If the user has entered "5" for the embedded <a class="role-reference" href="#textbox">textbox</a>, the complete label is "Flash the screen 5 times", e.g.: </p>

313+

<pre class="example highlight"><code>&lt;div role="checkbox" aria-checked="false"&gt;Flash the screen &lt;span role="textbox" aria-multiline="false"&gt; 5 &lt;/span&gt; times&lt;/div&gt;</code></pre>

314+

</details></div>

315+

</li>

316+

<li id="step2D">Otherwise, if computing a <a class="termref" data-lt="accessible name">name</a>, and if the <code>current node</code> has an <code>aria-label</code> <a class="termref">attribute</a> whose value is not the empty string, nor, when trimmed of white space, is not the empty string:

298317

<ul>

299318

<li>If traversal of the <code>current node</code> is due to recursion <strong>and</strong> the <code>current node</code> is an embedded control as defined in step 2E, ignore <code>aria-label</code> and skip to rule 2E.</li>

300319

<li>Otherwise, return the value of <code>aria-label</code>.</li>

@@ -315,31 +334,13 @@ <h4>Computation steps</h4>

315334

&lt;/ul&gt;</code></pre>

316335

</details></div>

317336

</li>

318-

<li id="step2D">Otherwise, if the <code>current node</code>'s native markup provides an <a class="termref">attribute</a> (e.g. <code>title</code>) or <a class="termref">element</a> (e.g. HTML <code>label</code>) that defines a text alternative, return that alternative in the form of a <code>flat string</code> as defined by the host language, unless the element is marked as presentational (<code>role="presentation"</code> or <code>role="none"</code>).

337+

<li id="step2E">

338+

Otherwise, if the <code>current node</code>'s native markup provides an <a class="termref">attribute</a> (e.g. <code>title</code>) or <a class="termref">element</a> (e.g. HTML <code>label</code>) that defines a text alternative, return that alternative in the form of a <code>flat string</code> as defined by the host language, unless the element is marked as presentational (<code>role="presentation"</code> or <code>role="none"</code>).

319339

<div><details>

320340

<summary>Comment:</summary>

321341

<p>For example, in <abbr title="Hypertext Markup Language">HTML</abbr>, the <code>img</code> element's <code>alt</code> attribute defines a text alternative string, and the <code>label</code> element provides text for the referenced form element. In <abbr title="SVG2">SVG2</abbr>, the <code>desc</code> and <code>title</code> elements provide a description of their parent element. </p>

322342

</details></div>

323343

</li>

324-

<li id="step2E">Otherwise, if the <code>current node</code> is a control embedded within the label (e.g. the <code>label</code> element in HTML or any element directly referenced by <code>aria-labelledby</code>) for another <a class="termref">widget</a>, where the user can adjust the embedded control's value, then include the embedded control as part of the text alternative in the following manner:

325-

<ul>

326-

<li>If the embedded control has role <a class="role-reference" href="#textbox">textbox</a>, return its value.</li>

327-

<li>If the embedded control has role menu <a class="role-reference" href="#button">button</a>, return the text alternative of the button.</li>

328-

<li>If the embedded control has role <a class="role-reference" href="#combobox">combobox</a> or <a class="role-reference" href="#listbox">listbox</a>, return the text alternative of the chosen <a class="role-reference" href="#option">option</a>.</li>

329-

<li>If the embedded control has role <a class="role-reference" href="#range">range</a> (e.g., a <a class="role-reference" href="#spinbutton">spinbutton</a> or <a class="role-reference" href="#slider">slider</a>):

330-

<ul>

331-

<li>If the <code>aria-valuetext</code> property is present, return its value, </li>

332-

<li>Otherwise, if the <code>aria-valuenow</code> property is present, return its value,</li>

333-

<li>Otherwise, use the value as specified by a host language attribute. </li>

334-

</ul>

335-

</li>

336-

</ul>

337-

<div><details>

338-

<summary>Example:</summary>

339-

<p>Consider a <a class="role-reference" href="#checkbox">check box</a> label that contains a text input field: "Flash the screen [input] times". If the user has entered "5" for the embedded <a class="role-reference" href="#textbox">textbox</a>, the complete label is "Flash the screen 5 times", e.g.: </p>

340-

<pre class="example highlight"><code>&lt;div role="checkbox" aria-checked="false"&gt;Flash the screen &lt;span role="textbox" aria-multiline="false"&gt; 5 &lt;/span&gt; times&lt;/div&gt;</code></pre>

341-

</details></div>

342-

</li>

343344

<li id="step2F">Otherwise, if the <code>current node's</code> <a class="termref">role</a> allows <a class="specref" href="#namefromcontent">name from content</a>, or if the <code>current node</code> is referenced by <code>aria-labelledby</code>, <code>aria-describedby</code>, or is a native host language text alternative <a class="termref">element</a> (e.g. <code>label</code> in HTML), or is a descendant of a native host language text alternative <a class="termref">element</a>:

344345

<ol>

345346

<li id="step2F.i">Set the <code>accumulated text</code> to the empty string.</li>

Read the original on github.com ↗