aria-label을 사용한 웹 접근성 처리

최근 웹, 모바일 접근성 심사를 진행하면서 대체 텍스트에 대한 부분을 맡게 되었다.

여태까지는 웹 접근성만 했어서 title, alt로 처리했었는데, 모바일 접근성도 하게 되면서 WAI-ARIA를 사용했다.

그리고 Title 속성 사용을 지양해야 하는 이유라는 글을 보고 aria 태그를 적극적으로 활용해야겠다고 생각했다.

 

 

간단한 예시로 기록하려고 한다. (안하면 까먹을 것 같아서)

이미 전체적인 CSS가 너무 범용적으로 입혀져 있어서 기존 태그 변화 없이 진행해야 했음을 미리 밝힙니다...

 

사용 속성

role

role은 태그의 역할을 지정하는 속성이다. 

정해진 태그만 사용할 수 있음 ex) link, button, tab ... 

 

aria-label

aria-label 은 태그에 이름표를 붙이는 것과 같다. 사용자에게 전달해야 할 내용을 적으면 된다.

또한 내부 텍스트 컨텐츠를 읽지 않는다.

 

aria-hidden

true, false 두 가지 값을 지정할 수 있고, true일 시 스크린 리더가 읽지 않는다.

 

 

 

 

예제1 

<div onclick="openNotice();" style="cursor: pointer;">
    <h4>11월 5일 공지사항</h4>
    <p>오늘은 휴무입니다.</p>
</div>

위 코드는 div자체에 클릭 이벤트를 추가해 버튼처럼 사용하고 있다.

이 코드를 스크린 리더로 읽을 경우 "11월 5일 공지사항, 오늘은 휴무입니다."로 읽어준다.

실행 가능한 개체임을 알 수 있도록  --버튼 또는 --링크 등으로 제공해야 한다.

 

<div onclick="openNotice();" style="cursor: pointer;" role="link" aria-label="공지사항 상세 페이지">
    <h4 aria-hidden="true">11월 5일 공지사항</h4>
    <p aria-hidden="true">오늘은 휴무입니다.</p>
</div>

aria-hidden을 통해 스크린 리더가 h4, p태그를 읽지 못하게 하고,div 전체 영역을 링크로 인식하게 변경했다.

스크린 리더는 "공지사항 상세페이지 링크"라고 읽는다.

 

 

예제2

본인의 알림 개수를 보여주는 부분이 있었다.

기존 코드는 아래와 같다.

<div class="notifi">
	<a href="/myNews.do">0</a>
</div>

위 코드는 스크린 리더가 "0 링크"라고 읽는다.

의미 있는 이미지에 대해 대체 텍스트를 제공해야 한다. ex) 알림 0

 

<div class="notifi">
	<a href="/myNews.do" aria-label="알림 0">0</a>
</div>

aria-label로 내부 텍스트를 대체하면 스크린 리더는 "알림 0 링크" 라고 읽는다.

 

 

 

 

참고

WAI-ARIA: role과 aria-label 사용법
WAI-ARIA에 대한 고찰 : 1탄