-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA8.html
52 lines (47 loc) · 4.67 KB
/
ARIA8.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label for link purpose</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-label for link purpose</h1><section class="meta"><p class="id">ID: ARIA8</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 objective of this technique is to describe the purpose of a link using the <code class="att">aria-label</code> attribute. The <code class="att">aria-label</code> attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the <code class="att">aria-labelledby</code> attribute should be used instead of <code class="att">aria-label</code>. Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the <code class="att">aria-label</code> value will show in the list of links instead of the actual link text.</p>
<p>Per the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> and the <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide</a>, the <code class="att">aria-label</code> text will override the text supplied within the link. As such the text supplied will be used instead of the link text by AT. Due to this it is recommended to start the text used in <code class="att">aria-label</code> with the text used within the link. This will allow consistent communication between users.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Describing the purpose of a link in HTML using aria-label.</h3>
<p>In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more". These situations provide a good use case for aria-label in that the simpler, non-descriptive "read more" text on the page can be replaced with a more descriptive label of the link. The words 'read more' are repeated in the aria-label (which replaces the original anchor text of "[Read more...]") to allow consistent communication between users.</p>
<pre xml:space="preserve"> <h4>Neighborhood News</h4>
<p>Seminole tax hike: Seminole city managers are proposing a 75% increase in
property taxes for the coming fiscal year.
<a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
</p>
<p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year
old Willy "Dusty" Williams in yesterday's mayoral election.
<a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
</p></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For link elements that use <code class="att">aria-label</code>:</p>
<ol>
<li>Check that the value of the <code class="att">aria-label</code> attribute properly describes the purpose of the link element.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#1 is true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../aria/ARIA6">ARIA6</a></li>
<li><a href="../aria/ARIA14">ARIA14</a></li>
<li><a href="../aria/ARIA7">ARIA7</a></li>
<li><a href="../general/G91">G91</a></li>
<li><a href="../html/H30">H30</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<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>
<li>
<a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
</li>
</ul>
</section></body></html>