Back to home

Display A, announce B - normal content

Developers may wish to display one piece of content, but replace it with other content for screen reader users.Examples could include:

• Displaying a short form country code - "AED" and announcing the long form to screen reader users - "United Arab Emirates Dirham".
• Displaying a short form month - "Janu" and announcing the long form to screen reader users - "January".

Options

• Option 1: Normal content - aria-hidden="true"
• Option 2: Normal content - role="presentation"

Option 1: Normal 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

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

Option 2: Normal 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

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

Bottom of page - Back to home