aria-label 언제 사용해야 할까
웹 접근성 실무 기준 정리
웹 접근성을 고려한 퍼블리싱을 하다 보면
aria-label 속성을 자주 사용하게 된다.
하지만 많은 퍼블리셔들이 다음과 같은 고민을 한다.
- aria-label은 언제 사용해야 할까?
- label 태그 대신 써도 될까?
- sr-only와 어떤 차이가 있을까?
이번 글에서는 aria-label을 언제 사용해야 하는지
퍼블리싱 실무 기준으로 정리해보자.
aria-label이란?
aria-label은 ARIA(Accessible Rich Internet Applications) 속성 중 하나로
요소의 이름을 스크린리더에게 제공하는 역할을 한다.
<!-- HTML -->
<button aria-label="검색">
<span class="icon-search"></span>
</button>
이 경우 화면에는 아이콘만 보이지만
스크린리더는 다음처럼 읽는다.
"검색 버튼"
즉 aria-label은
✔ 화면에 텍스트가 없어도
✔ 접근성 설명을 제공할 수 있는 속성이다.
aria-label을 사용해야 하는 경우
1. 아이콘 버튼
아이콘만 있는 버튼은
스크린리더에서 의미를 알 수 없다.
예를 들어 검색 버튼이 있다고 하자.
접근성 없는 코드
<!-- HTML -->
<button>
<span class="icon-search"></span>
</button>
접근성 있는 코드
<!-- HTML -->
<button aria-label="검색">
<span class="icon-search"></span>
</button>
이렇게 하면 스크린리더는
검색 버튼
으로 인식한다.
2. 텍스트를 추가하기 어려운 UI
디자인 때문에
텍스트를 추가할 수 없는 경우가 있다.
예:
- 모바일 메뉴 버튼
- 닫기 버튼
- 좋아요 버튼
<!-- HTML -->
<button aria-label="메뉴 열기">
☰
</button>
3. 추가 설명 제공
요소의 의미를 더 명확하게 설명할 때도 사용할 수 있다.
<!-- HTML -->
<button aria-label="게시글 삭제">
삭제
</button>
텍스트가 이미 있지만
스크린리더 사용자에게 더 명확한 설명을 제공한다.
aria-label을 사용하면 안 되는 경우
1. 이미 label이 있는 경우
폼 입력 요소에는
label 태그를 사용하는 것이 기본이다.
<!-- HTML -->
<label for="email">이메일</label>
<input id="email" type="email">
굳이 다음처럼 작성할 필요는 없다.
<!-- HTML -->
<input type="email" aria-label="이메일">
2. 실제 텍스트가 있는 경우
다음처럼 텍스트가 이미 있다면
aria-label은 필요 없다.
<!-- HTML -->
<button>검색</button>
이 경우 스크린리더는 이미
검색 버튼
을 읽을 수 있다.
aria-label vs sr-only
실무에서 많이 헷갈리는 부분이다.
| 방법 | 특징 |
| aria-label | 속성으로 설명 제공 |
| sr-only | 숨겨진 텍스트 제공 |
aria-label
<!-- HTML -->
<button aria-label="검색">
<span class="icon-search"></span>
</button>
sr-only
<!-- HTML -->
<button>
<span class="icon-search"></span>
<span class="sr-only">검색</span>
</button>
둘 다 접근성에 사용할 수 있지만
상황에 맞게 선택하는 것이 중요하다.
aria-label 사용 시 주의할 점
1. sr-only와 중복 사용하지 않기
다음 코드는 좋지 않다.
<!-- HTMl -->
<button aria-label="검색">
<span class="icon-search"></span>
<span class="sr-only">검색</span>
</button>
스크린리더가 중복으로 읽을 수 있다.
2. 의미 없는 텍스트 사용하지 않기
다음과 같은 라벨은 좋지 않다.
❌ 버튼
❌ 클릭
대신
⭕ 검색
⭕ 메뉴 열기
⭕ 게시글 삭제
처럼 명확한 기능을 설명해야 한다.
정리
aria-label은 다음 상황에서 사용하는 것이 좋다.
✔ 아이콘 버튼
✔ 텍스트를 추가하기 어려운 UI
✔ 추가 설명 제공
반대로 다음 경우에는 필요 없다.
❌ 이미 텍스트가 있는 버튼
❌ label 태그가 있는 입력 요소
접근성을 고려한 퍼블리싱에서는
적절한 상황에서 aria-label을 사용하는 것이 중요하다.