ACCESSIBLE LINKS: When to Use aria-label

Click here orange buttons

When website designers and developers use generic text like “Click Here” or “Read More” as instructions in anchor text, it is confusing to screen reader users because it announces nothing about the specific content that will appear once the link is clicked.

This type of link content fails to meet the WCAG 2.4.4 Link Purpose (In Context) (Level A) guideline:

“The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.”

Wait a minute

What happens when the website designer has space constraints (especially on mobile devices) and doesn’t have room to display long link text explanations.

EXAMPLE:

<h3>Local News</h3>
<p>Marlborough tax hike: Marlborough city managers are proposing a 75% increase in property taxes for the coming fiscal year.</p>
<p><a href=”taxhike.html”>Read more about Marlborough tax hike</a></p>

REMEDIATION:

Use an aria-label attribute in the link code that provides specific information to the screen reader user.

<h3>Local News</h3>
<p>Marlborough tax hike: Marlborough city managers are proposing a 75% increase in property taxes for the coming fiscal year.</p>
<p><a href=”taxhike.html” aria-label=”Read more about Marlborough tax hike”>Read more…</a></p>

When screen readers discover the aria-label in the link code, its value is read (Read more about Marlborough tax hike) instead of the anchor text  Read more….

I have found this to be consistent when the screen reader is used on the Windows 10 platform and on iOS and Android mobile devices.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===