웹 접근성 마크를 취득해야하거나 지침가이드를 따라야하는 프로젝트가 아닌이상 접근성 개선작업이나 관련된 제작 업무를 해본 경험이 없었다. 하지만 기본적으로 숙지해놓고 있어야하는 웹접근성에
대해 무지할수없어 정리를 해보았다.
아직도 알아야 할 내용들이 많지만 , 오늘은 WAI-ARIA 에 대해 알아보도록 하겠다.
WAI-ARIA
Web Accessibility Initiative – Accessible Rich Internet Applications
WAI는 W3C에서 웹 접근성을 담당하는 기관으로
ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미한다.
( RIA : 정적인 HTML, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션 )
WAI-ARIA를 사용해야하는 이유
RIA(Rich Internet Applications)는 화려하고 편리한 웹 애플리케이션이지만 스크린리더와 같은 보조기술을 사용하는 장애인들이 접근하기에 취약한 부분이다.
스크린리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상 시키기 위한 목적으로 나왔으며,
웹애플리케이션 역할(Role), 속성(Property) 정보를 추가하여 개선 할 수 있도록 제공하고 있다.
WAI-ARIA 를 이용해서 개발자가 의도한 유저 인터페이스 행동이나 구조적인 정보를
스크린 리더와 같은 보조 기술에 전달하여 시각/인지 장애인들에게 일반 사용자들과 동일한 정보를 제공하여 웹페이지 탐색을 돕는 UX를 제공한다.
WAI-ARIA 사용 방법
- HTML5 Section 요소와 중복하여 사용하지 않는다.
: HTML5 에서 추가된 시멘틱 태그를 먼저 사용하고 의미를 부가적으로 주어야 할 때 role을 추가한다.
<!-- X -->
<h1 role="button">바로가기</h1>
<!-- △ -->
<h1><span role="button">바로가기</span></h1>
<!-- ○ -->
<h1><button>바로가기</button></h1>
- 만약
<button>,<input>요소들처럼 키보드 지원이 되는 요소를<div>와 WAI-ARIA로 작업해야 한다면, 동일하게 작업할 것
<!-- html5 -->
<button>버튼<button>
<!-- div + WAI-ARIA -->
<div role="button" tabindex="0">버튼</div>- 사용자의 브라우저와 디바이스가 WAI-ARIA를 지원하는 지 확인할 것
: WAI-ARIA는 우리가 사용하는 크롬, 인터넷 익스플로러, 사파리 등의 최신 버전 브라우저들은 대체로 지원을 합니다. 아래의 이미지는 Can I Use에서 확인할 수 있다.
WAI-ARIA 지원 브라우저 현황 (출처 : https://caniuse.com/?search=wai-aria)
WAI-ARIA 구조
WAI-ARIA를 구성하는 역할, 속성, 상태 기능은 HTML 요소에 보충하여 사용되는데,
여기서 role에 대해 알아보겠다.
- 역할(Role) 컴포넌트나 요소 내의 역할을 정의
대체로 이미지나 텍스트를 봤을때 이곳을 누르면 탭이라는 것을 인지할 것이다.
탭버튼을 작업할때는 주로 <ul> ,<li> ,<a> 태그들로 탭을 구성하는데,
WAI-ARIA role="tabList", role="tab", role="tabpanel"로 스크린 리더기 사용자에게 더 정확한 정보를 제공할 수 있다.
<!-- 일반적인 작업 -->
<ul class="btnList">
<li>
<a href="#" class="on">정보1</a>
</li>
<li>
<a href="#">정보2</a>
</li>
<li>
<a href="#">정보3</a>
</li>
</ul>
<div class="wrap-tab-contents">
<div id="tabpanel01" class="tab-contents on"><p>정보1 콘텐츠</p></div>
<div id="tabpanel02" class="tab-contents"><p>정보2 콘텐츠</p></div>
<div id="tabpanel03" class="tab-contents"><p>정보3 콘텐츠</p></div>
</div>
<!-- WAI-ARIA 적용 -->
<ul class="btnList" role="tabList">
<li>
<a href="#" id="tab01" class="on" role="tab" aria-selected="true" aria-controls="tabpanel01">정보1</a>
</li>
<li>
<a href="#" id="tab02" role="tab" aria-selected="false" aria-controls="tabpanel02">정보2</a>
</li>
<li>
<a href="#" id="tab03" role="tab" aria-selected="false" aria-controls="tabpanel03">정보3</a>
</li>
</ul>
<div class="wrap-tab-contents">
<div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab01" tabindex="0">
<p>정보1 콘텐츠</p>
</div>
<div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab02" tabindex="0" hidden="true">
<p>정보2콘텐츠</p>
</div>
<div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab03" tabindex="0" hidden="true">
<p>정보3 콘텐츠</p>
</div>
</div>위 코드를 NVDA(NonVisual Desktop Access)라는 스크린 리더기 프로그램으로 들어보면 의미가 다르게 전달되는 것을 알 수 있는데,
결과
탭 메뉴 WAI-ARIA 적용 전
- 불릿 [링크] 정보1
- 불릿 [링크] 정보2
- 불릿 [링크] 정보3
페이지를 이동하는 링크 태그로, 의미만을 정보정달해준다.
탭 메뉴 WAI-ARIA 적용 후
- 불릿 [탭] 정보1
- 불릿 [탭] 정보2
- 불릿 [탭] 정보3
버튼의 역할이 탭이라고 명시해주고 선택된 요소 정보도 함께 전달해줄 수 있다.
- 속성(Property) 컴포넌트의 특징이나 상황을 정의
시각 정보를 이용할 수 없는 사용자는 만약 검색이라는 안내 텍스트 없이 버튼을 나타낼 때 어떤 버튼인지 알 수가 없다.
- 폼요소의 필수 요소와 관련된 aria-required
- 텍스트 레이블 없이 이미지로 표현될 때 정보를 부여하여 설명해주는 aria-label
- 업데이트된 정보의 상황 aria-live
예를 들어 '검색' 이라는 아이콘을 안내 텍스트 없이 나타낸다면, 시각 정보를 이용할 수 없는 사용자는 어떤 버튼인지 알 수 없다.
대체텍스트를 이용할 수 있지만, aria-label을 이용하여 버튼 요서에 검색이라느 설명을 추가 할 수 있다.
<button class="btn_search"></button>
<!-- 숨김 텍스트 이용 -->
<button class="btn_search">
<span class="hidden">검색</span>
</button>
<!-- WAI-ARIA 적용 -->
<button class="btn_search" aria-label="검색"></button>- 상태(State) 컴포넌트의 상태 정보를 정의
- 메뉴의 활성 여부를 알려주는
aria-expanded,aria-selected - 폼 요소 유효성 검증과 관련 있는
aria-invalid
텍스트를 노출함으로 사용성을 높여줄 수 있다. - 상태가 변화 될때 확장됨/축소됨/눌림/눌리지않음 의 상태값을 음성으로 알려주며
aria-invalid 상태에 따라 에러 텍스트를 노출시킴으로 사용성을 높여줄 수 있다.
<ul class="btnList">
<li>
<button id="accordion01" aria-controls="accordion-region01"
aria-expanded="true" >munju_dev</button>
<div id="accordion-region01" role="region" aria-labelledby="accordion01">munju_dev</div>
</li>
<li>
<button id="accordion02" aria-controls="accordion-region02">
UX Engineer</button>
<div id="accordion-region02" role="region" aria-labelledby="accordion02">UX Engineer</div>
</li>
</ul>
<style>
li {
background-image: url(arrow_down.png);
}
li button[aria-expanded='true'] {
background-image: url(arrow_up.png);
}
</style>
웹접근성을 준수해서 코드를 작성하기 위해서는 앞으로 더 많이 웹접근성 지침 가이드나 규칙을
알아야겠다고 느꼈다.
추후에 계속 학습된 내용을 포스팅하도록 하겠다.
참고한곳
https://www.biew.co.kr/entry/WAI-ARIA-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1,
https://y00eunji.tistory.com/entry/HTML-WAI-ARIA-aria-hidden#article-1--%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0,
https://story.pxd.co.kr/1588,
https://nuli.navercorp.com/community/article/1132879,
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
이미지출처: https://story.pxd.co.kr/1588
