How can I give an icon-only button an accessible name?

Give the button a concise programmatic name that says what the control does. For example, if it opens a search function, a name such as “Search” may fit. An icon-only button needs a non-empty name that can be determined programmatically; the icon’s visual appearance by itself is not enough. [S1]

A minimal illustrative pattern is:

<button type="button" aria-label="Search">[search icon]</button>

Here, [search icon] is a placeholder for the icon your interface already uses; it is not a literal icon implementation. Choose the wording from the button’s actual action. If the control instead opens a search panel or submits a search, name that action accordingly. Keep the name concise, and avoid a vague label such as “Icon” that identifies the artwork rather than the control’s purpose.

Then inspect the name exposed in the accessibility tree. A name being present is a necessary check, not proof that it accurately describes the button or will make sense in context. [S1]

First check whether the visible words already communicate the button’s purpose. If the button says “Save,” do not add an overriding name such as aria-label="Store"; it can replace the visible wording, leaving the accessible name out of step with what people see. For controls with a visible text label, the accessible name should include that visible label. [S2]

For example, a button that displays “Save” can keep those words as its text:

<button type="button">Save</button>

If you do need an explicit accessible name for a button that also has text, make sure the name includes that same wording—for example, aria-label="Save changes" for a button visibly labeled “Save.” Whether extra wording is useful depends on what the button does; do not add it just to make the markup look more elaborate. The important check is that the name does not omit or conflict with the visible label. [S2]

An icon alone has no visible text label to match, so that particular visible-label requirement does not supply a name for an icon-only button. Give that button a concise name for its action instead. [S2]

Inspect the button’s name in the accessibility tree, as the W3C ACT rule describes. Check the result against the control’s purpose and, when words are visible, against those words too. The ACT rule checks that a non-empty name exists; it does not establish that the name is accurate or useful. [S1] [S2]

A practical review can use two passes:

1. Presence: Does the button expose a non-empty name?
2. Meaning: Would the name tell someone what this particular button does, and does it include the visible label if there is one?

If a name is missing, add an appropriate label. If it is misleading, revise it to describe the actual action. If visible text is being overridden, adjust or remove the overriding label so the accessible name includes the words shown. Then inspect the resulting name again. These checks help you review naming; the cited rule does not certify that an implementation is otherwise accessible.

Use this checklist for each button, treating the example words as placeholders to adapt to the actual interface:

1. Identify the action. Write down what the button does, not just what its icon depicts.
2. Check for visible words. If present, make sure the accessible name includes them; avoid an overriding name that omits or conflicts with them. [S2]
3. Name icon-only buttons. Provide a concise programmatic label rather than relying on the icon’s appearance. [S1]
4. Inspect the exposed name. Confirm it is non-empty in the accessibility tree. [S1]
5. Review whether it is useful. A non-empty name can still be inaccurate or vague, so compare it with the button’s actual purpose. [S1]

Example review note: “Visible text: Save. Action: save the current changes. Name check: includes ‘Save’; exposed name is not replaced with conflicting wording.” This is a review template, not a claim that any particular page or implementation has passed testing.