What the person is doing
A toolbar, table row, card, or compact navigation surface contains icon-only controls.
Quality check · lesson 17 of 21 · Disclosure And Attention Management
Underlying principle: Attention is part of the task. Disclosure reveals supporting detail when it becomes useful; interruption earns prominence when the person must decide or act before continuing.
Make users confident about what will happen before activation instead of forcing recognition, memorization, or trial-and-error.
Attention is part of the task. Disclosure reveals supporting detail when it becomes useful; interruption earns prominence when the person must decide or act before continuing.
A toolbar, table row, card, or compact navigation surface contains icon-only controls.
Make users confident about what will happen before activation instead of forcing recognition, memorization, or trial-and-error.
Default state where the action name is visible or programmatically exposed before activation.
Can a first-time user name the action and consequence before pressing the control?
The visual control, accessible name, and action result use the same verb and object.
A toolbar, table row, card, or compact navigation surface contains icon-only controls.
Open the working example, try its controls, and compare the behavior against the decision guidance.
A toolbar, table row, card, or compact navigation surface contains icon-only controls.
Make users confident about what will happen before activation instead of forcing recognition, memorization, or trial-and-error.
Default state where the action name is visible or programmatically exposed before activation.
Users press the wrong icon because several symbols look similar or mean different things in adjacent contexts.
Every interactive icon control needs an accessible name that describes the action and, when useful, the affected object.
W3C Web Accessibility Initiative - checked
WAI-ARIA APG documents accessible names for focusable interactive elements and action-based naming for icon buttons.
W3C Web Accessibility Initiative - checked
WAI-ARIA APG button guidance covers button naming, states, and standard keyboard activation behavior.
Google Material Design - checked
Material Design documents button variants, icon-with-text buttons, and icon buttons whose icons must signify the button action.
Source trail checked: