Back to home

Display A, announce B - link content

Developers may wish to display one piece of content, but replace it with other content for screen reader users - such as replacing short country currency codes with full descriptions.

• Option 1: Link content - aria-hidden="true"
• Option 2: Link content - role="presentation"
• Option 3: Link content - aria-label=""

Option 1: Link content - aria-hidden="true"

Test

• Screen readers should only read out the Different content, not the visibly displayed content - "United Arab Emirates Dirham".

Example

Code sample

<a href="#">
	<span aria-hidden="true">AED</span> 
	<span class="sr-only">United Arab Emirates Dirham</span>
</a>

Option 2: Link content - role="presentation"

Test

• Screen readers should only read out the Different content, not the visibly displayed content - "Bosnia and Herzegovina Convertible Marka".

Example

Code sample

<a href="#">
	<span role="presentation">BAM</span> 
	<span class="sr-only">Bosnia and Herzegovina Convertible Marka</span>
</a>

Option 3: Link content - aria-label=""

Test

• Screen readers should only read out the Different content, not the visibly displayed content - "Falkland Islands (Malvinas) Pound".

Example

Code sample

<a href="#" aria-label="Falkland Islands Malvinas Pound">
	<span aria-hidden="true">FKP</span>
</a>

Bottom of page - Back to home