You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: index.html
+24-33Lines changed: 24 additions & 33 deletions
Original file line number
Diff line number
Diff line change
@@ -366,22 +366,19 @@ <h4>Computation steps</h4>
366
366
<li><strong>Nor</strong> part of a native host language text alternative <aclass="termref">element</a> (e.g. <code>label</code> in HTML) or <aclass="termref">attribute</a> traversal, where the root of that traversal was hidden.</li>
367
367
</ol>
368
368
Return the empty string.
369
-
<div><details>
370
-
<summary>Comment:</summary>
369
+
<divclass="note">
371
370
<p>It's important to clarify the broad definition of hidden for the purposes of accessible name calculation:</p>
372
371
<ol>
373
372
<li>Nodes with CSS properties <code>display:none</code>, <code>visibility:hidden</code>, <code>visibility:collapse</code> or <code>content-visibility:hidden</code>: They are considered hidden, as they match the guidelines "not perceivable" and "explicitly hidden".</li>
374
373
<li>Nodes with CSS properties <code>opacity:0</code> or <code>filter:opacity(0%)</code>, or similar SVG mechanisms: They are not considered hidden. Text hidden with these methods can still be selected or copied, and user agents still expose it in their accessibility trees.</li>
375
374
<li>Nodes with the <code>aria-hidden="true"</code> property: it is considered hidden, matching the "explicitly hidden" guideline.</li>
376
375
<li>Nodes hidden off screen or behind another object: they are not considered hidden. They are exposed in the accessibility tree and they can even name on-screen objects.</li>
377
376
</ol>
378
-
</details></div>
379
-
<div><details>
380
-
<summary>Comment:</summary>
377
+
</div>
378
+
<divclass="note
381
379
<p>By default, <a class="termref">assistive technologies</a> do not relay hidden information, but an author can explicitly override that and include hidden text as part of the <aclass="termref">accessible name</a> or <aclass="termref">accessible description</a> by using <code>aria-labelledby</code> or <code>aria-describedby</code>. </p>
382
-
</details></div>
383
-
<div><details>
384
-
<summary>Example:</summary>
380
+
</div>
381
+
<asideclass="example">
385
382
<p>The following examples show the meaning of the clause "Not part of an <code>aria-labelledby</code> or <code>aria-describedby</code> traversal, where the node directy referenced by that relation was hidden.".</p>
386
383
<p>First, <code>element1</code>'s <aclass="termref">accessible name</a> is "hello" because, although <code>element3</code> is hidden, it is part of an <code>aria-labelledby</code> traversal started in <code>element2</code>, which is hidden too.</p>
<p>Conversely, <code>element1</code> has no <aclass="termref">accessible name</a> if <code>element3</code> is hidden and it is part of an <code>aria-labelledby</code> traversal started in <code>element2</code>, but <code>element2</code> is not hidden.</p>
<liid="comp_labelledby" name="step2B"><em>LabelledBy:</em> Otherwise, if the <code>current node</code> has an <code>aria-labelledby</code> [=attribute=] that contains at least one valid IDREF, and the <code>current node</code> is not already part of an ongoing <code>aria-labelledby</code> or <code>aria-describedby</code> traversal, process its IDREFs in the order they occur:
402
400
<ol>
@@ -410,21 +408,19 @@ <h4>Computation steps</h4>
410
408
</li>
411
409
<liid="comp_labelledby_return" name="step2B.iii">Return the <code>accumulated text</code> if it is not the empty string ("").</li>
412
410
</ol>
413
-
<div><details>
414
-
<summary>Comment:</summary>
411
+
<div>
415
412
<p>The result of <ahref="#comp_labelledby_recursion">LabelledBy Recursion</a> in combination with <ahref="#comp_hidden_not_referenced">Hidden Not Referenced</a> means that <aclass="termref">user agents</a> MUST include all nodes in the subtree as part of the <aclass="termref">accessible name</a> or <aclass="termref">accessible description</a>, when the node referenced by <code>aria-labelledby</code> or <code>aria-describedby</code> is hidden.</p>
416
-
<div><details>
417
-
<summary>Example:</summary>
413
+
<asideclass="example">
418
414
<p>The following example shows the meaning of the clause "… and the <code>current node</code> is not already part of an <code>aria-labelledby</code> traversal …" .</p>
419
415
<ol>
420
416
<li><code>element1</code>'s <aclass="termref">accessible name</a> is "hello" because this is a first traversal of its <code>aria-labelledby</code>, leading to <code>element3</code>.</li>
421
417
<li><code>element2</code> has no <aclass="termref">accessible name</a>. The computation involves a first traversal of its <code>aria-labelledby</code> leading to <code>element1</code>, but <code>element1</code>'s <code>aria-labelledby</code> is not subsequently followed. </li>
<liid="comp_embedded_control" name="step2C"><em>Embedded Control:</em> Otherwise, if the <code>current node</code> is a control embedded within the label (e.g. any element directly referenced by <code>aria-labelledby</code>) for another <aclass="termref">widget</a>, where the user can adjust the embedded control's value, then return the embedded control as part of the text alternative in the following manner:
430
426
<ol>
@@ -438,21 +434,19 @@ <h4>Computation steps</h4>
438
434
</ol>
439
435
</li>
440
436
</ol>
441
-
<div><details>
442
-
<summary>Example:</summary>
437
+
<asideclass="example">
443
438
<p>Consider a <aclass="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 <aclass="role-reference" href="#textbox">textbox</a>, the complete label is "Flash the screen 5 times", e.g.: </p>
<liid="comp_label" name="step2D"><em>AriaLabel:</em> Otherwise, if the <code>current node</code> has an <code>aria-label</code> [=attribute=] whose value is not undefined, not the empty string, nor, when trimmed of [=ascii whitespace|whitespace=], is not the empty string:
450
445
<ol>
451
446
<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, ignore <code>aria-label</code> and skip to rule <ahref="#comp_embedded_control">Embedded Control</a>.</li>
452
447
<li>Otherwise, return the value of <code>aria-label</code>.</li>
453
448
</ol>
454
-
<div><details>
455
-
<summary>Example:</summary>
449
+
<asideclass="example">
456
450
<p>The following example shows the interaction of <code>aria-labelledby</code> and <code>aria-label</code> when a [=nodes|node=] has an <code>aria-labelledby</code> that refers to itself. The <code><span role="button"></code> elements have the <aclass="termref">accessible names</a> "Delete Documentation.pdf" and "Delete HolidayLetter.pdf", respectively.</p>
<liid="comp_host_language_label" name="step2E"><em>Host Language Label:</em> Otherwise, if the <code>current node</code>'s native markup provides an [=attribute=] (e.g. <code>alt</code>) or [=element=] (e.g. HTML <code>label</code> or SVG <code>title</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>).
471
465
<divclass="note">See <ahref="https://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-computation">HTML-AAM</a>, <ahref="https://www.w3.org/TR/svg-aam-1.0/#mapping_additional_nd">SVG-AAM</a>, or other host language documentation for more information on markup that defines a text alternative.</div>
472
-
<div><details>
473
-
<summary>Comment:</summary>
466
+
<divclass="note">
474
467
<p>For example, in <abbrtitle="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 <abbrtitle="SVG2">SVG2</abbr>, the <code>desc</code> and <code>title</code> elements provide a description of their parent element. </p>
475
-
</details></div>
468
+
</div>
476
469
</li>
477
470
<liid="comp_name_from_content" name="step2F"><em>Name From Content:</em> Otherwise, if the <code>current node's</code><aclass="termref">role</a> allows <aclass="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 [=element=] (e.g. <code>label</code> in HTML), or is a descendant of a native host language text alternative [=element=]:
478
471
<ol>
@@ -493,18 +486,16 @@ <h4>Computation steps</h4>
493
486
<liid="comp_name_from_content_return" name="step2F.iv">Return the <code>accumulated text</code> if it is not the empty string ("").</li>
494
487
</ol>
495
488
<p><strong>Important</strong>: Each [=nodes|node=] in the subtree is consulted only once. If text has been collected from a descendant, but is referenced by another IDREF in some descendant node, then that second, or subsequent, reference is not followed. This is done to avoid infinite loops. </p>
496
-
<div><details>
497
-
<summary>Comment:</summary>
489
+
<divclass="note">
498
490
<p>This step can apply to the child nodes themselves, which means the computation is recursive and results in text collected from all the elements in the <code>current node</code>'s subtree, no matter how deep it is. However, any given descendant [=nodes|node's=] text alternative can result from higher precedent markup described in steps B through D above, where "Namefrom: author" attributes provide the text alternative for the entire subtree. </p>
499
-
</details></div>
491
+
</div>
500
492
</li>
501
493
<liid="comp_text_node" name="step2G"><em>Text Node:</em> Otherwise, if the <code>current node</code> is a Text [=Node=], return its textual contents.</li>
502
494
<liid="comp_recursive_name_from_content" name="step2H"><em>Recursive Name From Content:</em> Otherwise, if the <code>current node</code> is a descendant of an element whose <aclass="termref">Accessible Name</a> or <aclass="termref">Accessible Description</a> is being computed, and contains descendants, proceed to <ahref="#comp_name_from_content_reset">Name From Content Reset</a>.</li>
503
495
<liid="comp_tooltip" name="step2I"><em>Tooltip:</em> Otherwise, if the <code>current node</code> has a <aclass="termref">Tooltip attribute</a>, return its value.
504
-
<div><details>
505
-
<summary>Comment:</summary>
496
+
<divclass="note">
506
497
<p>Tooltip attributes are used only if nothing else, including subtree content, has provided results. </p>
507
-
</details></div>
498
+
</div>
508
499
</li>
509
500
<liid="comp_append">Append a space character and the <code>result</code> of each step above to the <code>total accumulated text</code>.</li>
0 commit comments