Design Atlas
한국어
◉ Accessibility

Accessible Name

접근 가능한 이름

The name a screen reader actually announces for an element. An icon-only button with no label computes to an empty accessible name.

Also known as: Accessible Name and DescriptionName, Role, Value
···
html
<div class="stage">
  <div class="pane">
    <div class="tag">✗</div>
    <button class="ib" id="b1"><span class="trash"></span></button>
    <div class="insp"><b>name:</b> <span id="n1">""</span></div>
  </div>
  <div class="pane">
    <div class="tag">✓ aria-label</div>
    <button class="ib" id="b2"><span class="trash"></span></button>
    <div class="insp ok"><b>name:</b> <span id="n2">"Delete item"</span></div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%}
.tag{position:absolute;top:8px;left:10px;font:700 10.5px/1 ui-monospace,monospace;color:var(--muted)}
.ib{width:20%;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center}
.trash{width:44%;height:50%;border:2px solid var(--fg);border-top:none;border-radius:0 0 3px 3px;position:relative}
.trash::before{content:'';position:absolute;top:-5px;left:-3px;right:-3px;height:2px;background:var(--fg)}
.insp{font:10px/1.3 ui-monospace,monospace;color:var(--accent-2);text-align:center;padding:0 6%;animation:blink 2.4s ease-in-out infinite}
.insp.ok{color:var(--accent-3)}
@keyframes blink{0%,100%{opacity:.6}50%{opacity:1}}

An element's accessible name is computed from its text content, `aria-label`, `aria-labelledby`, `alt`, and `title`, combined by a fixed priority order (the accessible name computation). An icon-only button — a trash icon used as delete, say — can be visually obvious yet compute to an empty name, so a screen reader just says "button."

Adding `aria-label="Delete item"` changes nothing visually but fills in the accessibility tree, so it now announces "Delete item, button." Browser devtools' Accessibility panel lets you inspect the computed name directly.

The demo's left button has no label, so its computed name is empty; the right one has `aria-label`, shown filled in through an inspector-style readout.

When to use

Whenever you build an icon-only button, make checking aria-label a habit. The surest check is opening devtools' Accessibility panel and confirming Computed name isn't empty.