[웹 접근성 모음집] aria-* 모음집

포스트 목적

aria-* 와 관련된 다양한 자료나 주요 정보를 수집하는 목적으로 작성되었습니다. 매번 갱신 시 마다 최신 날짜로 업로드 되도록 함을 규칙으로 합니다.

 

해당 포스트는 추가되는 내용의 날짜 기준으로 업로드 일이 갱신됩니다.

 

aria-label | 특정 요소에 레이블을 제공

<button aria-label="메뉴 열기">Open Menu</button>

 

aria-labelledby | 다른 요소의 id 속성를 참조하여 해당 요소에 레이블을 제공

해당 속성은 예시와 같이 id 를 참고할 대상이 있는 경우에만 사용하며, 없는 경우는 aria-label 속성을 활용해야 합니다. 만일 aria-label 속성과 해당 속성이 동시에 적용된다면, 해당 속성만 적용됩니다.

<h1 id="section-title">섹션 제목</h1>
<section aria-labelledby="section-title">
    <!-- 섹션 내용 -->
</section>

aria-describedby | 다른 요소의 Id를 참조하여 해당 요소에 설명을 제공

이 속성 또한 참조할 태그가 있는 경우에만 사용합니다. 이 필드에 유효한 이메일 주소를 입력하세요. 가 보이시나요? 시각 장애를 가진 사람은 해당 텍스트를 읽지 못하기 때문에, 스크린 리더기는 해당 속성과 연결된 id 를 참조하여 해당 텍스트를 대신 읽어줍니다. 

<input type="text" aria-describedby="input-description">
<div id="input-description">이 필드에 유효한 이메일 주소를 입력하세요.</div>

 

 

aria-hidden | 요소를 스크린 리더 및 보조 기술에서 숨김

해당 속성이 true 가 되어 있으면 스크린 리더기는 해당 태그의 role 등을 읽지 않고 넘어 갑니다. 

<div aria-hidden="true">이 내용은 스크린 리더에 표시되지 않습니다.</div>

display none 이 아닌 visiablity 나 opacity 등으로 숨겨진 요소의 경우 aria-hidden 을 활성화 해야 스크린 리더기가 혼동을 하지 않습니다.

aria-live | 동적으로 변경되는 콘텐츠를 실시간으로 스크린 리더에 알려줌

여기서 동적으로 변경되는 콘텐츠는 실시간 채팅 서비스나 메시지 알림 등이 있습니다. 해당 속성을 지정하면, 새로운 게시글이 추가될 때 스크린 리더기는 해당 게시글이 추가 된 것을 인지하고 실시간으로 알려줍니다.

<div aria-live="polite" id="live-region"></div>