•
다른 요소를 Accessible name으로 사용하게 해주는 attribute.
•
해당 요소를 활용하여 이름을 참조할 요소가 존재하지 않을 경우 aria-label을 이용하여 참조해야한다.
•
HTML label element를 사용할 수 있을 경우 label element를 사용한다.(for와 함께) → label의 다른 기능들을 제공하지 않고 accessible name만 제공하기 때문이다.
<h2 id="attr" class="article-title">13 ARIA attributes you need to know</h2>
<p>
There are over 50 ARIA states and properties, but 13 of them stand out…
<a href="13.html" id="rm13" aria-labelledby="rm13 attr">read more</a>
</p>
HTML
복사
•
스페이스를 이용해 여러 id를 참조할 수 있다. → 자기 자신도 참조할 수 있으므로 위의 HTML “read more 13 ARIA attributes you need to know” 로 번역될 수 있다.
◦
순서 또한 중요하다. 순서가 바뀔 경우 accessible name의 순서또한 바뀐다.
•
자동으로 반복된 id를 제거한다.
•
input에 id를 labelledby로 엮을 경우 input의 value를 문자열화 하여 accessible name을 만든다.
•
html hidden attribute, CSS display: none, visibility: hidden처리된 element도 참조 할 수 있다.
다중 attribute 존재 시 우선순위
<button aria-label="Blue" aria-labelledby="color">Red</button><span id="color">Yellow</span>
HTML
복사
•
Red 버튼은 Yellow란 accessible name을 가진다.
•
aria-label과 aria-labelledby가 둘 다 존재할 경우 aria-labelledby가 우선된다. → aria-labelledby는 항상 최우선 요소로 처리됨(태그 내부 텍스트, aria-label 모두 무시하고 labelledby가 선택된다.)
aria-describedby와의 차이점
•
labelledby → accessible name 제공을 위함
•
describedby → 좀더 긴 내용, 설명을 연결할 때 사용함