Back to home

Display A, announce B - button content

Developers may wish to display one piece of content, but replace it with other content for screen reader users - such as replacing a "Close" icon - an "X" with a more descriptive alternative.

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

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

Test

• Screen readers should only read out the different content, not the visibly displayed content - "Close and return to account details".

Example

Code sample

<button type="button">
	<span aria-hidden="true">x</span>
	<span class="sr-only">Close and return to account details</span>
</button>

Option 2: Button content - role="presentation"

Test

• Screen readers should only read out the different content, not the visibly displayed content - "Close and return to account details".

Example

Code sample

<button type="button">
	<span role="presentation">x</span>
	<span class="sr-only">Close and return to account details</span>
</button>

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

Test

• Screen readers should only read out the different content, not the visibly displayed content - "Close and return to account details".

Example

Code sample

<button type="button" aria-label="Close and return to account details">
	x
</button>

Bottom of page - Back to home