Icon-only buttons

Most buttons we use have visible text labels, so it’s clear to everyone what the button does (including screen reader users). When there’s no visible label, we need to make sure we’re not creating any accessibility barriers.

Communicate meaning

Icon-only buttons do not contain visual text for a person to read or a screen reader to announce. Annotate the design to ensure with the action.

Abstract buttons

Using icon-only buttons may be the best decision for the design, but most icons are still abstract to users. Use universally recognised icons.

Repeated button labels

Preferably, button labels should be unique. This allows screen reader users to get the context they need to decide.

Sometimes using buttons with the same text is the best design decision. In this case, annotate the screens to tell the developer what to announce to screen reader users.

Link button and links

Use the link button to perform actions, such as opening a menu, triggering a modal, showing more results on a page, or playing media. Link buttons should not open up a new page.

Use links to navigate the user to a new page, in page anchors, or open an external document.

Accessibility testing

Find guidance on how to test buttons for travellers who use assistive technology.

Keyboard testing

1. Use the ‘Tab’ key to navigate to the button.
2. Make sure the button receives focus and the expected focus state is presented.
3. Press ‘Space’ or ‘Enter’ to activate the button.
4. Check there is visual feedback on the pressed state to show that the button has been activated.
5. Check that the result is what’s expected.

Screen reader checks

NVDA on Chrome

1. Navigate to the button to test. This can be done in two ways:

• Open the elements list by pressing the NVDA key + F7 and using the arrow keys to move to the ‘Buttons’ menu.
• Press the ‘B’ key to move to the button.

1. Check that the button’s name, role and (if required) state are announced.
2. Press ‘Enter’ or ‘Space’ to activate the button.
3. Check that the result is what’s expected and any feedback matches the button’s function.

VoiceOver on Safari

1. Navigate to the button to test. This can be done in two ways:

• Open the rotor by pressing CTRL + OPT + U and use the arrow keys to move to the ‘Form Controls’ menu.
• Press CTRL + OPT + CMD + J to move to the button.

1. Check that the button’s name, role and (if required) state are announced.
2. Press CTRL + OPT + SPACE to activate the button.
3. Check that the result is what’s expected and any feedback matches the button’s function.

VoiceOver on iOS

1. Swipe left or right to navigate to the button.
2. Check that the button’s name, role and (if required) state are announced. For example, “View deals, button, collapsed”.
3. Double-tap anywhere on the screen to activate the button.
4. Check that the result is what’s expected and any feedback matches the button’s function.

TalkBack on Android

1. Swipe left or right to navigate to the button.
2. Check that the button’s name, role and (if required) state are announced. For example, “View deals, button, collapsed”.
3. Double-tap anywhere on the screen to activate the button.
4. Check that the result is what’s expected and any feedback matches the button’s function.