시각 장애인을 위한 웹 개발 (aria-label)

 

시각 장애인의 웹 페이지 보기

프론트엔드 웹 개발을 하면서 시각 장애인은 웹 페이지를 스크린 리더(예를 들어, Google의 텍스트 음성 변환 엔진)를 통해 컨텐츠의 의미를 파악할 수 있다는 것을 알았다.

 

예를 들어, 아래와 같이 pagination이 존재한다.

 

우리는 어떤 페이지에 저런 pagination을 보면 의미를 바로 알 수 가 있다. 

 

하지만 시각 장애인이 pagination을 통해 다른 페이지로 가고 싶다면?

 

스크린 리더를 통해 저 pagination을 읽으면 가령, "Go to page 1" 또는 "Go to next page"라고 스크린 리더가 음성을 낸다.

 

어떻게 하면 스크린 리더가 저 내용을 읽을 수 있도록 프론트엔드 개발자가 웹을 개발할 수 있을까?

 

 

aria-label="시각 장애인을 위한 메시지"

<a href="#" aria-label="Go to previous page">Previous</a>

<a href="#" aria-label="Current Page. Go to page 1">1</a>

 

첫번재 <a>를 보면 평범한 앵커 태그이지만, aria-label이라는 속성이 보인다.

 

이것이 바로 스크린 리더가 읽을 메시지.

 

우리 눈에는 Previous라는 글이 보이지만, 시각 장애인의 귀에는 "Go to previous page"라고 들린다.

 

개인적으로, 장애인을 위한 대체 도구라고 생각하니 마음이 가고 훗날 웹 개발 시 반드시 필요하다고 생각한다.

 

 

WAI-ARIA ? 

WAI-ARIA의 정의를 위키피디아에서 찾아보자.

WAI-ARIA는 Web Accessibility initiative - Accessible Rich Internet Application의 약자로 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, JS 및 관련 기술로 개발된 사용자 인터페이스 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술사양입니다. 출처: 위키피디아

 

그렇다고 한다. 

 

사용 방법과 자세한 정보들은 아래 URL에서 더 볼 수 있다.

 

www.w3.org/WAI/standards-guidelines/aria/

WAI-ARIA Overview