Accessibility | Button

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.

If the design allows, then using labels alongside the icon is preferable to using icons alone.

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.

It is often a judgement call on how much information is needed to help the user decide. Consider what would be helpful in the action and what can be discovered elsewhere on the page.

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.