Back to home

Adding information to buttons test

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

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

Option 1: Button title attribute

Test

• Should read button content and then title content - "House prices from Chatswood area".

Code sample

<button title="from Chatswood area">
	Prices
</button>

Option 2: Button aria-label attribute

Test

• Should read aria-label content only - "Download high definition movie".

Example

Code sample

<button aria-label="Download high definition movie">
	Download
</button>

Option 3: Button aria-labelledby attribute

Test

• Should read button content followed by aria-labelledby content - "Save search queries and return to main menu".

Example

Code sample

<button aria-labelledby="info3">
	Save
</button>
<p id="info3" class="hidden">
	search queries and return to main menu
</p>

Option 4: Button aria-describedby attribute

Test

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

Example

Code sample

<button aria-describedby="info4">
	Close
</button>
<p id="info4" class="hidden">
	and return to banking details
</p>

Option 5: Button hidden info

Test

• Should read link content including the content - "Check results on your business account".

Example

Code sample

<button>
	Check results 
	<span class="hidden">on your business account</span>
</button>

Bottom of page - Back to home