아이콘에 접근성 마크업이 필요한지는 한 가지 질문에 달려 있습니다: 주변 텍스트에 없는 의미를 이 아이콘이 담고 있는가? 이것만 답하면 나머지는 따라옵니다.
장식용 아이콘: 숨긴다
이미 모든 것을 말해 주는 텍스트를 꾸미기만 하는 아이콘이라면(“삭제”라는 글자 옆의 휴지통 아이콘), 스크린 리더는 건너뛰어야 합니다. aria-hidden="true"를 추가하세요:
<!-- Decorative: text already conveys the meaning -->
<button>Delete <svg aria-hidden="true">…</svg></button>정보용 아이콘: 레이블을 단다
아이콘이 그 자체로 의미를 전달한다면(주변 텍스트 없이 “인증됨”을 뜻하는 체크표시), role="img"과 레이블을 주세요:
<!-- Standalone, meaningful icon -->
<svg role="img" aria-label="Verified account">
<title>Verified account</title>
…
</svg>아이콘 전용 버튼: 버튼에 이름을 준다
가장 흔한 실수입니다. 아이콘만 있는 버튼(닫기용 × 하나)은 컨트롤에 레이블이 없으면 스크린 리더로 쓸 수 없습니다. 버튼에 레이블을 주고 아이콘은 숨기세요:
<!-- Icon-only control: label the button, hide the icon -->
<button aria-label="Close dialog">
<svg aria-hidden="true">…</svg>
</button>focusable="false"는 더 이상 필요 없습니다. Internet Explorer와 구형 Edge를 위한 우회책이었고, 최신 브라우저는 SVG를 탭 순서에 넣지 않습니다. 최신 아이콘 라이브러리도 장식용 아이콘에 aria-hidden을 대신 설정해 줍니다.
빠른 체크리스트
- 아이콘이 주변 텍스트를 반복한다 →
aria-hidden="true". - 아이콘이 단독으로 의미를 가진다 →
role="img"+aria-label(또는<title>). - 아이콘 전용 버튼/링크 → 버튼에
aria-label, 아이콘에aria-hidden. - 같은 것을 두 번 레이블하지 마세요 — 스크린 리더가 중복해서 읽습니다.