[번역] ARIA aria-label 속성

aria-label은 화면에 텍스트가 표시되지 않는 요소에 대한 텍스트 대안을 제공하는데 사용해야 합니다.

 

정의

aria-label은 WAI-ARIA 사양에 정의된 속성입니다. 이 사양은 기본 HTML을 확장하여 HTML 요소가 접근성 트리로 "번역"되는 방식을 변경할 수 있도록 합니다.

기본적으로 HTML 요소는 텍스트 콘텐츠를 접근성 레이블로 사용합니다. 요소에 aria-label이 있는 경우 접근성 이름은 속성에 전달된 문자열이 됩니다.

<button>보내기</button>
// 접근 가능한 이름 : 보내기

<button aria-label="이메일 보내기">보내기</button>
// 접근 가능한 이름 : 이메일 보내기

 

사용법

HTML 요소에 aria-label을 추가하여 사용할 수 있습니다.

<button aria-label="메뉴" class="burger"></button>

보이스오버는 이 버튼을 "메뉴 버튼"으로 읽습니다.

 

aria-label과 함께 사용할 수 있는 요소

• 인터렉티브 요소
  • a (href 속성이 있는 경우)
  • audio 및 video (controls 속성이 있는 경우)
  • input, select, button, textarea 와 같은 요소
• 암시적 랜드마크 요소
  • header, footer, nav, main, aside, section, form 등
• 명시적 랜드마크 요소
  • role="navigation" 인 요소 등
• 위젯 역할 요소
  •  role="dialog" 또는 role="tooltip" 이 있는 요소 (ARIA 1.1에는 27개의 위젯 역할이 있음)
• iframe 및 img 요소

 

사용 시점

요소의 용도를 텍스트로 표시하지 않고도 스크린 리더와 같은 보조 기술을 사용하는 사용자를 위해 대체 텍스트를 제공해야 하는 경우에 이 기능을 사용해야 합니다.

 

라벨링 모범 사례

스크린 리더가 이미 요소의 역할을 알려주므로 레이블에 "버튼"을 추가할 필요가 없습니다.

// 비추천 : "보내기 버튼, 버튼"
<button aria-label="보내기 버튼">...</button>

// 추천 : "보내기 버튼"
<button aria-label="보내기">...</button>

 

아이콘 버튼

<button aria-label="닫기">
  <svg
    focusable="false"
    aria-hidden="true"
    viewBox="0 0 24 24"
  >
    <path
      d="M19 6.41L17.59 5 12 10.59 6.41 5 5
         6.41 10.59 12 5 17.59 6.41 19 12
         13.41 17.59 19 19 17.59 13.41 12z" />
  </svg>
</button>

 

레이블 없는 input

<input
  type="text"
  name="name"
  placeholder="What's your name?"
  aria-label="Your name" />

 

다중 네비게이션

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

 

region 랜드마크 구분하기

<section aria-label="projects"> 
  ...
</section>
<section aria-label="team"> 
  ...
</section>

 

비교

aria-label vs. aria-labelledby

레이블 텍스트가 화면에 표시되는 경우 aria-label 대신 aria-labelledby 를 사용해야 합니다.

// 비추천 : 화면에 텍스트가 보일 때
// aria-label을 사용한다.
<nav aria-label="관련 콘텐츠">
  <h2>관련 콘텐츠</h2>
  <ul>
    ... 
  </ul>
</nav>



// 추천 : 화면에 텍스트가 보일 때 
// aria-labelledby 를 사용한다.
<nav aria-labelledby="nav-title">
  <h2 id="nav-title">관련 콘텐츠</h2>
  <ul>
   	...
  </ul>
</nav>

 

참고
요소에 aria-labelledby와 aria-label이 모두 있을 경우 대체되는 텍스트로 aria-labelledby 속성의 값이 사용됩니다.

 

aria-label vs. title

title 속성은 마우스가 요소 위로 이동하면 툴팁으로 표시됩니다. 마우스를 사용하는 사용자에게는 유용할 수 있지만 키보드만 사용하는 사용자에게는 제공되지 않습니다. title 속성은 텍스트 대체 계산 알고리즘에 나열되어 있지만 일부 스크린 리더/브라우저 조합 (작성 당시에는  IE11 및 NVDA)에서는 지원되지 않을 수 있습니다.

간단히 말하자면, 추가 정보를 제공하기 위해 title 속성을 사용해야 하는 경우 aria-label 을 사용하거나 다른 대안 (예 : 툴팁과 같은 사용자에게 추가 정보 공개)을 고려하는 것이 더 나을 수 있습니다.

 

일반적인 실수

과도한 사용

요소에 텍스트 콘텐츠가 있는 경우 중복되므로 aria-label을 추가할 필요가 없습니다.

// 비추천 : aria-label 과도한 사용
<button aria-label="보내기">보내기</button>

// 추천 : 필요할 때만 사용
<button>보내기</button>

 

Src. - https://www.aditus.io/aria/aria-label/