Back to home

Adding information to links test

Developers may wish to add additional context to a link for screen reader users.

• Option 1: Link title attribute
• Option 2: Link aria-label attribute
• Option 3: Link aria-labelledby attribute
• Option 4: Link aria-describedby attribute
• Option 5: Link hidden info

Option 1: Link title attribute

Test

• Should read link content and then title content - "Buy a book from the Tolkein range".

Example

Code sample

<a href="#" title="from the Tolkein range">
	Buy a book
</a>

Option 2: Link aria-label attribute

Test

• Should read aria-label content only - "Purchase apples while they are fresh".

Example

Code sample

<a href="#" aria-label="Purchase apples while they are fresh">
	Buy apples
</a>

Option 3: Link aria-labelledby attribute

Test

• Should read link content followed by aria-labelledby content - "Color blue is a calming color".

Example

Code sample

<a href="#" aria-labelledby="info1">
	Color blue
</a>
<p id="info1" class="hidden">
	is a calming color
</p>

Option 4: Link aria-describedby attribute

Test

• Should read link content followed by aria-describedby content - "Close and return to banking details".

Example

Code sample

<a href="#" aria-describedby="info1">
	Close
</a>
<p id="info1" class="hidden">
	 and return to banking details
</p>

Option 5: Link hidden info

Test

• Should read link content including the content - "See the dog run after a ball".

Example

Code sample

<a href="#">
	See the dog 
	<span class="hidden">run after a ball</span>
</a>

Bottom of page - Back to home