[HTML] 웹접근성, WAI-ARIA 에 대하여(1)

 

01  웹접근성이란

---

웹접근성(정보통신접근성)
WAI-ARIA

 

Web Accessibility Initiative – Accessible Rich Internet Applications

장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것

 

모든 사용자가  웹 사이트 또는 애플리케이션에서 제공하는 모든 정보에 동등하게 접근하고 이용 할 수 있도록 보장하기 위한 가이드라인이다. 장애인 뿐 아니라 노령자, 아동, 문맹 등 말 그대로 모든 이용자가 웹을 편리하게 이용할 수 있게끔 하며, 어떤 브라우저에서도 동일한 정보를 제공하고, 스크린리더 등 어떤 보조 기기에서도 이용 가능한 웹 사이트를 제공해야 한다.

 

WAI-ARIA는 마크업에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 동적 콘텐츠 영역(ajax, react, javascript 등)에서도 스크린 리더 및 보조 기기 등에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험(User Experience)을 제공하기 위한 목적을 가지고 있다. 또한 HTML만으로 표현할 수 없는 의미들을 태그에 부여해 HTML에서 적절한 정보를 전달받아 사용자가 원활하게 웹사이트를 이용할 수 있게 도움을 준다.

 

WAI-ARIA는 접근성 API를 통해 데스크탑 애플리케이션과 동일한 방법으로 자바스크립트 컨트롤을 인식하고 상호 작용해 스크린리더 및 보조기기 사용자가 웹 애플리케이션 사용 시 데스크탑 애플리케이션의 동작과 유사하게 인식하고 동작해 보다 향상된 사용자 경험을 제공한다. 출처 : AOA11Y

 

 

한국에서는 2009년 4월 11일부터 장애인 차별 금지 및 권리 구제 등에 관한 법률이 시행되었으며, 주요 민간기관의 웹 접근성 준수가 의무화되었으며, 단계적으로 2015년까지 모든 웹 사이트가 웹접근성을 준수해야 한다.  웹접근성 준수 의무를 지키지 않아 이의제기가 발생 시, 악의적으로 권고를 무시하고 준수하지 않을 시 3년 이하의 징역 또는 3천만원 이하의 벌금을 선고받을 수 있다.

 

 

02  웹접근성 준수의 이점 및 기대 효과

---

• 「장애인차별금지 및 권리구제 등에 관한 법률」및 동법 시행령 등 관련 규정을 준수할 수 있다.
• 웹접근성을 갖춘 사이트는 검색엔진이 색인하는 데 도움이 되어 많은 사용자의 접근을 가능하게 한다.
• 모든 사용자를 고려해 만들어져 정보 소외 계층이 정보를 얻기 쉬워지고, 잠재적인 계층을 사용자 계층으로 끌어낼 수 있다.
• 이용이 어려운 공간이나 공공장소에서의 접근 용이성과 다양한 OS, 기기와의 호환성이 담보된다.
• 웹사이트 기획 및 제작 단게에서부터 웹접근성을 고려해 제작 시 제작 단계에서부터 다양한 환경을 고려하여 진행하게 되므로 제작 및 운용의 효율성을 높일 수 있다.
• 장기적으로 사이트의 유지 보수 시간이 줄어들며, 고급 웹 기술 및 미래 기술에 대해 준비할 수 있도록 도와준다.

 

03  웹콘텐츠 접근성 지침(WCAG)

---

WCAG 웹 콘텐츠 접근성 지침은 국제 웹 표준 기구 W3C(월드 와이드 웹 컨소시엄)에서 1997년 장애인 등의 접근성 제고를 위해 WAI를 설립하고 장애인이나 장애환경의 웹접근성을 위해 제고하기 위해 만든 가이드라인이다. 한국에서는 이 지침을 바탕으로 한국의 특수성을 고려하여 웹접근성을 준수하기 위한 KWCAG를 발표하였다.

 

정보 접근성의 4가지 핵심 원리
- 네이버 접근성 페이지, 한국형 웹 콘텐츠 접근성 지침 2.1 참조

 

○ 제1원칙 : 인식의 용이성(Perceivable)

모든 웹콘텐츠에 대하여 사용자가 쉽게 인식할 수 있도록 하여야 한다.

5.1. 대체 텍스트	5.1.1. (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
5.2. 멀티미디어 대체 수단	5.2.1. (자막 제공) 멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.
5.3. 명료성	5.3.1. (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다. 5.3.2. (명확한 지시 사항 제공) 지시 사항은 모양, 크기., 위치, 방향, 색 소리 등에 관계없이 인식될 수 있어야 한다. 5.3.3. (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다. 5.3.4. (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다. 5.3.5. (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

 

○ 제2원칙 : 운용의 용이성(Operable)

웹콘텐츠는 사용자가 의도한 대로 안전하고 쉽게 접근하고 운용하면서 내비게이션할 수 있어야 한다.

6.1. 입력장치 접근성	6.1.1. (키보드 사용 권장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. 6.1.2. (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
6.2. 충분한 시간 제공	6.2.1. (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다. 6.2.2. (정지기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
6.3. 광과민성 발작 예방	6.3.1. (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
6.4. 쉬운 내비게이션	6.4.1. (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. 6.4.2. (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. 6.4.3. (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

 

○ 제3원칙 : 이해의 용이성(Understandable)

사용자가 웹콘텐츠의 내용과 기능을 쉽게 이해할 수 있고 예측가능하여야 한다.

7.1. 가독성	7.1.1. (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
7.2. 예측 가능성	7.2.1. (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화)은 실행되지 않아야 한다.
7.3. 콘텐츠의 논리성	7.3.1. (콘텐츠의 선형 구조) 콘텐츠는 논리적인 순서로 제공해야 한다. 7.3.2. (표의 구성) 표는 이해하기 쉽게 구성해야 한다.
7.4. 입력 도움	7.4.1. (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다. 7.4.2. (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

 

○ 제4원칙 : 견고성(Robust)

웹콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하여야 한다.

8.1. 문법 준수	8.1.1. (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
8.2. 웹 애플리케이션 접근성	8.2.1. (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

 

 

04  WAI-ARIA의 역할 및 작성 방법

---

작성 방법

• HTML 태그의 역할과 의미를 고려해 올바르게 ARIA를 작성해 불필요한 요소를 줄이고 접근성을 향상시키자. ( = 의미 없는 div보다는 의미 있는 시맨틱 태그 위주로 활용)
• HTML 요소와 중복해서 정의하지 않는다. (예를 들면 <button>태그에 굳이 role="button"을 붙일 필요가 없다는 뜻)
• HTML 태그의 역할에 맞지 않는 ARIA를 선언하지 않는다.
• 모든 요소에 WAI-ARIA 속성을 사용할 수 있는 것은 아니기 때문에 ARIA in HTML 명세를 검토한 뒤 적용해야 한다.
• 키보드로 접근이 가능하게 작성해야 한다.

 

WAI-ARIA 구조

1. 역할(Role) : 컴포넌트, 요소 내 역할 정의

어떤 역할을 하는 요소인지 명시해 스크린 리더 사용자에게 더 정확한 정보를 제공한다. 부여한 역할은 동적 변경이 불가능하다.

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

//a 태그에 button 기능을 정의
<a href="#" role="button">버튼</a>

//tab button
<ul class="tabContents" role="tabList">
	<li><a href="#" role="tab">tab1</a></li>
    <li><a href="#" role="tab">tab2</a></li>
    <li><a href="#" role="tab">tab3</a></li>
</ul>

 

2. 속성(Property) : 컴포넌트의 특징이나 상황 정의

요소가 기본적으로 가지고 있는 특징 또는 상황을 의미한다. "aria-"라는 접두어를 가진다.

• aria-label : 요소에 대한 정보가 없을 때 정보를 부여해주는 속성
• aria-required : 폼 요소 작성 시 사용, 해당 필드가 기재되었을 시에만 폼을 전송하도록 하는 속성
• aria-live : 실시간으로 업데이트/갱신된 정보를 알려주는 속성. aria-live=POLITENESS_SETTING는 스크린 리더가 live regions에 대한 업데이트를 처리할때 우선 순위를 설정하는 데 사용되며, 가능한 세팅으로 off, polite, assertive 가 있음. 기본 설정은 off.

//필수적으로 입력되어야 함을 전달
<input type="checkout" aria-required="true">

//aria-live="off": 동적 영역의 변경 사항이 사용자에게 알려지지 않음
//aria-live="polite": 사용자가 아무 작업도 하지 않거나 사용자가 업데이트가 발생하기를 기다리고 있을 때 사용
//aria-live="assertive": 동적 영역이 변경될 때 업데이트된 정보에 대해 사용자에게 알려야 할 때 사용

<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">No planet selected</h2>
  <p id="planetDescription">Select a planet to view its description</p>
</div>

 

3. 상태(State) : 컴포넌트 상태 정보를 정의

요소의 현재 상태를 의미하며, 상황의 변화에 따른 값을 가진다.

• aria-expanded : 아코디언 메뉴에서 메뉴의 확장과 축소 상태
• aria-selected : 선택 상태인 요소를 표시하는 속성
• aria-invalid : 입력된 값이 유효한지 아닌지 판단
• aria-hidden : 숨김 상태의 컨텐츠로, 사용 시 시각적으로만 숨겨지는 것이 아니라 의미적으로도 숨겨지기 때문에 시각적으로만 보이지 않게 할 때는 사용해서는 안 됨( a11y-hidden을 사용 )

//확장되었을 때는 aria-expanded="true", 축소되었을 때는 aria-expanded="false"를 삽입
<button aria-controls="site-select" aria-expanded="true">Region/Language</button>
<div id="site-select" aria-hidden="false">
    <label for="utilnav-country-selector">Select a country/region</label>
    ...
</div>

//출처: https://aoa.gitbook.io/skymimo/aoa-2018/2018-aria/expand

//input에 입력된 값이 유효한지 판단
//true일 시 오류 발생 상태
<input type="text" aria-invalid="true">

 

 

 

참고 자료

W3C ARIA in HTML  https://www.w3.org/TR/html-aria/#docconformance

널리 NULI  https://nuli.navercorp.com/guideline/s01/g01

한국웹접근성인증평가원  http://www.wa.or.kr/index.asp

웹접근성이란? - 머스트  http://www.must.or.kr/ko/must/research/web.accessibility/introduce/

WAI-ARIA 란?  https://story.pxd.co.kr/1588

네이버 접근성 페이지  https://accessibility.naver.com/accessibility

웹접근성과 웹표준  https://seulbinim.github.io/WSA/accessibility.html#%EC%9B%B9%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%98-%EA%B0%9C%EC%9A%94

WAI-ARIA 소개   https://youtu.be/W6VSA3GDK6s

 

---

 

이전 웹디자인기능사 국비 수업에서 대략적인 개념만 알고 alt, text-indent를 사용한 웹접근성 정도만 배웠었기 때문에 WAI-ARIA에 대해서는 명확하게 이해하지 못하고 있었던 것을 마크업 강의와 HTML+CSS 과제 진행을 하면서 인지하게 되어 이해를 위해 정리글을 작성해 보았다.

(법률 시행 연도는 글마다 조금씩 차이가 있어서 일단 각종 참고 자료들에서 제일 많이 나온 연도로 작성했습니다. 명확한 연도를 아시는 분이 있으면 알려주셔도 됩니다...)

 

더 구체적으로 공부해 보고 싶다면 이 채널 영상들을 통해 공부해 보는 것도 좋을 것 같다,

https://www.youtube.com/c/AOA11Y/featured

AOA11Y

실 적용 관련해서는 레진 WAI-ARIA 가이드라인을 확인해보자.

https://tech.lezhin.com/2018/04/20/wai-aria

레진 WAI-ARIA 가이드라인 소개.

 

(온전히 다 정리한 건 아니라 나중에 수정할 수 있음)