Labels and text alternatives (라벨과 대체 텍스트)

2020년 12월 3일4분 읽기

스크린리더 사용자를 위해 의미있는 요소에 적절한 라벨이나 대체 텍스트가 있어야 합니다. 이러한 요소들은 접근성 트리에서 의미있게 표현됩니다.

요소의 이름이 역할과 결합되면, 사용자가 페이지 요소를 이해할 수 있습니다. 이름 없이는 스크린리더가 "버튼", "체크박스", "이미지"만 읽어줄 뿐입니다.

요소 이름을 확인하는 방법

크롬 개발자도구를 활용하여 확인할 수 있습니다:

모든 페이지는 <title> 요소를 가져야 하며, 스크린리더가 페이지 진입 시 이를 먼저 읽습니다.

<iframe> 요소도 title 속성이 필요합니다:

<iframe title="지도 설명" src="..."></iframe>

이미지: <img> 태그는 항상 alt 속성을 가져야 합니다. 로딩 실패 시 사용자가 이미지 내용을 이해할 수 있게 합니다. 장식용 이미지는 alt=""로 설정합니다.

링크된 이미지:

<a href="url">
  <img alt="클릭 시 이동 대상 설명" src="image.jpg">
</a>

입력 이미지:

<input type="image" alt="버튼 동작 설명" src="button.png">

Object 요소:

<object type="application/pdf" data="/report.pdf">
연간 보고서
</object>

버튼: 텍스트 내용으로 접근 가능한 이름을 계산합니다.

<button>예약하기</button>

아이콘 버튼: aria-label 속성 사용:

<button aria-label="왼쪽 정렬"></button>

링크: 의미있는 텍스트를 사용합니다.

두 가지 방법이 있습니다:

방법 1:

<label>
  <input type="checkbox">뉴스레터 구독?
</label>

방법 2:

<input id="promo" type="checkbox">
<label for="promo">뉴스레터 구독?</label>

샘플 1: <img src="temp.svg" alt="temp"> — 접근 가능한 이름 있음 (alt 속성)

샘플 2: <object type="application/pdf" data="/report.pdf" alt="보고서"></object> — 접근 가능한 이름 없음 (object 요소 내부에 텍스트 필요)

샘플 3: 아이콘만 있는 버튼 — 접근 가능한 이름 없음 (텍스트, aria-label 필요)

샘플 4: CSS로 숨겨진 툴팁이 있는 아이콘 버튼 — 접근 가능한 이름 있음 (display:none 아님)

샘플 5: <label><input type="checkbox">뉴스레터?</label> — 접근 가능한 이름 있음

샘플 6: <input type="checkbox" value="subscribe"> <label for="subscribe">뉴스레터?</label> — 접근 가능한 이름 없음 (id 속성 필요)