ARIA 접근성 가이드

속성 · 이름·설명 · 전역

aria-label

화면에 보이는 텍스트가 없거나 부족한 요소에 문자열로 직접 접근 가능한 이름을 붙입니다.

기초

한눈에 보기

구분
속성 (Property)
분류
이름·설명
값 형식
문자열 (string)
기본값
없음
적용 범위
모든 요소 (전역 속성)
HTML 대체
<label>, 요소의 텍스트 콘텐츠, <img alt>, title 속성(최후 수단)

설명

aria-label은 요소의 접근 가능한 이름(accessible name, 보조기술이 요소를 부를 때 쓰는 이름)을 문자열로 정합니다. 화면낭독기는 요소에 포커스가 가거나 가상 커서로 지나갈 때 이 이름을 역할·상태와 함께 읽습니다. 값은 화면에 표시되지 않습니다.

주로 눈에 보이는 텍스트가 없는 요소에 씁니다. 돋보기 아이콘만 있는 검색 버튼, ✕ 모양의 닫기 버튼, 한 페이지에 여러 개 있는 <nav>를 구분하는 이름(예: “주 메뉴”, “푸터 메뉴”)이 대표적입니다. 화면에 이미 이름으로 쓸 만한 텍스트가 있다면 그 텍스트를 aria-labelledby로 참조하거나 HTML <label>을 쓰는 편이 더 낫습니다. 보이는 이름과 들리는 이름이 같아야 음성 인식 사용자도 “검색 클릭”처럼 말해서 조작할 수 있기 때문입니다(WCAG 2.5.3 이름 속 레이블).

이름을 정하는 우선순위는 aria-labelledby → aria-label → HTML 고유 수단(<label>, alt, <caption> 등) → 콘텐츠(버튼·링크 안의 텍스트) → title 순입니다. 따라서 aria-label을 붙이면 요소 안의 텍스트나 연결된 <label>은 이름에서 무시됩니다. 텍스트가 있는 버튼에 다른 내용의 aria-label을 붙이면 화면과 화면낭독기가 서로 다른 말을 하게 됩니다.

WAI-ARIA 1.2는 이름을 가질 수 없는 역할에 aria-label을 쓰지 못하게 합니다. generic(역할 없는 <div>·<span>), paragraph, presentation/none, strong, emphasis, code, caption, deletion, insertion, subscript, superscript이 여기에 해당하며, 이런 요소에 붙인 값은 화면낭독기마다 읽거나 무시하는 등 동작이 일정하지 않습니다. 또한 자동 번역 기능이 속성 값을 번역하지 않는 경우가 있어 다국어 사이트에서는 보이는 텍스트를 참조하는 방식이 더 안전합니다.

테스트할 때는 브라우저 개발자 도구의 접근성 패널에서 계산된 Name을 확인하고, 그 값이 화면에 보이는 레이블과 같은 단어로 시작하는지, 역할 이름(“버튼”)을 중복해서 넣지 않았는지, 이름이 금지된 요소에 쓰이지 않았는지 점검합니다.

역할 이름은 넣지 않습니다

화면낭독기가 역할을 따로 읽으므로 aria-label="검색 버튼"은 “검색 버튼, 버튼”으로 들립니다. aria-label="검색"이면 충분합니다.

값

값
값의미
문자열요소의 접근 가능한 이름이 되는 텍스트입니다. 짧고 구체적으로, 역할 이름 없이 씁니다.
(빈 문자열 또는 공백)이름이 없는 것과 같습니다. 이름 계산에서 무시되고 다음 순위의 수단(콘텐츠 등)이 쓰입니다.

사용 예

아이콘만 있는 버튼

보이는 텍스트가 없으므로 aria-label로 이름을 붙이고, 아이콘 SVG는 aria-hidden으로 숨깁니다.

권장HTML
<button type="button" aria-label="검색">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">…</svg>
</button>

같은 랜드마크 구분하기

HTML
<nav aria-label="주 메뉴">…</nav>
<nav aria-label="이동 경로">…</nav>

랜드마크 이름에는 역할 이름(“내비게이션”)을 넣지 않습니다. 화면낭독기가 “주 메뉴, 탐색 랜드마크”처럼 읽습니다.

보이는 텍스트와 다른 이름 (비권장)

화면에는 “더보기”가 보이지만 화면낭독기와 음성 인식에서는 “공지사항 전체 목록”이 이름이 됩니다.

비권장HTML
<a href="/notice" aria-label="공지사항 전체 목록">더보기</a>

보이는 텍스트를 이름 앞부분에 포함하세요. 예: <a href="/notice">더보기<span class="sr-only"> 공지사항</span></a>

이름을 가질 수 없는 요소 (비권장)

비권장HTML
<div aria-label="주의 사항">결제 후 취소할 수 없습니다.</div>
<span aria-label="새 글">N</span>

역할이 없는 <div>·<span>은 generic이라 이름이 금지됩니다. 필요한 정보는 보이는 텍스트나 sr-only 텍스트로 제공합니다.

직접 해 보기

입력란에 이름을 입력하면 아이콘 버튼의 aria-label이 바뀝니다. 비우면 버튼에 이름이 없어집니다.

계산된 이름: 검색

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
aria-label="검색" 아이콘 버튼에 포커스검색, 버튼
이름이 없는 아이콘 버튼에 포커스버튼
<nav aria-label="주 메뉴">로 이동주 메뉴, 탐색 랜드마크
aria-label="검색 버튼"처럼 역할을 중복한 경우검색 버튼, 버튼

사용 지침

이렇게 쓰세요

  • 아이콘 버튼, 닫기 버튼처럼 보이는 텍스트가 없는 조작 요소에 씁니다.
  • 같은 종류의 랜드마크가 여러 개일 때 구분하는 이름으로 씁니다.
  • 보이는 텍스트가 일부라도 있다면 그 텍스트로 이름을 시작하게 만듭니다.
  • 짧고 구체적으로 씁니다. “클릭”, “버튼”, “링크” 같은 말은 넣지 않습니다.

이렇게 쓰지 마세요

  • 역할 없는 <div>·<span>, <p> 등 이름이 금지된 요소에 쓰지 않습니다.
  • 이미 텍스트가 있는 버튼·링크에 다른 내용의 aria-label을 덮어쓰지 않습니다.
  • 긴 안내 문장을 넣지 않습니다. 부가 설명은 aria-describedby로 연결합니다.
  • <label>이 있는 입력 필드에 중복으로 붙이지 않습니다. <label>이 무시됩니다.

사용할 수 있는 역할

전역 속성이므로 모든 역할과 HTML 요소에 쓸 수 있습니다. 특히 다음 역할과 자주 함께 씁니다.

buttonlinknavigationregiondialogimgtextboxsearchboxcomboboxtablistmenu
aria-labelledbyaria-describedbyaria-descriptionaria-braillelabel

이 속성을 쓰는 패턴

버튼과 토글 버튼페이지 레이아웃(랜드마크)모달 대화상자

참고 자료