HTML - WAI-ARIA

#WAI-ARIA에 대한 내용이 꽤나 방대한 편이라서 이번에는 최대한 간략하게 핵심적인 부분만 설명할 것이며. 추후 각각의 기능들과 속성 및 사용법 등을 자세히 다룰 것입니다.

---

WAI-ARIA(Web Accessibility Initiative - Accessibility Rich Internet Applications)

 스크린리더 및 보조기기 등을 사용하는 장애인이 좀 더 Web Application을 편리하게 사용할 수 있도록 만들어졌으며, 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선시킬 할 수 있도록 되어있다.

 이러한 정보들은 Web Browser에 의해 자동으로 해석되어 각각의 운영체제(OS)의 접근성 API로 변환되어서 스크린리더와 같은 보조기기들이 이를 통해 Desktop Application과 동일한 방법으로 JavaScript control을 인식하고 상호작용을 할 수 있게 된다. 

 이러한 방식은 스크린리더 등의 보조기기를 사용하는 사용자들이 Web Application을 사용할 때, Desktop Application의 동작과 유사하게 인식하여 작동하기 때문에 좀 더 향상된 UX를 제공하게 된다. 

 

(* 출처: WAI-ARIA 사례집(온라인판).pdf )

wai-aria에 대해 좀 더 알아보자.

 

 앞서 설명했던 것처럼 wai-aria에는 역할(Role), 속성(Property), 상태(State) 이 3가지의 기능을 제공한다.

• Role : UI에 포함된 특정 element의 기능을 정의하는 것.
• Property : 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 'aria-*'라는 접두사를 사용한다.
• State : 해당 컴퓨넌트의 상태 정보를 정의한다.

1. Role

 #설명

  특정 element의 기능을 정의하는 것으로 페이지의 검색 영역인지, 내비게이션 요소인지, 특정 section의 제목(heading) 인지 등의 명확한 기능을 부여할 수 있다.

 

 #예시

 # role의 종류

• Document Structure Role (문서구조 역할)
• Abstract Role (추상 역할)
• Landmark Role (랜드마크 역할)
• Widget Role (위젯 역할)

2. Property

 # 설명

 element가 기본적으로 갖고있는 특징이나 상황을 의미한다.

 폼(form)의 입력 상자가 읽기 전용(Read Only)인지, 필수 항목(Require)인지, 사용자 입력에 대해 자동완성 (Auto Complete) 기능을 지원할 것인지, 드레스(Drag)가 가능한지, 팝업(has Popup)이 뜨는지, 업데이트된 정보(Live)가 있는지 등의 상황을 사용자가 인지할 수 있도록 한다. 

 # 예시

  회원가입시 사용자 id와 pw를 입력받아야 하는데 이들은 필수 항목이다. 따라서 스크린리더 등의 보조기기들이 이를 "필수항목"으로 인식하도록 하기 위해서는 다음과 같이 작성할 수 있다.

<input type="button" id="user-id" aria-required="true">

 

3. State

 # 설명

 element의 현재 상태를 의미하며 상황의 변화에 따른 값을 가진다. 다음과 같은 속성들이 있다.

 # 예시

  앱에서 제공되는 메뉴가 하위 메뉴를 포함하고 있는 경우, 하위 메뉴가 접힌상태인지, 펼쳐진 상태인지 스크린리더 등의 보조기기 사용자들에게 이러한 정보를 제공할 필요가 있는데, 이는 다음과 같이 코드를 작성할 수 있다.

<li id="menu" role="treeitem" aria-expended="true"> [메뉴가 열린상태]
     <a> wai-area </a>
      <ul id="submenu" role="group">
            <li id="menu" role="treeitem" area-expended="false"> [메뉴가 접힌상태]
      </ul>
</li>

 # 주의사항

 aria-hidden의 경우, 시각적으로만 숨겨지는 것이 아니라, 의미적으로도 숨겨지기 때문에, 사용자에게 시각적으로만 보이지 않게 할 경우에는 이것을 사용해서는 안된다. 

---

Screen Reader

 시각장애인이 컴퓨터를 사용할 때 화면에 나타나는 정보를 음성으로 출력해주는 화면낭독 프로그램이다. 윈도나, 핸드폰에서 스크린리더 기능을 사용하면 장애인들을 위해 현재 자신이 핸드폰이나 컴퓨터 화면에서 실행하고 있는 것들을 음성으로 읽어주는 기능을 하는데 그것을 말함.

(* 참고 :  http://www.haeppa.kr/4 )

 

 

위의 내용은  [WAI-ARIA 사례집]을 참고로 하였습니다.

전체 내용이 궁금하신 분들은 https://www.wah.or.kr:444/board/boardView.asp?brd_sn=5&brd_idx=1019  이곳을 방문하시면 됩니다.