디자인 아틀라스
EN
◉ 접근성

접근 가능한 이름

Accessible Name

스크린 리더가 어떤 요소를 가리켜 실제로 읽어주는 이름. 아이콘만 있는 버튼은 라벨이 없으면 이름이 빈 문자열이 됩니다.

다른 이름: 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}}

접근 가능한 이름(accessible name)은 요소의 텍스트 콘텐츠, `aria-label`, `aria-labelledby`, `alt`, `title` 등을 정해진 우선순위(accessible name computation)로 조합해서 만들어집니다. 아이콘만 있고 텍스트가 없는 버튼(쓰레기통 아이콘으로 만든 삭제 버튼 등)은 시각적으로는 뜻이 분명해도, 이 계산 과정을 거치면 이름이 빈 문자열이 되어 스크린 리더가 그냥 "button"이라고만 읽습니다.

`aria-label="Delete item"`을 주면 시각적으로는 아무것도 안 바뀌지만 접근성 트리에 이름이 채워져서 "Delete item, button"으로 읽힙니다. 브라우저 개발자 도구의 Accessibility 패널에서 Computed name을 직접 확인할 수 있습니다.

데모의 왼쪽 버튼은 라벨이 없어 계산된 이름이 비어 있고, 오른쪽은 `aria-label`이 있어 이름이 채워진 상태를 인스펙터 패널로 보여줍니다.

언제 쓰나

아이콘만 있는 버튼을 만들 때마다 aria-label을 습관적으로 확인하세요. 브라우저 개발자 도구 Accessibility 탭에서 Computed name이 비어 있지 않은지 직접 눈으로 보는 게 가장 확실합니다.