combobox / grid / listbox / menu / menubar / radiogroup / tablist / tree / treegrid
"tablist"를 사용한 탭메뉴 예시
탭목록(tablist)과 본문(tabpanel)이 따로 나뉘어져 있는 마크업구조는 스크린리더 등 보조기기를 사용하는 사용자에게는 정보 접근이 어려울 수 있다. 이 때 Tab 관련 Widget Role을 사용하면 보조기기를 사용하는 사용자에게 보다 정확한 정보를 제공할 수 있다.
ㄴ [이미지설명] 탭메뉴 UI구조 (Role속성 위치)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<divclass="tab_wrap">
<!-- 탭메뉴 --><!-- role="tablist"을 사용하여 탭메뉴 역할 부여 -->
aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1
유의사항
W3C에서는 HTML5 섹션 관련 요소와 WAI-ARIA 규칙을 함께 사용할 경우 해당 기능이 무효화 되거나 충돌이 발생할 수 있으므로 중복해서 사용하지 않도록 주의를 당부하고 있다. ex) <header role="banner"></header></span></li>(X)
원래의 HTML 요소의 의미를 변경하면 안된다. ex) <h1 role="button"></h1>(X)
모든 RIA 컨텐츠는 키보드를 사용하여 접근할 수 있어야 한다.
모든 브라우저와 보조기기가 WAI-ARIA를 지원하지 않기 때문에 지원하는 브라우저와 기기 정보를 확인하고 적용해야한다.
테이블의 내용을 이해할 수 있도록 summary 속성, caption 태그를 제공해야 한다.
1
2
<tableclass="tbl_view"summary="1월부터 12월까지의 평균 강수량을 나타낸 표, 장마 기간이 있는 6~7월에 강수량이 가장 많고, 11월~2월 사이의 강수량이 가장 낮다.">
<caption>한국의 월별 강수량</caption><!-- 생략 -->
테이블을 제공할 경우, 머리글<thead>, 바닥글<tfoot>, 본문<tbody>을 구분하여야 한다.
* 주의사항 : <thead>, <tfoot>, <tbody> 순으로 작업되어야 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<tableclass="bbs_list"summary="공지사항 리스트">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>제목</td>
<td>2012-05-15</td>
<td>111</td>
</tr>
</tbody>
</table>
<table>
<caption>3일 일기예보</caption>
<tbody>
<tr>
<th>오늘<br/>5.15(화)</th>
<td><imgsrc="p_02.gif"alt="구름 조금"/></td>
<td>구름 조금</td>
</tr>
<tr>
<th>예상기온/th>
<tdcolspan="2">최고 33도 / 최저 24도</td>
</tr>
</tobdy>
</table>
서식을 제공할 경우 <label>을 제공해야 한다. * <label> 태그의 for와 <input />의 id가 동일하여야 합니다. * <label>이 <input>, <select> 등의 입력창과 제목을 연결시켜 문서 파악을 용이하게 합니다. * checkbox와 radio 경우 <label>을 이용하여 텍스트를 클릭해도 선택되게 작업할 수 있으며, 사용자들은 클릭영역이 넓어져 사용이 편리해집니다.
웹 접근성의 목적은 장애인과 비장애인이 동등하게 접근할 수 있도록 웹 컨테츠를 제작하는데 있습니다. 한국에는 한국형 웹 컨텐츠 접근성 지침이라는 웹사이트에서 웹 컨텐츠를 제공할 경우 지켜야하는 웹 접근성 지침 표준문서가 있습니다.
한국형 웹 컨텐츠 접근성 지침 2.0을 기준으로 웹 접근성을 고려한 콘텐츠 제작 기법 v2.0이 2011년 11월에 발표되었습니다. 맑은커뮤니케이션에서 문서에 대한 자료와 내용을 정리해 보고자 합니다.
한국형 웹 컨텐츠 접근성 지침(KWCAG)은 W3C의 웹 컨텐츠 접근성 지침(WCAG)를 한국 실정에 맞게 알아보기 쉽게 구성한 표준문서입니다. 현재 국가표준은 한국형 웹 컨텐츠 접근성 지침 2.0 으로 구성은 크게 4가지의 원칙과 13가지의 세부 지침으로 구성되어 있고 각 세부 지침별로 사례별 기술지침이 부가적으로 포함되어 있습니다. html5를 기준으로 작성되었으며 자료 내용과 함께 내용을 확인하시면 좀 더 쉽게 이해할 수 있을거라 생각합니다.
첫째. 인식의 용이성
웹 사이트에서 제공하는 컨텐츠를 이용하기 위해서는 해당 컨텐츠를 정확히 인식할 수 있어야 한다.
지침
검사항목
텍스트 아닌 컨텐츠에는 대체 텍스트를 제공해야 한다.
텍스트 아닌 컨텐츠는 그 의미나 용도를 이해할 수 있도록 적절한 대체 텍스트 제공해야 한다.
제대로 제공된 대체텍스트는 일반적인 접근이 불가능한 사용자 뿐아니라 예외적인 상황에서는 일반인들에게도 유용할 수 있다.
<imgalt="토플 1번 문항용 오디오"src="http://kangyoo80.tistory.com/admin/entry/post/TOEFLTest.png">
6. QR 코드에서 URL을 대체 텍스트로 제공
1
<imgalt="애듀랭키 아이폰용 QR 코드"src="http://kangyoo80.tistory.com/admin/entry/post/QR_code.jpg"longdesc="http://itunes.apple.com/app/eduranky/id451086260?mt=8">
동영상, 음성등 멀티미디어 컨텐츠를 이해할 수 있도록 멀티미디어 대체 수단을 제공해야 한다.
멀티미디어 컨텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
멀티미디어 컨텐츠를 동등하게 인식할 수 있도록 제작하기 위해서는 자막, 원고 또는 수화를 제공해야 한다.
가장 중요한 요소는 멀티미디어 컨텐츠와 동등한 내용을 제공하는 것이고 가장 바람직한 방법은 닫힌 자막(Closed caption)을 오디오와 동기화시켜 제공하는 것이다.
대사 없이 영상만 제공하는 경우에는 화면 해설(텍스트, 오디오, 원고)을 제공하고, 음성만 제공하는 경우에는 자막, 원고 또는 수화를 제공해야 한다.
1. 열린 자막 제공
청각장애인은 시청각 컨텐츠에 포함된 대화를 청취할 수 없으므로 이를 열린자막(동영상의 오디오 트랙에 포함된 대화 및 중요한 음향 정보를 텍스트 표시된 자막)으로 시각적인 정보를 제공해야 한다.
2. 닫힌 자막 제공
닫힌 자막(사용자가 필요에 따라 자막을 화면에 표시하도록 제작하는 방법)은 동영상의 대화와 중요한 음향 정보를 포함해야 하며 대화나 음향 효과가 제공되지 않는 동영상은 '이 동영상은 음성을 제공하지 않음'이라는 메시지를 닫힌 자막 방식을 이용하여 수시로 제공할 필요가 있다.
3. 수화 제공
빠르게 변화하는 자막을 인식하기 어려운 청각장애인을 위하여 동영상의 자막을 수화로 함께 제공하고 자막으로 인하여 수화가 가리지 않도록 닫힌 자막으로 구현하여 사용자가 자막을 화면에서 삭제할 수 있어야 한다.
컨텐츠는 명확하게 전달되어야 한다.
컨텐츠는 색에 관계없이 인식될 수 있어야 한다.
컨텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자나 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자가 색을 배제하여도 해당 컨텐츠를 인식할 수 있도록 제공해야 한다.
1. 색을 보완하는 텍스트 제공
명확한 지시 사항 제공 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
특정 요소를 가리키거나 지시 사항을 전달하는 컨텐츠에 한하는 것으로, 시각이나 청각 등과 같은 특정 감각에만 의존하여 제공해서는 안 되며, 다른 감각을 통해서도 지시 사항을 인식하는 데 문제가 없도록 제공해야 한다.
텍스트 컨텐츠와 대체 텍스트가 제공된 텍스트 아닌 컨텐츠는 보조 기기를 통해 다른 감각으로의 전환이 가능하기 때문에 이들 컨텐츠를 음성 컨텐츠로 변환하여 제공할 필요는 없다.
1. 시각 정보를 이용한 지시문의 보완
색, 크기, 모양 또는 위치를 이용하여 어떤 컨트롤이나 컨텐츠를 지시하는 경우 시각장애인이 인식할 수 있도록 대체 수단을 제공해야 한다.
2. 청각 정보를 이용한 지시문의 보완
청각 정보를 이용하여 지시문을 제공하는 웹 컨텐츠는 청각 정보를 인식할 수 없는 사용자를 위한 대체 수단을 제공해야 한다.
텍스트 컨텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
웹 페이지에서 보이는 핵심 텍스트 컨텐츠와 배경 간의 충분한 대비를 제공하여, 저시력자, 색각 이상자, 노인 등도 컨텐츠를 인식할 수 있도록 제공해야 한다.
본문 컨텐츠에 단순한 목적으로 사용한 글자, 마우스나 키보드를 활용하여 초점(Focus)을 받았을 때 명도 대비가 커지는 컨텐츠는 예외로 한다.
자동으로 재생되는 배경음을 사용하지 않아야 한다.
웹 페이지에서 자동으로 재생되는 배경음(동영상, 음성, 음악 등)으로 인해 컨텐츠를 인식하는 데 방해받지 않아야 한다. 단, 3초 미만의 배경음은 예외로 한다.
3초 이상 재생되는 배경음을 사용할 경우, 반드시 배경음을 제어할 수 있는 수단(멈춤, 일시정지, 음량조절 등)이나 배경음 제어로 이동하는 바로가기 링크를 웹 페이지의 첫 부분에 제공해야 한다.
컨텐츠가 제공하는 배경음의 음량을 조절하더라도 화면 낭독프로그램의 음량에는 영향을 주지 않아야 한다.
1. 재생 시간이 3초 미만인 배경음의 사용
웹 페이지에 포함되어 자동적으로 재생되는 사운드 컨텐츠의 길이를 3초 미만이 되도록 구현하고, 반복적으로 재생되지 않도록 한다.
2. 배경음을 정지 상태로 제공하는 방법
컨텐츠에 포함된 배경음을 음소거 상태로 제공하고, 사용자 제어에 의하여 배경음을 들을 수 있도록 구현하는 방법으로 이 방법은 사용자가 화면 낭독 프로그램을 사용하는데 아무런 영향을 주지 않는다.
둘째. 운용의 용이성
사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
지침
검사항목
컨텐츠는 키보드로 접근할 수 있어야 한다.
모든 기능은 키보드만으로도 사용할 수 있어야 한다.
웹 페이지에서 제공하는 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
사용자의 반응 속도나 지속성이 중요한 요소인 붓질(Painting), 시뮬레이션 컨텐츠등과 시각적인 방법으로만 접근이 가능한 지리정보 컨텐츠, 가상현실 컨텐츠등은 예외로 할 수 있다.
<ahref="http://kangyoo80.tistory.com/admin/entry/post/knitting.html"target="_blank">뜨개질 포털 사이트 (새 창으로 열림)</a>
<ahref="http://kangyoo80.tistory.com/admin/entry/post/korean.html"target="_blank"><imgalt="한국어 페이지 (새창으로 열림)"src="http://kangyoo80.tistory.com/admin/entry/post/korean.png"></a>
디자인요소에 의해 단어사이에 강제로 공백을 넣게 되면 단어의 의미가 달라지고, 화면 낭독 프로그램에서는 다르게 발음을 하게 될 수도 있으며, 페이지 내에서 해당 단어를 검색할 수 없게 되고, 검색 엔진이나 번역 엔진에서도 다른 단어로 인식하게 된다. 이 경우 CSS의 letter-spacing 속성이나 text-align 속성을 이용해 조절하면 된다.
3. 동적으로 생성된 요소는 그것을 유발시킨 요소 바로 뒤에 위치
1
2
3
4
5
6
7
8
9
10
<p>
<labelfor="imei">IMEI Code: </label>
<inputid="imei">
<ahref="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#imeihelp"><imgalt="What is IMEI?"src="http://kangyoo80.tistory.com/admin/entry/post/help.png"></a>
</p>
<divid="imeihelp">
<h3>Explanation of IMEI</h3>
<p>Help content here....</p>
<p><ahref="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#imei">Back to IMEI input field</a>.</p>
</div>
위의 예제는 IMEI code에 대한 도움말이 보이는 소스 코드이다. 위와 같은 도움말 제공 방식에 대해 도움말이 IMEI Code를 입력한 다음에 나오기때문에 시각장애인들이 도움말이 있다는 사실을 알기 어렵다는 지적도 있다. 그런 경우, 도움말 링크를 <label>안에 넣어 다음과 같이 표현해도 된다.
1
2
3
4
5
6
7
<p>
<labelfor="imei">
IMEI Code:
<ahref="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#imeihelp"><imgalt="What is IMEI?"src="http://kangyoo80.tistory.com/admin/entry/post/help.png"></a>
</label>
<inputid="imei">
</p>
표는 이해하기 쉽게 구성해야 한다.
시각장애인 등도 이해할 수 있도록 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다.
1. 표 제목을 <caption>으로 제공
1
2
중간 생략
<table><caption>개인별 시험 성적표</caption><tbody></tbody></table>
2. 표의 구조 또는 내용에 대한 요약을 summary로 제공
1
2
중간 생략
<tablesummary="중간 고사와 기말 고사 성적을 개인별로 보여주는 표"><caption>개인별 시험 성적표</caption><tbody></tbody></table>
3. 표의 헤더 셀과 데이터 셀의 관계 정의
1
<tablesummary="중간 고사와 기말 고사 성적을 개인별로 보여주는 표"><caption>개인별 시험 성적표</caption><thead><tr><th>구분</th><th>중간 고사</th><th>기말 고사</th></tr></thead><tbody><tr><th>김철수</th><td>50</td><td>60</td></tr><tr><th>박영희</th><td>70</td><td>80</td></tr></tbody></table>
국내 스마트폰 가입자 2500만 시대. 비장애인에게 스마트폰용 웹 앱은 그림의 떡입니다. 스마트폰에서 제공하는 음성 안내 기능을 켜도 메뉴를 제대로 읽어주지 않거나 아예 건너뛰기 때문입니다. 적잖은 스마트폰용 앱이 이와 처지가 다르지 않습니다. 이에 국가인권위에 장애인의 웹사용에 대한 불편 때문에 신고가 아주 많다고 합니다. 그렇기 때문에 웹 접근성은 권고 사항이 아니라 웹접근성은 의무 입니다.
그래서 '모바일 애프리케이션 웹접근성 지침'에 대하여 행안부에서 재정을 만들었습니다. 접근성이란 말은 시·청각·지적장애인이나 저시력자, 고령자 같은 정보 접근 취약계층에게도 동등한 이용 환경을 보장하자는 것이 그 개념입니다. 이는 웹 뿐 아니라 모바일 세상에도 똑같이 적용됩니다. 예를 들어 스마트러닝 한다고 달랑 동영상만 서비스하면 웹접근성과 모바일접근성에 위배 됩니다. 또 스마트러닝의 장점인 슬라이딩효과 사용 해야 된다고 강조를 하는데요 버튼으로 되어야 됩니다. 장애인이 손가락으로 드래그 하여 사용 하는것 문제가 있다는 것 입니다.
그러면 '모바일 애프리케이션 웹접근성 지침'에 대하여 보겠습니다. 이번 지침은 이런 접근성 원칙을 모바일 웹, 앱까지 확장했다는 점에서 의미가 있습니다. 행안부는 공공기관이나 지자체, 학교 등이 앞으로 웹, 앱 제작시 이 지침을 따르도록 했습니다. 2015년까지는 개인용 웹페이지를 뺀 민간 영역의 모든 웹사이트도 법에 따라야 하는 만큼, 이번 지침을 웹, 앱 개발시 적용하면 도움이 될것입니다. 모바일 애플리케이션 접근성 지침’은 앱 개발시 꼭 지켜야 할 ‘준수사항’ 7개와, 되도록 지켜야 할 ‘권고사항’ 8개로 구성돼 있습니다.
모바일 앱 접근성 준수사항
지침
내용
비고
대체 텍스트
이미지 등 텍스트 아닌 콘텐츠의 정보나 의미를 동등하게 인식할 수 있도록 대체 텍스트 제공
시각장애인 등
초점
모든 객체에 초점(focus)을 적용하고, 초점이 순차적으로 이동될 수 있도록 제공
시각·지체장애인 등
운영체제 접근성 기능 지원
각 모바일 운영체제에서 장애인을 위해 제공하는 기능과 호환될 수 있도록 서비스 제공
모든 장애인
누르기 동작 지원
슬라이드, 드래그앤드롭 등의 복잡한 동작을 단순한 방법으로 이용할 수 있도록 제공
시각·지체장애인 등
색에 무관한 인식
색각이상자도 정보를 동등하게 접근할 수 있도록 무늬, 패턴 등을 함께 제공
색각 이상자 등
명도 대비
저시력자, 고령자 등을 위해 전경과 배경을 구분할 수 있도록 고대비를 제공
저시력인 등
자막 및 수화 등의 제공
동영상에 대한 내용을 동등하게 인식할 수 있도록 자막, 원고 또는 수화를 제공
청각장애인 등
모바일 앱 접근성 권고사항
지침
내용
비고
기본 사용자 인터페이스 컴포넌트
모바일 운영체제에서 제공하는 기본적인 사용자 인터페이스 컴포넌트를 최대한 활용
모든 장애인
컨트롤간 충분한 간격
사용자 의도와 다른 컨트롤을 누르지 않도록 컨트롤간 충분한 간격을 배치
지체·지적장애인 등
알림 기능
한 가지 방법이 아닌 진동, 시각, 소리 등 다양한 방법으로 사용자에게 알림 기능을 제공
시각·청각장애인 등
누르기 동작 지원
슬라이드, 드래그앤드롭 등의 복잡한 동작을 단순한 방법으로 이용할 수 있도록 제공
시각·지체장애인 등
범용 폰트 이용
사용자의 선호에 따라 폰트의 크기의 조절, 확대 등이 가능하도록 기능 제공
저시력인 등
사용자 인터페이스의 일관성
인터페이스 요소를 사용자가 다시 학습하지 않아도 되도록 일관성 있는 배치
지적·시각 장애인 등
깜빡거림의 사용 제한
광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않음
광과민성 발작 증세
배경음 사용 금지
음성에 의존하는 시각장애인 등을 위해 자동으로 재생되는 배경음을 사용하지 않음
시각장애인 등
장애인 사용자 평가
장애인의 이용 보장을 위해 장애인 사용자를 대상으로 사용자 평가 수행
모든 장애인
퍼블리싱 페이지 "모바일 앱 접근성 지침" 테스트
모바일 퍼블리싱한 페이지를 얼마나 문법과, 지침에 맞게 테스트 할 수 있는 사이트 입니다.
ㄴ [이미지설명] Landmark Role 속성 관련 영역
