Skip to content

Add "label in name" note to ARIA8 technique #4529

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add "label in name" note to ARIA8 technique #4529

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6f31f8c
Update ARIA8.html
giacomo-petri Aug 11, 2025
794b337
Update techniques/aria/ARIA8.html
giacomo-petri Aug 11, 2025
3b72738
Merge branch 'main' into giacomo-petri-aria8-tech-note
patrickhlauke Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions techniques/aria/ARIA8.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,19 @@
<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"><code class="language-html">&lt;h4&gt;Neighborhood News&lt;/h4&gt;
<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>
<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>
<pre xml:space="preserve"><code class="language-html">&lt;h4&gt;Neighborhood News&lt;/h4&gt;
&lt;p&gt;Seminole tax hike: Seminole city managers are proposing a 75% increase in
property taxes for the coming fiscal year.
&lt;a href="taxhike.html" aria-label="Read more about Seminole tax hike"&gt;
[Read more...]&lt;/a&gt;
Read more&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;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.
&lt;a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor"&gt;
[Read more...]&lt;/a&gt;
Read more&lt;/a&gt;
&lt;/p&gt;</code></pre>

</section>
Expand Down Expand Up @@ -51,4 +52,4 @@ <h3>Describing the purpose of a link in HTML using aria-label.</h3>
</li>
</ul>
</section>
</body></html>
</body></html>