글자 없는 단추와 숨긴 라벨

글자 없이 기호만 든 × 단추에는 aria-label로 읽는 이름을 붙이고, 화면에서만 숨길 라벨은 .sr-only 클래스로 숨깁니다. hidden이나 display: none으로 숨기면 화면뿐 아니라 읽는 쪽에서도 사라집니다.

할 일 화면의 한 줄에는 체크박스 · 할 일 글 · × 단추가 있습니다. 보는 사람은 × 모양으로 '지우기'인 줄 알지만, 듣는 사람에게는 기호 하나만 남습니다. 입력 칸 위의 라벨 '할 일'은 자리만 차지해 화면에서 감추고 싶어집니다. 그런데 아무렇게나 숨기면 칸의 읽는 이름까지 사라집니다. 이 레슨에서는 글 없는 요소에 이름을 붙이는 법과, 라벨을 숨기는 길마다 무엇이 남는지 봅니다.

<button class="delete">  ×</button>

1글자 없는 단추 — aria-label로 이름 붙이기

<button class="delete">
  ×
</button>

단추 안의 글이 기호 하나라 읽는 이름도 '×'입니다. 이 기호를 어떻게 읽을지는 프로그램마다 달라, 듣는 사람이 '지우는 단추'라고 알아듣기 어렵습니다.

<button
  class="delete"
  aria-label="삭제"
>
  ×
</button>

aria-label은 요소의 읽는 이름을 직접 적는 속성입니다. 화면은 그대로 ×이고, 읽는 이름만 '삭제'가 됩니다. 할 일 한 줄의 체크박스도 옆에 라벨을 둘 자리가 없어 aria-label="완료 표시"로 이름을 붙입니다.

2라벨을 숨기는 길 — 화면에서만, 또는 모두에게서

<label for="todo-input" hidden>
  할 일
</label>
<input id="todo-input" />

hidden을 붙인 라벨은 화면에서 사라지고, 칸의 읽는 이름도 비었습니다. hidden은 기본 스타일이 display: none을 거는 속성이라 CSS로 그리지 않은 것과 같습니다. 라벨을 숨기는 길마다 화면의 라벨과 칸의 읽는 이름에 남는 것은 이렇습니다.

브라우저 규칙 3. 요소 이름은 모양이 아니라 뜻입니다. 화면 읽기 프로그램 · 키보드 · 검색은 나무의 요소와 속성에서 역할과 이름을 얻습니다. 모양을 바꾸는 CSS는 뜻을 바꾸지 않습니다. 다만 CSS로 아예 그리지 않으면(display: none · visibility: hidden) 읽는 쪽에서도 사라집니다.

3.sr-only — 화면에서만 숨기는 클래스

<label
  for="todo-input"
  class="sr-only"
>
  할 일
</label>
<input
  id="todo-input"
  placeholder="예: 장보기"
/>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sr-only 규칙은 라벨을 1 × 1 점 크기로 줄이고 넘치는 글을 잘라 화면에서 보이지 않게 합니다. 그리기는 하니 읽는 쪽에는 남아, 칸의 읽는 이름은 '할 일'입니다. 여섯 줄이 저마다 하는 일은 14단원 .sr-only 한 줄씩에서 봅니다. 지금은 클래스 이름과 함께 이 여섯 줄을 그대로 복사해 둡니다. 이름 sr-only는 '화면 읽기 프로그램(screen reader)에만'이라는 뜻으로 널리 쓰는 이름입니다.

예제

할 일 화면의 한 줄입니다. 체크박스와 × 단추의 읽는 이름을 먼저 적어 본 뒤 결과 화면을 펴 보세요.

<li>
  <input
    type="checkbox"
    aria-label="완료 표시"
  />
  <span class="text">
    우유 사기
  </span>
  <button
    class="delete"
    aria-label="삭제"
  >
    ×
  </button>
</li>

자주 틀리는 곳

틀린 생각: 라벨을 지우고 placeholder만 남겨도 칸의 이름이 된다.

<input placeholder="예: 장보기" />

크롬은 라벨이 없으면 placeholder 글을 이름으로 씁니다. 그래서 이름은 무엇을 넣는 칸인지가 아니라 넣을 글의 보기 '예: 장보기'가 됩니다. 한 글자라도 치면 화면에서 그 보기도 사라져, 보는 사람은 무엇을 넣던 칸인지 잊습니다.

맞는 규칙: 칸마다 라벨을 둡니다. 화면에서 감출 라벨은 .sr-only로 숨기고, placeholder는 보기 글로만 씁니다.

틀린 생각: 글이 있는 단추에도 aria-label로 더 친절한 이름을 붙이면 좋다.

<button aria-label="보내기">
  후기 남기기
</button>

aria-label은 안의 글을 덮어써, 화면에는 '후기 남기기'가 보이는데 읽는 이름은 '보내기'가 됩니다. 보는 사람과 듣는 사람이 같은 단추를 다른 이름으로 알게 됩니다.

맞는 규칙: 안에 글이 있는 단추 · 링크는 그 글이 이름입니다. aria-label은 ×처럼 이름이 될 글이 없을 때만 씁니다.

틀린 생각: class="sr-only"만 붙이면 라벨이 숨는다.

<label
  for="todo-input"
  class="sr-only"
>
  할 일
</label>
<input id="todo-input" />

결과 화면에 '할 일'이 그대로 보입니다. 이 페이지에는 .sr-only 규칙이 없어, 클래스는 이름표일 뿐 아무 모양도 바꾸지 않습니다. 잰 값의 position도 규칙의 첫 줄(absolute)이 아니라 static 그대로입니다.

맞는 규칙: 숨기는 것은 클래스 이름이 아니라 CSS 규칙입니다. .sr-only 클래스를 쓰는 페이지에는 3절의 여섯 줄 규칙을 꼭 함께 둡니다(브라우저 규칙 4).

확인 문제

1. 예제의 체크박스에서 aria-label="완료 표시" 줄을 지웠습니다. 체크박스의 읽는 이름은 무엇일까요? 이름이 없으면 '없음'이라고 쓰세요.

<li>
  <input type="checkbox" />
  <span class="text">
    우유 사기
  </span>
  <button
    class="delete"
    aria-label="삭제"
  >
    ×
  </button>
</li>

2. 할 일 한 줄의 × 단추가 '삭제'로 읽히게, ____ 자리에 들어갈 속성 이름을 쓰세요.

<button
  class="delete"
  ____="삭제"
>
  ×
</button>

<button
  class="delete"
  aria-label="삭제"
>
  ×
</button>

3. 여행 일정 페이지의 검색 칸입니다. 라벨을 화면에서 감췄더니 칸의 읽는 이름이 비었습니다. 이 페이지의 CSS에는 3절의 .sr-only 규칙이 이미 있습니다. 라벨을 화면에서는 감춘 채 이름을 살리려면 몇 번 줄을 어떻게 고칠까요?

<label for="city" hidden>
  도시 이름
</label>
<input id="city" />

<label
  for="city"
  class="sr-only"
>
  도시 이름
</label>
<input id="city" />

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 둘째 코드를 hello.html의 body 안에 붙여 저장하고 엽니다. aria-label="삭제" 줄을 지워 저장 · 새로고침하고, 화면에서 달라진 곳이 있는지 봅니다. 화면은 그대로이고 바뀐 것은 읽는 이름뿐입니다 — 이 단원 끝 Accessibility 창과 점검 목록에서 그 창의 Name으로 두 경우를 견줘 봅니다.