aria-label

aria-label 은 웹 페이지에서 화면에 글자가 없는 부품에 이름을 붙여 줍니다. 그 이름은 눈에 보이지 않습니다. 화면을 소리로 읽어 주는 프로그램이 그 이름을 읽어 사용자에게 전합니다.

상세

아이콘만 든 닫기 버튼 하나를 예로 삼아 끝까지 봅니다. 먼저 이 버튼이 화면을 못 보는 사용자에게 어떻게 전해지는지 봅니다. 그다음 aria-label 이 그 버튼에 이름을 붙이는 방식과 이름을 정하는 순서를 따라갑니다.

뒤쪽에서는 값을 적는 법과 aria-label 이 안 먹는 경우를 봅니다. 끝으로 다른 이름 재료와 견주어 언제 쓰고 언제 안 쓰는지를 가립니다.

이름이 없는 버튼

스크린 리더는 화면의 글과 부품을 소리나 점자로 읽어 주는 소프트웨어입니다. 화면을 못 보는 사용자가 씁니다. 사용자는 키보드로 부품 사이를 옮겨 다닙니다. 부품에 닿을 때마다 「저장, 버튼」 같은 안내를 듣습니다.

스크린 리더는 화면에 그려진 그림을 보지 않습니다. 브라우저가 따로 정리해 넘기는 부품 명단을 읽습니다. 이 명단이 접근성 트리입니다.

명단의 부품마다 두 가지가 붙습니다. 무엇인지를 뜻하는 역할과 무엇이라 부르는지를 뜻하는 이름입니다. 「저장, 버튼」에서 이름은 「저장」, 역할은 「버튼」입니다.

버튼의 이름은 대개 버튼 안의 글자에서 옵니다. <button>저장</button> 이면 이름은 「저장」입니다. 그런데 아이콘만 든 버튼은 안에 글자가 없습니다.

아래 첫 줄이 그런 버튼입니다. 오른쪽 주석은 각 버튼의 이름입니다.

<button><svg>…</svg></button>  <!-- 없음 -->
<button aria-label="닫기">     <!-- 닫기 -->
  <svg aria-hidden="true">…</svg>
</button>

첫 줄은 이름이 없어 스크린 리더가 「버튼」이라고만 읽습니다. 사용자는 이것이 창을 닫는지 지우는지 알 수 없습니다. 둘째 버튼은 aria-label 의 값 「닫기」가 이름이 되어 「닫기, 버튼」으로 읽힙니다.

<svg> 는 아이콘 그림을 그리는 태그입니다. 거기 붙은 aria-hidden 은 그 그림을 접근성 트리에서 뺍니다. 이름은 버튼이 이미 가졌으니 그림까지 따로 읽을 까닭이 없습니다.

ARIA 가 정한 속성

aria-label 은 ARIA(Accessible Rich Internet Applications)가 정한 속성입니다. ARIA 는 웹 페이지의 태그에 속성을 덧붙여 접근성 트리의 내용을 바꾸는 표준입니다. 화면의 모양과 동작은 바꾸지 않습니다.

값은 아무 글자나 담는 문자열입니다. 브라우저는 이 값을 고치지 않고 부품의 이름으로 씁니다.

이렇게 스크린 리더에게 전해지는 부품의 이름을 접근 가능한 이름이라고 합니다. aria-label 은 이 이름을 정하는 재료 가운데 하나입니다. 재료는 여럿입니다. 브라우저가 그중 하나를 고릅니다.

이름을 정하는 순서

브라우저는 정해진 순서로 재료를 훑습니다. 먼저 찾은 재료가 이름이 됩니다. 뒤의 재료는 보지 않습니다. aria-label 은 이 순서에서 꽤 앞에 섭니다. 순서를 그림으로 보기 전에 다른 재료부터 풉니다.

label 은 입력 칸 옆에 붙이는 글자 태그입니다. alt 는 그림을 대신하는 글을 적는 속성입니다. 둘 다 태그가 스스로 가진 이름 재료입니다.

aria-labelledby 는 다른 태그를 가리켜 그 태그의 글자를 이름으로 빌려 옵니다. 가리킬 때는 문서 안에서 태그 하나에 붙이는 고유한 이름인 id 를 씁니다. 이것이 있으면 aria-label 은 무시됩니다.

title 은 마우스를 올리면 뜨는 작은 설명 글을 적는 속성입니다. 다른 재료가 하나도 없을 때 마지막으로 이름이 됩니다.

flowchart TD
    A["aria-labelledby 가 있나"] -->|있다| B["가리킨 태그의 글자"]
    A -->|없다| C["aria-label 에 공백 아닌 값이 있나"]
    C -->|있다| D["aria-label 값"]
    C -->|없다| E["label · alt 같은 태그의 재료가 있나"]
    E -->|있다| F["그 재료"]
    E -->|없다| G["안에 든 글자가 있나"]
    G -->|있다| H["그 글자"]
    G -->|없다| I["title 값"]

aria-label 은 태그의 재료와 안에 든 글자보다 앞섭니다. 그래서 글자가 있는 부품에 붙이면 그 글자를 덮어씁니다. 이 덮어쓰기가 쓸모 있는 경우와 사고가 되는 경우가 다 있습니다. 사고가 되는 쪽은 뒤의 「화면 글자와 어긋날 때」에서 봅니다.

쓸모가 있는 쪽은 「더 보기」 링크가 한 페이지에 여럿인 경우입니다. 스크린 리더 사용자는 페이지의 링크를 목록으로 모아 듣기도 합니다. 그 목록에 「더 보기」가 다섯 번 나오면 어느 것이 무엇인지 모릅니다.

<a href="/n">더 보기</a> <!-- 더 보기 -->
<a aria-label="공지 더 보기"
   href="/n">       <!-- 공지 더 보기 -->
  더 보기
</a>

둘째 링크는 화면에 똑같이 「더 보기」로 보입니다. 스크린 리더에게는 「공지 더 보기」로 전해집니다. 눈으로 보는 사람은 링크 위의 제목을 보고 무엇을 더 보는지 압니다. aria-label 이 그 정보를 귀로 듣는 사람에게도 전합니다.

값을 적는 법

이름은 짧은 낱말 하나나 둘이면 됩니다. 스크린 리더는 이름 뒤에 역할을 붙여 읽습니다. 그러니 이름에 역할을 넣으면 같은 말을 두 번 듣습니다.

버튼에 aria-label="닫기 버튼" 을 적으면 「닫기 버튼, 버튼」으로 읽힙니다. 값은 「닫기」면 충분합니다.

값이 비었거나 공백뿐이면 브라우저는 aria-label 이 없는 것으로 칩니다. 순서도의 다음 재료로 넘어갑니다. <button aria-label="">저장</button> 의 이름은 안의 글자 「저장」입니다.

부품을 길게 설명하는 글은 이름에 넣지 않습니다. 이름은 부품에 닿을 때마다 읽히기 때문입니다. 덧붙일 설명은 aria-describedby 로 따로 겁니다. 이 속성은 다른 태그의 글을 이름 뒤에 읽히는 설명으로 빌려 옵니다.

붙여도 안 읽히는 태그

aria-label 은 이름을 가질 수 있는 부품에만 먹습니다. 버튼 · 링크 · 입력 칸처럼 사용자가 만지는 부품이 그렇습니다. 페이지를 큰 구역으로 나눈 표지인 랜드마크도 이름을 가질 수 있습니다.

<div> 와 <span> 은 아무 역할이 없는 상자 태그입니다. 역할이 없으면 이름도 가질 수 없습니다. 이런 태그에 aria-label 을 붙이면 스크린 리더가 그 값을 읽지 않을 수 있습니다.

아래 상자의 오른쪽 주석은 스크린 리더가 읽는 말입니다.

<div aria-label="알림">
  새 글 3개         <!-- 새 글 3개 -->
</div>

안의 글자는 읽힙니다. 「알림」은 읽힐지 안 읽힐지가 브라우저와 스크린 리더마다 갈립니다. 이름이 꼭 필요하면 역할이 있는 태그를 쓰거나 role 속성으로 역할부터 적습니다.

화면 글자와 어긋날 때

aria-label 의 값은 화면에 안 보입니다. 그래서 화면 글자를 고치고 aria-label 을 안 고쳐도 눈으로 보는 사람은 알아채지 못합니다. 화면에는 「저장」이 보입니다. 스크린 리더는 옛 이름 「등록」을 읽습니다.

이 이름을 쓰는 것은 스크린 리더만이 아닙니다. 장애가 있는 사용자를 돕는 소프트웨어와 기기를 묶어 보조 기술이라고 합니다. 스크린 리더도 그중 하나입니다.

음성 제어는 사용자가 말로 부품을 누르게 하는 보조 기술입니다. 사용자는 화면에 보이는 글자를 말합니다. 이름이 화면 글자와 어긋나면 이 사용자도 막힙니다.

화면에 「검색」이라고 적힌 버튼의 이름이 「찾기」라면 「검색 눌러」라는 명령이 안 먹습니다. 그래서 화면에 글자가 있는 부품이면 aria-label 값에 그 글자를 빠짐없이 넣습니다. 덧붙일 말은 그 앞이나 뒤에 붙입니다. 앞의 「공지 더 보기」가 화면 글자 「더 보기」 앞에 「공지」를 붙인 예입니다.

다른 이름 재료와 견주기

이름을 대는 재료는 aria-label 말고도 여럿입니다. 화면에 보이는지와 어디에 쓰는지로 가르면 아래 표가 됩니다.

입력 칸은 aria-label 로도 이름을 붙일 수 있습니다. 그래도 <label> 이 먼저입니다. 눈으로 보는 사람도 그 칸에 무엇을 넣는지 알 수 있습니다. 글자를 누르면 칸에 커서가 가는 동작도 따라옵니다.

<input aria-label="검색어"> <!-- 검색어 -->
<label for="q">검색어</label>
<input id="q">             <!-- 검색어 -->

두 입력 칸의 이름은 같습니다. 차이는 화면입니다. 첫째 칸은 무엇을 넣는 칸인지 화면에 아무 글자도 없습니다.

쓰는 때와 안 쓰는 때

앞의 내용을 상황별로 모으면 아래와 같습니다. 위에서부터 보고 맞는 줄에서 멈춥니다.

마지막 줄은 메뉴 구역이 위와 아래에 하나씩 있는 페이지가 그렇습니다. 메뉴 구역은 <nav> 태그로 감쌉니다. 이 태그는 그 자체가 랜드마크입니다. <nav aria-label="주 메뉴"> 와 <nav aria-label="바닥 메뉴"> 로 이름을 달면 스크린 리더 사용자가 두 구역을 구분해 건너갑니다.

이름이 붙었는지 확인하기

aria-label 은 화면에 안 보이니 눈으로 확인할 수 없습니다. 브라우저 개발자 도구의 접근성 패널을 열면 부품마다 정해진 이름이 보입니다. 이름이 어느 재료에서 왔는지도 함께 나옵니다.

테스트 코드로도 확인합니다. Playwright 는 브라우저를 코드로 조종해 화면을 시험하는 도구입니다. 아래 한 줄은 역할이 버튼이고 이름이 닫기인 부품을 찾아 누릅니다.

page.get_by_role("button", name="닫기").click()

aria-label 이 빠졌거나 값이 다르면 이 줄이 부품을 못 찾아 실패합니다. 스크린 리더가 못 알아볼 버튼을 테스트가 먼저 잡아 주는 셈입니다.

관련 항목

aria-label 이 속하는 상위 분류와 표준

ARIA · 접근성 · 웹 접근성 · WCAG · W3C · HTML

aria-label 과 함께 이름·설명을 정하는 재료

aria-labelledby · aria-describedby · label 요소 · alt 속성 · title 속성 · 대체 텍스트

aria-label 이 바꾸는 접근성 트리의 정보

접근성 트리 · 접근 가능한 이름 · 접근 가능한 설명 · ARIA 역할 · 암묵적 역할 · 이름 계산

aria-label 과 나란히 쓰는 ARIA 속성

role · aria-hidden · aria-expanded · aria-live · aria-controls · aria-pressed

aria-label 을 붙이는 부품

아이콘 버튼 · 랜드마크 · 링크 · 입력 칸 · 모달 대화상자 · 내비게이션

aria-label 값을 읽어 전하는 보조 기술

보조 기술 · 스크린 리더 · 음성 제어 · 점자 디스플레이

aria-label 보다 먼저 쓰는 HTML 수단

시맨틱 마크업 · button 요소 · input 요소 · 키보드 접근성

aria-label 이 붙었는지 살피는 도구

개발자 도구 · Playwright · 로케이터 · Testing Library · 자동 검사