Kally

로그인

aria-label & aria-labelledby 치트시트

작성자: Joseph

작성 날짜: 2025. 2. 17. 오전 12:40:56

수정 날짜: 2025. 6. 12. 오전 6:12:48

aria-label이란?

aria-label은 WAI-ARIA에서 제공하는 사용자가 접근 가능한 이름(accessible name)을 제공하는 속성입니다.

웹 표준을 공부해보셨다면 <img>의 alt속성, <input>이나 <textarea>의 id를 <label for="IDREF">에 연결하여 접근 가능한 이름을 제공한다는 것은 알 것입니다.

aria-label 사용 방법

ARIA 기술을 사용하기 전에

WAI-ARIA 기술을 사용할 때는 특히 다른 웹표준 지침보다도 명세를 엄격하게 적용해야 합니다. 사용 할 때는 반드시 WAI-ARIA의 명세를 확인하여야 합니다.

WAi-ARIA를 통해 얻을 수 있는 이점만큼, WAI-ARIA를 잘못 사용했을 때의 위험성 리스크 또한 매우 높으므로,

WAI-ARIA 기술의 접근성 자유도에는 그만한 리스크가 있음을 항상 유의해야 합니다.

aria-label은 주로 스크린 리더나 스위치 제어, 음성 제어 등, 보조기술에서 인식할 수 있는 이름을 상호 작용이 가능한 컨트롤 이나 목록 또는 랜드마크에 제공합니다.

예를 들어, 버튼에 종 모양 아이콘 배경만 있고, 텍스트가 없다면 시각적으로 보기에는 알림 버튼인 것을 알 수 있지만, 실제로 보조기술에서는 인식할 수 있는 정보가 없는 경우, 이럴 때 사용자와 보조기술이 이해할 수 있도록, 보이지 않는 버튼의 이름을 aria-label 속성을 통해 지을 수 있습니다.

aria-label 속성값에 원하는 텍스트를 작성하여 원하는 정보를 보조기술에 전달하여 사용자가 버튼의 용도를 충분히 이해하게끔 할 수 있습니다. 위 예시를 예로 들어보자면 <button aria-label="알림">과 같이 사용할 수 있습니다.

aria-label 은 매우 다양한 용도로 사용할 수 있습니다. 다음과 같이 정리할 수 있습니다.

aria-label의 주요 사용 상황

  1. 대체텍스트가 없이 아이콘만 제공되는 컨트롤에 기능을 설명하는 텍스트를 제공해야 할 때

  2. 한 컨트롤 안에 복잡한 데이터가 있을 때, 데이터를 재가공하여 이해하기 쉽게 만들어야 할 때

  3. 여러 개의 목록이나 영역이 있을 때, 사용자가 영역을 구분하게끔 영역 이름을 넣어야 할 때

aria-label 사용 시 특성 및 주의사항

aria-label는 다음과 같은 특성이 있습니다.

  1. 보조기술만을 위한 레이블: 눈에 보이지 않는 레이블이며, 기존 레이블이 있다면 덮어씌웁니다.
  2. 특정 요소를 눌렀을 때, aria-label이 변경되면 변경된 정보를 읽습니다. (특정 스크린 리더에 따라서는 읽지 못할 수 있음)
  3. 한 페이지에 여러개를 둘 수 있는 목록이나 시멘틱 렌드마크 태그 등에 사용하면 랜드마크 유형과 함께 제목을 제공할 수 있습니다.

위와 관련하여 aria-label을 사용 할 때는 몇가지 주의사항이 있습니다.

  1. aria-label은 추가 정보를 주는 속성이 아닙니다.

    말 그대로 컨트롤의 이름을 주는 속성입니다. 위에 특성에서 언급한 것 처럼 기존 요소의 콘텐츠 정보를 덮어씌웁니다:

    아래 예시 코드를 예로 들어보겠습니다.

    <button aria-label="알림을 엽니다.">알림</button>

    개발자는 스크린 리더에서 "알림, 알림을 엽니다, 버튼"라고 읽을 것이라고 예상했고, 아래 콘텐츠를 만들었습니다. WAI-ARIA를 잘 모른다면, 무엇이 문제인지 알 수 없습니다.

    위에서 설명했듯, aria-label은 기존 레이블 정보를 완전히 덮어씌웁니다. 이쯤되면 스크린리더에서 뭐라고 읽을지 예상되어야 합니다.

    스크린 리더에서는 "알림을 엽니다, 버튼"이라고만 읽게 됩니다. 안에 있는 콘텐츠를 싹 무시하고, 덮어씌우니까요. 이 점은 aria-label와 aria-labelledby 속성을 사용하기에 앞서 가장 먼저 알고 있어야 하는 특징임을 기억합시다.

  2. aria-label은 만능이 아닙니다.

    속성을 사용할 수 있는 명세 상의 유형 정보, 태그를 보지 않고, 사용할 수 없는 요소에 aria-label을 사용하는 사례가 빈번합니다.

    aria-label의 주요 사용 요소

    1. 컨트롤 요소 또는 유형:

      표준 태그: <button>, <input>, <textarea>, <a> 등

      role 속성: role="button" role="switch" role="radio" role="checkbox" 등

    2. 랜드마크 요소 또는 유형:

      표준 태그: <ul>, 또는 <ol> 또는 <dl>과 같은 목록 태그, <nav>, <section>, <article> 또는 <aside>와 같이 한 문서에 여러 개를 사용할 수 있는 랜드마크 등.

    최악의 사례:

    • role="none"이나, <div> <span> 등에 aria-label을 사용한 사례

      • 기본적으로 웹표준을 잘 준수하는 스크린 리더(예: JAWS, NVDA)는 <div>나 <span> 등에 aria-label를 제공하여도 아무런 동작을 하지 않습니다. 그러나, 국산 스크린 리더인 Sense Reader와 같이, 스크린 리더에 따라서는 이런 예상 밖의 상황에서 예외 처리를 하지 않아 버그가 발생하곤 합니다.

    • 처음 예시와 같이, 실제 내용과 다른 aria-label을 적용한 사례가 있습니다. aria-label은 컨트롤 내부에 담긴 눈에 보이는 내용이 반드시 포함되어야 합니다.

    • aria-label에 빈 값을 제공한 사례가 있습니다. alt와 달리 aria-label을 빈 값으로 주는 것은 금지되어 있습니다.

    이 외에도, W3C에서 정한 WAI-ARIA 1.3 명세에서 허용하는 요소에서만 사용이 가능합니다. 이외에, 사용이 금지된 요소에서는 사용해서는 안 됩니다.

aria-labelledby는 또 뭐예요?

aria-labelledby는 aria-label로부터 파생된 속성입니다. 기본적인 특성은 aria-label과 같습니다.

다만, 사용 방법과 사용해야 하는 상황이 조금 다를 수 있습니다. aria-labelledby는 레이블을 텍스트로 직접 작성하는 대신, 기존에 있던 요소의 id 속성을 참조하여, 해당 요소의 내용을 aria-labelleby가 적용된 요소 레이블로 적용합니다.

다음과 같이 사용합니다.

<button aria-labelledby="btnPlayPause" id="btnPlayPause"><div class="visually-hidden"><i class="fa-solid fa-play"></button>

위의 마크업은 조금 특이한 케이스입니다. 자기 자신을 aria-labelledby로 참조하고 있습니다.

aria-labelledby에는 아래처럼 여러개의 아이디값을 띄어쓰기로 구분하여 전달할 수 있습니다.

aria-labelledby="IDREF1 IDREF2 IDREF3"

위와같이 여러 개의 레이블을 전달한다면 aria-labelledby에 연걸된 여러개의 아이디 요소의 순서에 맞게 레이블이 구성됩니다.

aria-labelledby는 <label for="IDREF">처럼 따로 떨어진 요소를 대상으로 지정할 수 있는건 당연하고, 자기 자신을 참조하여 레이블을 지정할 수도 있습니다.

위 마크업은 특히, 버튼 텍스트를 스크립트로 변경하는 경우 유용한 사용 패턴입니다.

누를 때마다 class="visually-hidden"의 값이 "재생"과 "일시 정지"로 토글된다고 상상해보세요. aria-label의 특성 덕에, 스크린 리더에서는 눌러서 텍스트가 변경될 때 마다, 변경된 텍스트를 읽게 될 겁니다.

하지만, 위 패턴은 유용한 패턴인 동시에, 호환성 이슈가 있습니다. Android의 내장 스크린 리더인 TalkBack에서는 aria-label이 변경되어도 내용을 읽지 않는 문제가 있습니다. 가급적, 위와 같은 컴포넌트(재생 정지 버튼과 같은 전환 버튼)에서는 레이블을 변경하는 것 보다는 TalkBack의 호환성을 위해 aria-pressed="true|false"를 사용하시는 것을 권장합니다.

알려진 버그나 특이사항

  • Sense Reader에서 aria-label을 div 태그나 span 태그 등에 사용하면, 원레 동작과 다르게 동작합니다. div에 aria-label을 줬을 때 해당 레이블을 읽어서는 안되지만 Sense Reader는 읽습니다.

    TalkBack에서도 aria-label에 유사한 버그가 있습니다.

  • aria-label의 변경도 aria-live에서 감지합니다. 하지만, 이는 호환성 이슈가 있기 때문에 추천하는 방법이 아닙니다. 특정 스크린 리더에서는 aria-live영역 내 요소에 aria-label이 변경되어도 인식하지 못할 수 있습니다.