정의 및 사용 방법

aria-label 속성은 웹 접근성 측면에서 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자에게 현재 요소에 대한 '접근성 이름(accessible name)'을 이 속성의 값인 텍스트로 제공하는 데 사용됩니다.

다음은 '접근성 이름(accessible name)' 용어에 대한 간단한 부연설명입니다.
접근성 이름(accessible name)
웹 접근성 측면에서 요소의 시각적 속성(예: 버튼에 표시된 텍스트)이나 비시각적 속성(예: 그래픽 이미지나 아이콘의 대체 텍스트)을 통해 스크린 리더 등과 같은 접근성 도구가 식별할 수 있는 해당 요소의 이름입니다.

참고하세요!
aria-label 속성의 사용 목적은 aria-labelledby 속성과 동일합니다. 두 속성은 모두 요소에 접근성 이름(accessible name)을 제공하기 위해 사용됩니다.

페이지나 문서 작성자가 보기에 화면을 보는 사용자에게는 접근성에 불편함이 없지만, 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자에게는 해당 요소를 식별하거나 그 목적이나 기능을 식별할 수 있는 접근성 이름(accessible name)이 없어 콘텐츠를 파악하는 데 제약이 있는 경우 접근성을 향상하기 위해 사용할 수 있습니다.

aria-label 속성은 다음과 같은 경우 유용하게 활용될 수 있습니다.

  • 텍스트 제공 없이 이미지나 아이콘 등의 그래픽으로만 기능이 표현된 버튼에 레이블(이름)을 제공해 기능을 식별하게 해야 하는 경우
  • 화면을 보는 사용자에게는 불편함이 없지만, 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자에게는 콘텐츠의 구조나 역할이 비슷한 여러 개의 요소들이 있어 식별하기 어려울 때
  • 스크린 리더 등과 같은 접근성 도구로 웹 페이지의 콘텐츠 구조를 쉽게 탐색할 수 있도록 고안된 랜드마크(landmark) 요소에 접근성 이름(accessible name)이 없어서 레이블(이름)을 지정하면 쉽게 식별하고 파악할 수 있다고 판단될 때

예제

다음 예제들을 통해 aria-label를 사용하는 방법에 대해 살펴보겠습니다.

대화형 요소나 위젯의 기능을 레이블로 식별하도록

aria-label은 상호 작용이 가능한 대화형 요소(Interactive Elements, 예: <button> 등)나 위젯이 화면을 보는 사용자에게는 불편함이 없지만, 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자에게는 텍스트 제공이 없어서 기능을 식별할 수 없을 때 유용하게 사용될 수 있습니다.

다음은 텍스트 제공 없이 이미지나 아이콘 등의 그래픽으로만 기능이 표현된 버튼에 레이블(이름)을 제공해 기능을 식별하게 해야 하는 경우 aria-label을 사용한 예제입니다.

HTML 
<style>
    .svg {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
    }
    .magnifier-glasses {
        fill: transparent;
        stroke-width: 1.4;
        stroke: #222;
    }
    .magnifier-handle {
        stroke-dashoffset: -7.5;
        stroke-dasharray: 7.9, 20;
        fill: transparent;
        stroke-width: 2.2;
        stroke: #222;
    }
</style>
<button type="submit" aria-label="검색어 제출">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 20 20">
		<circle class="magnifier-glasses" cx="8.2" cy="8.2" r="7.2" />
		<path class="magnifier-handle" d="M 8.2 8.2 L 22 22" />
	</svg>
</button>
실제 적용된 모습

이렇게 하면 화면을 보는 사용자에게는 별다른 변화가 없지만, 스크린 리더를 사용하는 사용자가 해당 콘텐츠를 더 쉽게 이해하고 탐색하는 데 도움을 줍니다.

콘텐츠의 구조나 역할이 비슷한 여러 개의 요소들을 레이블로 식별하도록

aria-label은 콘텐츠의 구조나 역할이 비슷한 여러 개의 요소들을 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자가 쉽게 식별할 수 있도록 각 요소에 레이블(이름)을 제공하는 경우에 사용할 수 있습니다.

다음에 나오는 예제 코드에는 글로벌 헤더에 두 개의 내비게이션이 있습니다. 화면을 보는 사용자에게는 스타일을 통해 두 내비게이션이 어떻게 다른지 명확하게 식별할 수 있지만, 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자에게는 콘텐츠의 구조나 역할이 비슷하여 각각의 내비게이션을 식별하기 어려울 수 있습니다. 이러한 경우 aria-label을 사용해 각 내비게이션에 레이블(이름)을 제공할 수 있습니다.

HTML 
<header> <!-- 글로벌 헤더 -->
    .... 로고
    <nav aria-label="글로벌 메뉴">
        <ul>
            <li><a href="/">홈</a></li>
            <li><a href="">회사 정보</a></li>
            <li><a href="">서비스</a></li>
            <li><a href="">연락처</a></li>
        </ul>
    </nav>
    ...
    <nav aria-label="카테고리 분류 메뉴">
        <ul>
            <li><a href="">카테고리 1</a></li>
            <li><a href="">카테고리 2</a></li>
            <li><a href="">카테고리 3</a></li>
            <li><a href="">카테고리 4</a></li>
        </ul>
    </nav>
    .... 검색
</header>

빠르게 탐색하는 랜드마크(landmark) 요소를 레이블로 쉽게 식별하도록

웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소들을 "랜드마크(landmark)" 요소(예를 들어, 글로벌 헤더, 메인, 글로벌 푸터 등)라고 하며 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자는 랜드마크(landmark) 요소들을 선택적으로 빠르게 탐색할 수 있습니다.

이때, 웹 페이지에 동일한 역할(role)의 랜드마크가 여러 개 있고 각 랜드마크에 접근성 이름(accessible name)이 없어서 구별하기 어려운 경우에는 aria-label을 사용하여 각 랜드마크에 레이블(이름)을 제공할 수 있습니다.

다음은 웹 페이지에 두 개의 <aside> 랜드마크가 있고, 각 랜드마크를 구별할 수 있는 접근 가능한 이름이 없는 경우 aria-label을 사용하여 각 랜드마크에 레이블(이름)을 제공하는 예제입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>...</title>
    </head>
    <body>
        <header>
            <h1>웹 페이지 제목</h1>
        </header>
        <main>
            <article>
                <h2>주요 콘텐츠 제목</h2>
                <p>주요 내용...</p>
            </article>
        </main>
        ...
        <aside aria-label="관련 글">
            <ul>
                <li><a href="">HTML <code><form></code> 태그</a></li>
                <li><a href="">HTML <code><input></code> 태그</a></li>
                <li><a href="">HTML <code><button></code> 태그</a></li>
            </ul>
        </aside>
        ...
        <aside aria-label="인기 글">
            <ul>
                <li><a href="">HTML 태그 정리</a></li>
                <li><a href="">CSS 선택자 사용 방법</a></li>
                <li><a href="">JavaScript 기본 문법</a></li>
            </ul>
        </aside>
        ...
        <footer>
            <p>© copyright 웹 페이지</p>
        </footer>
    </body>
</html>

좀 더 자세한 내용은 ARIA Landmarks Example을 참조하시기 바랍니다.

값

웹 요소에 대한 접근성 이름(accessible name)을 텍스트로 지정합니다.

올바른 사용 방법

aria-label 속성은 화면을 보는 사용자에게는 접근성에 불편함이 없지만, 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자에게는 해당 요소를 식별하거나 그 목적이나 기능을 식별할 수 있는 접근성 이름(accessible name)이 없어 콘텐츠를 파악하는 데 제약이 있는 경우에만 사용해야 합니다.

무분별한 사용 금지

페이지나 문서에서 대부분의 콘텐츠는 '특별한 의미가 전혀 없는 레이아웃이나 순수 장식 콘텐츠'와 사용자에게 '정보를 전달하는 콘텐츠'로 구분할 수 있습니다.

aria-label 속성은 '특별한 의미가 전혀 없는 레이아웃이나 순수 장식 콘텐츠'에 사용할 필요가 없습니다. 웹 접근성 측면에서 스크린 리더 등과 같은 접근성 도구를 사용하는 사용자에게 이러한 요소는 접근성 이름(accessible name)을 지정해 불필요한 정보를 제공해 접근성을 저하시킬 수 있기 때문입니다.

또한, '정보를 전달하는 콘텐츠'들의 대부분은 요소의 시각적 속성(예: 버튼에 표시된 텍스트)이나 비시각적 속성(예: 그래픽 이미지나 아이콘의 대체 텍스트)을 통해 접근성 이름(accessible name)이 생성됩니다. 이러한 요소에도 aria-label 속성을 사용할 필요는 없습니다.

하지만, '정보를 전달하는 콘텐츠' 중에서도 적절한 접근성 이름(accessible name)이 없는 경우(예: 텍스트 제공 없이 이미지나 아이콘 등의 그래픽으로만 기능이 표현된 버튼)에 접근성 향상을 위한 aria-label 속성의 사용을 고려해 볼 수 있습니다.

aria-label 속성 사용이 금지된 요소

스크린 리더 등과 같은 접근성 도구를 사용하는 사용자에게는 요소에 aria-label 속성으로 접근성 이름(accessible name)을 제공하는 것이 원하는 사용자 경험에 부합하지 않는 상황도 있습니다.

예를 들어 <caption> 태그는 부모 테이블(<table>)의 설명 또는 제목을 나타냅니다. 또한, 스크린 리더 및 기타 보조 기술(assistive technologies, 또는 ATs)을 사용하는 사용자에게는 <caption>의 텍스트 콘텐츠를 통해 자동으로 접근성 이름(accessible name)이 제공됩니다. 그럼에도 불구하고, aria-label 속성으로 접근성 이름을 제공하는 것은 이미 제공되는 접근성 이름을 다시 중복 지정하는 것이므로 불필요합니다.

HTML 
<table aria-label="분식점 메뉴"> <!-- 자식인 <caption> 태그에서 <table>에 자동으로 접근성 이름을 제공하므로
                                   불필요하게 중복된 접근성 이름을 제공 -->
    <caption>분식점 메뉴</caption>
    <tr>
        <th>메뉴</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr>
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>

또한, 자체적으로 아무런 의미가 전혀 없으며 특별한 의미나 역할(role) 부여없이 레이아웃이나 순수 장식 콘텐츠'로만 사용된 <div>나 <span>같은 요소에도 aria-label 속성을 사용할 필요는 없습니다.

이러한 이유로 인해 명세서는 aria-label 속성 사용을 금지하는 요소들을 지정하고 있습니다.

aria-label 속성을 명시적 또는 암시적인(implicit)으로 다음의 role 속성의 값을 가지는 요소에 지정해서는 안 됩니다.

  • caption
  • code
  • definition
  • deletion
  • emphasis
  • generic
  • insertion
  • mark
  • none
  • paragraph
  • strong
  • subscript
  • suggestion
  • superscript
  • term
  • time
  • tooltip

랜드마크에 접근성 이름(accessible name)을 지정할 때에는

aria-label 속성이 유효하게 지정된 요소는 스크린 리더가 이 속성의 값으로 제공된 접근성 이름(accessible name)을 사용자에게 음성으로 전달합니다.

스크린 리더 등과 같은 접근성 도구로 웹 페이지의 콘텐츠 구조를 쉽게 탐색할 수 있도록 고안된 랜드마크(landmark) 요소에 접근성 이름(accessible name)을 aria-label 속성으로 지정할 때에는 해당 랜드마크의 역할(Role)을 나타내는 단어를 접근성 이름에 포함하지 않는 것이 좋습니다.

왜냐하면, 스크린 리더 등과 같은 접근성 도구는 랜드마크의 접근성 이름과 역할을 함께 사용자에게 전달할 수 있으므로, 접근성 이름에 역할을 나타내는 단어가 포함되면 동일한 의미가 중복되어 전달될 수 있기 때문입니다.

예를 들어, 웹 페이지에 <nav> 태그나 role="navigation"이 있으면, 스크린 리더는 이를 시스템 내부적으로 "내비게이션 랜드마크 영역"으로 해석합니다. 사용자가 해당 구역에 진입하거나 랜드마크 이동 단축키(예: NVDA의 D 키 등)를 누르면, 스크린 리더는 단순히 텍스트만 읽지 않고 "내비게이션 영역" 또는 "랜드마크"라는 역할명(구조 정보)을 음성으로 덧붙여 전달할 수 있습니다.

다음과 같은 상황으로 살펴 보겠습니다.

HTML 
<nav> <!-- 스크린 리더 🔊 "내비게이션"으로 전달될 수 있음 -->
    ... 내비게이션 콘텐츠 ...
</nav>

<nav aria-label="메인 메뉴"> <!-- 스크린 리더 🔊 "메인 메뉴, 내비게이션"으로 전달될 수 있음 -->
    ... 내비게이션 콘텐츠 ...
</nav>

이런 매커니즘을 고려할 때, aria-label 속성으로 지정한 값에 랜드마크의 역할을 나타내는 단어가 포함되면 스크린 리더 등과 같은 보조 기술은 랜드마크의 레이블과 역할을 함께 전달할 수 있으므로, 레이블에 역할 이름을 포함하면 동일한 의미가 중복되어 전달될 수 있습니다.

다음과 같은 상황으로 살펴 보겠습니다.

HTML 
<nav aria-label="메인 메뉴 내비게이션"> <!-- 스크린 리더 🔊 "메인 메뉴 내비게이션, 내비게이션"으로 전달될 수 있음 -->
    ... 내비게이션 콘텐츠 ...
</nav>

위 예제처럼 랜드마크의 레이블을 "메인 메뉴 내비게이션"으로 지정하면 사용자에게 "메인 메뉴 내비게이션, 내비게이션"과 같이 의미가 중복되어 전달될 수 있으므로 랜드마크에 aria-label 속성으로 접근성 이름을 지정할 때에는 해당 랜드마크의 역할을 나타내는 단어를 포함하지 않고, 다른 랜드마크와 구분할 수 있는 적절한 이름을 지정하는 것이 좋습니다.

명세서

aria-label 속성의 명세서 사양
명세서 사양
aria-label Accessible Rich Internet Applications (WAI-ARIA)
#aria-label

참고문헌

같이 보기