Give every icon-only button an accessible name

My icon buttons look obvious to me, but I have no idea what a screen reader says when it lands on one.

BeginnerRead 4 minDoing: half an hour6 steps

▶ Start

What you'll have at the end

Every icon-only button on the page has an aria-label, and a screen reader test reads its real action out loud.

Before you start

You need

A page with at least one button, or an element acting like one, whose whole visible content is an icon, emoji, or small picture, with no accompanying text.

Not covered

Buttons whose visual state changes when pressed, like a mute toggle or an expand/collapse control: those need aria-pressed or aria-expanded on top of a name, which is its own recipe.

Leans on

6 steps

Where to go next

A plain list of numbers becomes an accessible data table

go there when what needs a name is a whole data table instead of a button.

Rebuild a div-soup page with real semantic landmarks

go there first if the icon control isn't a real button element at all, just a clickable div with a click handler.

Checked 20 Aug 2026

Part of the HTML cookbook