Make a button accessible

A short checklist for buttons that everyone can use.

Start from the Buttons (no page by this name yet) page and keep what it gives you: a real button element, a visible Focus ring (no page by this name yet), and a label.

  • Give an icon-only button an accessible name.
  • Keep label and background to the contrast in Check text contrast.
  • Don't remove the outline; restyle it if you must.

If a term here is new to you, look it up in the glossary.