aria-label 속성은 현재 요소에 레이블을 정의하기 위해서 사용합니다. 텍스트 레이블이 화면에 표시되지 않을 때에 사용하세요. 만약에 요소에 레이블을 정의하는 화면에 보이는 텍스트가 있다면 aria-labelledby을 대신 사용하세요.
이 속성으 일반적인 HTML 요소와 함께 사용할 수 있습니다. ARIA role이 적용된 요소에만 한정되지 않습니다.
value: 문자열
예시
다수의 레이블
아래의 예제에서 버튼은 ❌가 가운데 있는 전형적인 "닫기" 버튼처럼 스타일됩니다. 버튼의 목적이 대화상자를 닫는 것임을 암시하는 것이 없으므로 보조기기에 레이블을 제공하기 위해 aria-label을 사용합니다.
<button type="button" aria-label="Close" onclick="myDialog.close()">❌</button>추가 설명
aria-label의 목적은 aria-labelledby의 목적과 동일합니다.
사용자에게 개체의 인식 가능한 이름은 제공합니다.
label에 대한 가장 일반적인 접근성 API 매핑은 액세스 가능한 이름 속성입니다.
label text가 화면에 표시되는 경우: aria-labelledby을 사용
label text가 화면에 표시되지 않는 경우: aria-label을 사용
요소의 이름을 요소의 콘텐츠에서 프로그래밍 방식으로 결정할 수 없는 경우가 있을 수 있으며, 표시되는 label을 제공하는 것이 원하는 사용자 경험이 아닌 경우가 있습니다.
대부분의 host languages는 요소의 이름을 지정하는 데 사용할 수 있는 속성(ex. the title attribute in HTML)을 제공하지만 브라우저 도구 설명아 바람직하지 않은 경우 작성자는 aria-label을 사용하여 요소의 액세스 가능한 이름을 설정할 수 있습니다.
text alternative computation에서 요구하는 대로 user agents는 액세스 가능한 이름 속성을 계산할 때 aria-label보다 aria-labelledby에 우선 순위를 부여합니다.
참고 사이트:
