Skip to content

Commit bcd762d

Browse files
giacomo-petripatrickhlaukembgowerbruce-usab
authored
Add "label in name" note to ARIA8 technique (#4529)
Closes: #667 Added a note to clarify how the Label in Name requirement affects the example (and viceversa) --------- Co-authored-by: Patrick H. Lauke <[email protected]> Co-authored-by: Mike Gower <[email protected]> Co-authored-by: Bruce Bailey <[email protected]>
1 parent 76658e9 commit bcd762d

File tree

1 file changed

+6
-5
lines changed

1 file changed

+6
-5
lines changed

techniques/aria/ARIA8.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,19 @@
77
<section class="example">
88
<h3>Describing the purpose of a link in HTML using aria-label.</h3>
99

10-
<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>
11-
<pre xml:space="preserve"><code class="language-html">&lt;h4&gt;Neighborhood News&lt;/h4&gt;
10+
<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 <code>aria-label</code> 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 <code>aria-label</code> (which replaces the original anchor text of "Read more") to allow consistent communication between users.</p>
11+
<p class="note">The Success Criterion <a href="../../Understanding/label-in-name">2.5.3 Label in Name</a> requires that the visible label is included as part of the 'accessible name', which is generally set by the <code>aria-label</code>. The examples below meet this requirement.</p>
12+
<pre><code class="language-html">&lt;h4&gt;Neighborhood News&lt;/h4&gt;
1213
&lt;p&gt;Seminole tax hike: Seminole city managers are proposing a 75% increase in
1314
property taxes for the coming fiscal year.
1415
&lt;a href="taxhike.html" aria-label="Read more about Seminole tax hike"&gt;
15-
[Read more...]&lt;/a&gt;
16+
Read more&lt;/a&gt;
1617
&lt;/p&gt;
1718

1819
&lt;p&gt;Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting
1920
in 3 year old Willy "Dusty" Williams in yesterday's mayoral election.
2021
&lt;a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor"&gt;
21-
[Read more...]&lt;/a&gt;
22+
Read more&lt;/a&gt;
2223
&lt;/p&gt;</code></pre>
2324

2425
</section>
@@ -51,4 +52,4 @@ <h3>Describing the purpose of a link in HTML using aria-label.</h3>
5152
</li>
5253
</ul>
5354
</section>
54-
</body></html>
55+
</body></html>

0 commit comments

Comments
 (0)