Accessible button examples | SiteCheck Canada

What this example teaches

<button><svg aria-hidden="true"><!-- icon --></svg></button>

The button has no accessible name.

<button aria-label="Search"><svg aria-hidden="true"><!-- icon --></svg></button>

The icon-only button now has a clear accessible name.

<button aria-label="Send message">Submit</button>

The visible text and accessible name do not match, which can confuse speech input users.

<button type="submit">Send message</button>

Visible text gives the button a clear name for everyone.

<button>Show filters</button>

Users may not know whether the filter panel is currently open.

<button type="button" aria-expanded="false" aria-controls="filters">Show filters</button>
<section id="filters" hidden>...</section>

The button exposes its relationship and expanded state.

<button type="button" aria-expanded="true" aria-controls="filters">Hide filters</button>
<section id="filters">...</section>

The label and state update together.

<button type="submit">Go</button>

Go is vague when the form action matters.

<button type="submit">Request accessibility review</button>

The button describes the form submission outcome.

Whether button labels match the actual action and current state.
Whether keyboard focus, disabled states, menus, modals, and toggles behave correctly.
Whether custom button-like elements should be native button elements instead.