-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA13.html
73 lines (67 loc) · 4.48 KB
/
ARIA13.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to name regions and landmarks</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby to name regions and landmarks</h1><section class="meta"><p class="id">ID: ARIA13</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
</section><section id="description"><h2>Description</h2>
<p>The purpose of this technique is to provide names for regions of a page that can be read by assistive technology. The <code class="att">aria-labelledby</code> attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.
</p>
<p>Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.
</p>
<p>Like <code class="att">aria-describedby</code>, <code class="att">aria-labelledby</code> can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.
</p>
</section>
<section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Identify a landmark with on-page text</h3>
<p>Below is an example of <code class="att">aria-labelledby</code> used on a complementary Landmark. The region of the document to which the heading pertains could be marked with the <code class="att">aria-labelledby</code> property containing the value of the <code class="att">id</code> for the header.</p>
<pre xml:space="preserve"><div role="complementary" aria-labelledby="hdr1">
<h1 id="hdr1">
Top News Stories
...
</h1>
</div></pre>
</section>
<section class="example">
<h3>Identification for Application landmarks</h3>
<p>The following code snippet for application landmarks with static prose. If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:</p>
<pre xml:space="preserve"><div role="application" aria-labelledby="p123" aria-describedby="info">
<h1 id="p123">Calendar<h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Examine each element with attribute role=region or with a <a href="https://www.w3.org/TR/wai-aria/#landmark_roles">landmark role</a>, where an aria-labelledby attribute is also present.
</li>
<li>Check that the value of the aria-labelledby attribute is the id of an element on the page.
</li>
<li>Check that the text of the element with that id accurately labels the section of the page.
</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#2 and #3 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../aria/ARIA10">ARIA10</a></li>
<li><a href="../aria/ARIA6">ARIA6</a></li>
<li><a href="../aria/ARIA9">ARIA9</a></li>
<li><a href="../aria/ARIA16">ARIA16</a></li>
<li><a href="../aria/ARIA7">ARIA7</a></li>
<li><a href="../general/G92">G92</a></li>
<li><a href="../html/H45">H45</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
</li>
<li>
<a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</li>
</ul>
</section></body></html>