Abstract image of a woman sitting on books and studying on a laptop

Qa를 위한 검사항목으로 바라보는 웹 접근성

Download as PPT, PDF
준극 김, profile picture
준극 김

퇴사전 QA 교육을 진행했던 자료...

Education
1 of 106
Downloaded 30 times
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
QA 를 위한 검사항목으로 바라보는 웹 접근 성 1
웹 접근성의 오해 2
웹 접근성은 장애인만을 위한 것이다 ?? 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간 - 팀 버너스 리 (Tim Berners-Lee) 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대 부분 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지 만 , 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스 를 손쉽게 활용할 수 있도록 만드는 것을 말한다 . 3
• 휠체어사용자 • 무릎이 아픈 사용자 • 축구 , 등산을 하고 난 뒤 다리에 힘 이 풀렸을 때 • 무거운 짐을 들고 다닐 때 등 ( 여행 용 가방등 ) 웹 접근성 = 인터넷 상의 경사로를 만들어 주자 !! • 시각 장애자용의 음성 브라우저 사용자 • 텍스트를 점자로 번역하는 점자 브라우저 사용자 • 키보드를 활용하지 못할 때 or 마우스를 활용하지 못할 때 • 저사양 컴퓨터 , 모뎀 등 통신환경이 좋지 않을 때 • 시끄러운 환경에 놓여 있을 때 동영상 보기 등 4
국내의 웹 접근성 5
우리나라의 웹 접근성 (1) 정보통신 단체 표준인 한국형 웹 콘텐츠 접근성 지침 1.0 (TTAS.OT-10.0003, 2004.12.23) •국제 표준화 기구인 W3C(World Wide Web Consortium) 의 WAI(Web Accessibility Initiative) 에서 1999 년 5 월 제정한 웹 콘텐츠 접근성 가이드라인 (WCAG : Web Content Accessibility Guidelines 1.0) •WCAG 2.0 초안 (2003 년 6 월 24 일판 ) 을 참고 •부분적으로 미국 재활법 508 조를 참고 이를 바탕으로 국가 표준인 ‘인터넷 웹 콘텐츠 접근성 지침’ (KICS.OT-10.0003, 2005.12.21) 제작 6
우리나라의 웹 접근성 (2) 현재의 국가 표준 한국형 웹 콘텐츠 접근성 지침 2.0 (2010 년 12 월 31 일부로… ) •그 동안 우리나라에서 웹 접근성 표준으로 사용되어온 정보통신 단체 표 준인“한국형 웹 콘텐츠 접근성 지침 1.0” 과 이를 바탕으로 제정된 국가 표준인 ‘인터넷 웹 콘텐츠 접근성 지침’에 해외 웹 관련 표준 및 기술 동 향을 최대한 반영하여 개정 . •특히 2008 년 12 월에 제정된 웹 접근성 관련 국제 표준인 월드 와이드 웹 컨소시엄 (W3C: World Wide Web Consortium) 의 ‘웹 콘텐츠 접근성 가 이드라인 2.0(WCAG 2.0: Web Content Accessibility Guidelines 2.0)’ 을 국내 실정에 맞게 반영 . 7
한국형 웹 콘텐츠 접근성 지침 2.0 4 개의 원칙과 13 개의 지침 22 개의 검사항목으로 구성되어 있습니다 . 4 개의 원칙 •인식의 용이성 (Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다 . •운용의 용이성 (Operable) : 사용자 인터페이스 구성 요소는 조작 가능하 고 내비게이션할 수 있어야 한다 . •이해의 용이성 (Understandable) : 콘텐츠는 이해할 수 있어야 한다 . •견고성 (Robust) : 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다 . 8
원칙 1. 인식의 용이 성 9
인식의 용이성 (Perceivable) 지침 (3 개 ) 검사 항목 (6 개 ) 1.1( 대체 텍스트 ) 텍스트 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다 . 1.1.1( 적절한 대체 텍스트 제공 ) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다 . 1.2( 멀티미디어 대체 수단 ) 동영상 , 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다 . 1.2.1( 자막 제공 ) 멀티미디어 콘텐츠에는 자막 , 원고 또는 수화를 제공해야 한다 . 1.3( 명료성 ) 콘텐츠는 명확하게 전달되어 야 한다 . 1.3.1( 색에 무관한 콘텐츠 인식 ) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다 . 1.3.2( 명확한 지시 사항 제공 ) 지시 사항 은 모양 , 크기 , 위치 , 방향 , 색 , 소리 등에 관계없이 인식될 수 있어야 한다 . 1.3.3( 텍스트 콘텐츠의 명도 대비 ) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다 . 1.3.4( 배경음 사용 금지 ) 자동으로 재생되 는 배경음을 사용하지 않아야 한다 . 모든 콘텐츠는 사용자가 인식할 수 있어야 한다 . 10
검사항목 1 1.1.1 ( 적절한 대체 텍스트 제공 ) 텍스트 아닌 콘텐츠는 그 의미나 용 도를 이해할 수 있도록 대체 텍스트를 제공해야 한다 . 이미지 등 텍스트가 아닌 콘텐츠를 이용할 경우 , 그 의미나 용도를 해당 이미 지와 동등하게 인식할 있도록 적절한 대체 텍스트를 제공해야 한다 . 텍스트로 제공할 수 있는 콘텐츠를 이미지 등 텍스트 아닌 콘텐츠로 제공하는 것은 바람 직하지 않은 방법이므로 지양해야 한다 . 또한 대체 텍스트는 간단명료하게 제 공해야 한다 . 링크나 버튼의 대체 텍스트로 ‘이동하기’ , ‘GO’ 등과 같이 그 목적지를 구체적 으로 알려주지 않는 대체 텍스트는 피해야 한다 . 11
검사항목 1 특정 감각 기관을 위한 콘텐츠인 경우 -플루트 독주나 시각적 예술 작품 등의 경우 , 해당 콘텐츠에 대한 간략한 용도 를 알려주는 대체 텍스트만으로 충분하다 . 콘텐츠의 내용을 설명하는 대체 텍스트를 제공할 수 없는 경우 -생방송 콘텐츠와 같이 그 내용을 설명하기 어려운 경우 , 해당 콘텐츠에 대한 간략한 용도를 알려주는 대체 텍스트만으로도 충분하다 . -또한 색맹 검사 , 청각 검사 , 시력 검사 , 받아쓰기 등과 같은 검사 또는 시험 의 경우에도 콘텐츠의 간략한 용도를 알려주는 대체 텍스트만으로 충분하다 . 12
검사항목 1 - check Tool Open-wax, n-wax, Pajet, NIA 평가 ( http://www.korea-nia.appspot.com ) 등을 주로 이용 . Professional Accessibility Javascript Evaluation Tools - PAJET ( http://mydeute.com/was/was.html ) 13
검사항목 1 – check 방법 1. 이미지와 텍스트를 비교하여 적절한 대체 텍스트를 판단 . ( 빈 값 , 없 음 , 내용 불충분 , 오타 등등 ) 2. Longdesc 는 직접 클릭해서 확인 . - 클릭시 해당 페이지가 없는 경우는 오류 - 페이지의 내용이 해당 의미나 기능을 파악하기 어려운 경우 도 오류 3. 의미 있는 내용을 배경이미지 사용 체크 ( 의미 있는 이미지를 배경이미지로 사용했을 경우 , HTML 소스로 확인 ) 14
검사항목 1 F12 로 해당 영역 을 찍어서 확인가 능 . A 요소에는 alt 속성이 올 수 없음 . 15
검사항목 1 – 사례 (1) 1. 이미지 맵 작성시 <area> 에 대체 텍스트를 바르게 작성 했더라도 <img> 에 alt 속성을 제공하지 않은 경우 . 2. 이미지맵 형태로 조직의 관계나 프로세스 등 복잡한 이미지의 대체 텍 스트를 제공 시 , area 로 항목만 나열하고 조직 간의 관계를 표현하지 않은 경우 . 3. 대체 텍스트를 alt (alternate text) 가 아닌 title 로 제공 4. QR 코드의 이동 주소 정보 등을 대체텍스트 또는 설명 , 링크 등으로 제공해야 함 . <img src=“ 경로” usemap=“#id” alt=“” /> <map id=“id” name=“id”> <area … alt=“ 작성” /> <area … alt=“ 작성” /> <img src=“” alt=“” title=“ 대체텍스트” /> 16
검사항목 1 – 사례 (2) 1. ACSII 심벌 기호는 <abbr title=" 웃는 돼지 ">(^(oo)^)</abbr> 와 같이 제공 . 2. 플래시 (Flash) 를 이용한 콘텐츠 구현 시 콘텐츠에 대한 대체 텍스트 는 액세스 가능성 (Accessibility) 패널의 ' 객체를 액세스 가능하게 만 들기 (Make object accessible)' 항목을 체크하고 , ' 이름 (N)' 항목에 대 체 텍스트를 제공한다 . 설명 (D) 항목은 보다 자세한 설명문을 제공 하는 경우에 사용한다 . 17
검사항목 1 – 사례 (3) 1. 실버라이트 (Silverlight) 에서 텍스트 아닌 콘텐츠에 대한 대체 텍스트 는 AutomationProperties.Name 속성 또는 AutomationProperties.LabeledBy 속성을 이용하여 제공한다 . 콘텐츠 또는 컨트롤에 대한 설명문이나 도움말은 AutomationProperties.HelpText 속성을 이용하여 제공한다 . 2. 실시간 오디오와 실시간 동영상 콘텐츠에 대한 대체 텍스트는 콘텐츠 의 내용이 시시각각으로 변화한다 . 이 경우 , 대체 텍스트를 콘텐츠의 내용 변화에 따라 동적으로 제공하는 것은 매우 어려운 일이다 . 따라 서 실시간 오디오 또는 동영상 콘텐츠의 대체 텍스트로는 해당 콘텐 츠의 용도를 알려주는 것으로도 충분하다 . • 한국도로공사가 제공하는 경부고속도로 서울방향 서초 나들목에 설치된 CCTV 실시간 영상의 링크에 대한 대체 텍스트를 " 경부 선 서울방향 서초 나들목 실시간 영상 " 이라고 제공한다 . • 인터넷을 통하여 중계되는 생방송 KBS FM 라디오 콘텐츠로 이 동하는 이미지 링크의 대체 텍스트를 "KBS FM 라디오 생방 송 " 이라고 제공한다 . 18
검사항목 1 – 사례 (4) CAPTCHA 는 사용 목적상 그 내용을 대체 텍스트로 제공한다면 CAPTCHA 가 의도하는 본래 목적을 달성할 수 없다 . 따라서 CAPTCHA 에 대한 대체 텍 스트는 그 용도를 알려주는 것으로 충분하다 . •Ex) 텍스트로 제공되는 CAPTCHA 에 대한 대체 텍스트로는 " 숫자 이미지 용 CAPTCHA" 가 적절하다 . •Ex) 오디오로 제공되는 CAPTCHA 에 대한 대체 텍스트로는 " 오디오 CAPTCHA" 등이 적절하다 . CAPTCHA 를 제공하는 웹 콘텐츠는 반드시 대체 수단을 제공해야 한다 . •두 가지 이상의 감각 , 예를 들어 시각적 CAPTCHA 와 청각적 CAPTCHA 를 동시에 제공 •사용자에게 문제를 텍스트 콘텐츠로 제시하고 문제에 대한 답을 입력하도 록 하는 문제 풀이 방식의 CAPTCHA 제공 •상담원을 이용하여 CAPTCHA 가 제공하는 역할을 대신할 수 있는 서비스 제공 •기타 CAPTCHA 의 이용을 우회할 수 있는 방법 제공 ※ 보다 다양한 방법은 W3C WAI 에서 제공하는 “ Inaccessibility of CAPTCHA ( http://www.w3.org/TR/turingtest/ )” 을 참고하기 바람 19
검사항목 1 – 사례 (5) 온라인 시험 등에 대한 대체 텍스트 제공 •검사 ( 색맹검사 , 청각검사 , 시력검사 등 ) 또는 시험 ( 듣기 평가 예문 , 단어 받아쓰기 등 ) 을 위하여 제공되는 텍스트 아닌 콘텐츠는 검사의 결과 또는 시험의 정답을 유추할 수 있는 내용을 대체 텍스트로 제공할 수 없 다 . 따라서 이들 콘텐츠에 대한 대체 텍스트는 콘텐츠의 간략한 용도를 알려주는 대체 텍스트를 제공해야 한다 . Ex ) 색맹 검사용 콘텐츠에 대하여 " 색맹 검사용 이미지 1" 등과 같이 대체 텍스트를 제공한다 . Ex ) 토플 (TOEFL) 듣기 평가용 예제의 오디오 콘텐츠에 대하여 " 토플 문항 5 번용 오디오 " 등과 같이 대체 텍스트를 제공한다 . Ex ) 시력검사용 이미지에 대하여 " 시력 검사용 이미지 " 등과 같이 대체 텍스트를 제공한다 . 20
검사항목 2 1.2.1( 자막 제공 ) 멀티미디어 콘텐츠에는 자막 , 원고 또는 수화를 제 공해야 한다 . 멀티미디어 콘텐츠를 동등하게 인식할 수 있도록 제작하기 위해서는 자 막 , 원고 또는 수화를 제공해야 한다 . 대체 수단에서 가장 중요한 요소 는 멀티미디어 콘텐츠와 동등한 내용을 제공하는 것이다 . 가장 바람직한 방법은 닫힌 자막 (Closed caption) 을 오디오와 동기화시 켜 (Synchronized) 제공하는 것이다 . 대사 없이 영상 (Video) 만 제공 하는 경우 화면 해설 ( 텍스트 , 오디오 , 원고 ) 을 제공하고 , 음성만 제 공하는 경우 자막 , 원고 또는 수화를 제공해야 한다 . 생방송 콘텐츠의 경우 자막 또는 수화의 제공을 이 검사항목의 예외로 인 정한다 . 그러나 생방송 콘텐츠의 경우에도 자막 또는 수화를 제공하는 것이 바람직하다 . 생방송 콘텐츠의 경우에도 검사항목 1 – 사례 (3) 페이지의 2 번과 같이 대체 텍스트를 반드시 제공해야 한다 . 21
검사항목 2 자막으로 인해 수화가 가리지 않도록 하고 , 원고는 페이지를 벗어나지 않 는 수준으로 제공해야 함 . ( 요약정보는 안 됨 ) 사용자가 등록하는 UCC 같은 영상 , 음성 등의 콘텐츠를 제공 시 , 자막 을 등록할 수 있도록 개발 . 음성이 없는 동영상의 경우도 대체 수단이 반드시 제공해야 함 . 22
검사항목 2 자막 관련 제공방법들은 웹 접근성을 고려한 콘텐츠 제작 기법 v2.0(111130) 의 적용 기술 13 ~ 17 확인 . -자막 제공 방법 , 대본 제공 방법 , 수화 동영상의 제공 방법 , 대체텍스트 또는 설명을 제공하는 방법등이 있음 . 잘못된 사례 -자막 , 원고 , 수화 중 어느 한 가지도 제공하지 않는 경우 -동영상의 내용을 요약하여 제공하는 자막 또는 원고의 경우 -대체 수단에 대한 또 다른 대체 수단임을 알려주지 않는 경우 -열린 자막이 수화를 가리는 동영상 -동영상의 해상도가 낮아 수화를 볼 수 없는 경우 23
검사항목 3 1.3.1 ( 색에 무관한 콘텐츠 인식 ) 콘텐츠는 색에 관계없이 인식될 수 있 어야 한다 . 콘텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자나 흑 백 디스플레이 사용자 , 흑백 인쇄물을 보는 사용자가 색을 배제하여도 해 당 콘텐츠를 인식할 수 있도록 제공해야 한다 . [ 오류 사례 ] •그래프 , 차트 , 지도 등… 색상만으로 내용을 분별하도록 제공한 콘텐츠 는 오류 •페이지 네비게이션 , 메뉴 , 현재 위치 등에 대해 명암 , 패턴 등의 변화 없이 색상의 변화만으로 현재의 위치를 표시한 경우도 오류 24
검사항목 3 25
Fujitsu ColorDoctor 활용 다운 : http://www.fujitsu.com/global/accessibility/assistance/cd/download.html •Gray scale ( 흑백 ) •Protanopia ( 제 1 색맹 , 적색맹 ) •Deuteranopia ( 제 2 색맹 , 녹색맹 ) •Tritanopia ( 제 3 색맹 , 청황색맹 ) 검사항목 3 26
Fujitsu ColorSelector 활용 다운 : http://www.fujitsu.com/global/accessibility/assistance/cs/download.html ( 한국어 버전 ) 검사항목 3 27
검사항목 4 1.3.2 ( 명확한 지시 사항 제공 ) 지시 사항은 모양 , 크기 , 위치 , 방향 , 색 , 소리 등에 관계없이 인식될 수 있어야 한다 . 본 검사 항목은 특정 요소를 가리키거나 지시 사항을 전달하는 콘텐츠에 한정해 적용하는 것으로 , 시각이나 청각 등과 같은 특정 감각에만 의존하 여 제공해서는 안 된다는 것이다 . Ex) ‘ 동그란 버튼을 누르시오’ 또는 ‘오른쪽 버튼을 누르시오’ (X) Ex) 둥근 모양의 빨간색 버튼과 초록색 버튼을 제공하고 각 버튼의 레이 블을 각각 ‘확인’ 과 ‘취소’로 구성한 콘텐츠에서 “작성한 서식을 제출하려 면 빨간색 확인 버튼을 누르시오 .” (O) Ex) 온라인 시험 중 사용자에게 비프음으로 정답인지 오답인지를 알려주 면 , 청각 장애 사용자나 스피커가 설치되어 있지 않은 환경에 있는 사용 자는 정답과 오답 여부를 확인할 수 없다 . 최초 기획서를 받을 때 체크 . 28
검사항목 5 검사항목 1.3.3 ( 텍스트 콘텐츠의 명도 대비 ) 텍스트 콘텐츠 와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다 . 웹 페이지에서 보이는 핵심 텍스트 콘텐츠와 배경 간의 충분한 대비를 제 공하여 , 저시력자 , 색각 이상자 , 노인 등도 콘텐츠를 인식할 수 있도록 제공해야 한다 . 다만 , 본문 콘텐츠에 단순히 장식 목적으로만 사용한 글 자 , 마우스나 키보드를 활용하여 초점 (Focus) 을 받았을 때 명도 대비가 커지는 콘텐츠는 예외로 한다 . 폰트 크기에 따른 명도 대비 : 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14 pt 이상의 굵은 폰트를 사용하는 경우에는 명도 대비 를 3:1 까지 낮출 수 있다 . 29
Colour Contrast Analyser 다운로드 : http://www.visionaustralia.org/business-and-professionals/digital-access/resou 검사항목 5 30
Contrast Ratio ( 포토샵 익스텐션 ) 다운로드 : http://a11y.nhncorp.com/download/contrast-ratio/contrast-ratio.zip 설치방법 : http://html.nhncorp.com/accessibility/tool 검사항목 5 31
WCAG Contrast checker ( 파이어폭스 부가기능 ) 애드온 : https://addons.mozilla.org/es/firefox/addon/wcag-contrast-checker/ 설치 및 사용방법 : http://wagunblog.com/wp/?p=76 검사항목 5 32
검사항목 6 1.3.4 ( 배경음 사용 금지 ) 자동으로 재생되는 배경음을 사용하지 않아야 한다 . 웹 페이지에서 자동으로 재생되는 배경음 ( 동영상 , 음성 , 음악 등 ) 으로 인해 콘텐츠를 인식하는 데 방해받지 않아야 한다 . 단 , 3 초 미만의 배경음은 예외로 한다 . 또한 콘텐츠가 제공하는 배경음의 음량을 조절하더라도 화면 낭독 프로그 램의 음량에는 영향을 주지 않아야 한다 . 33
검사항목 6 마우스 오버 또는 키보드 초점을 받으면 자동적으로 배경음이 실행되는 경우 (X) -> 마우스 오버가 아닌 마우스 클릭 ( 또는 Enter 키 ) 에 의하여 애니메이 션 플레이어가 실행되도록 수정 . ( 자동 실행이 아닌 사용자가 실행을… ) 3 초 이상 재생되는 배경음을 사용할 경우 , 반드시 배경음을 제어할 수 있는 수단 ( 멈춤 , 일시정지 , 음량조절 등 ) 을 웹 페이지의 첫 부분에 제공함 . ( 본문 바로가기 이전 ) 34
원칙 2. 운용의 용이 성 35
운용의 용이성 (Operable) 사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션할 수 있어야 한다 . 지침 (4 개 ) 검사 항목 (8 개 ) 2.1( 키보드 접근성 ) 콘텐츠는 키보드로 접근할 수 있어야 한 다 . 2.1.1( 키보드 사용 보장 ) 모든 기능은 키보드만으로 도 사용할 수 있어야 한다 . 2.1.2( 초점 이동 ) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다 . 2.2( 충분한 시간 제공 ) 콘텐 츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다 . 2.2.1( 응답 시간 조절 ) 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다 . 2.2.2( 정지 기능 제공 ) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다 . 2.3( 광과민성 발작 예방 ) 광 과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한 다 . 2.3.1( 깜빡임과 번쩍임 사용 제한 ) 초당 3~50 회 주 기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다 . 2.4( 쉬운 내비게이션 ) 콘텐츠 는 쉽게 내비게이션 할 수 있 어야 한다 . 2.4.1( 반복 영역 건너뛰기 ) 콘텐츠의 반복되는 영역 은 건너뛸 수 있어야 한다 . 2.4.2( 제목 제공 ) 페이지 , 프레임 , 콘텐츠 블록에 는 적절한 제목을 제공해야 한다 . 2.4.3( 적절한 링크 텍스트 ) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다 . 36
검사항목 7 2.1.1 ( 키보드 사용 보장 ) 모든 기능은 키보드만으로도 사용할 수 있어야 한다 . 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다 . ( 이 경우 , 해당 기능을 사용하는 데 필요한 키보드의 조 작횟수의 많고 적음은 고려대상이 아니다 .) 예외 사항 위치 지정 도구의 커서 궤적이 중요한 역할을 하는 콘텐츠 ( 붓질 기능이 필요한 콘텐츠 , 시뮬레이션 콘텐츠 , 지리정보 콘텐츠 , 가상현실 콘텐츠 등 ), 움직임 측정 센서 (Motion sensor) 를 이용하는 콘텐츠는 이 검사 항목 의 예외로 할 수 있다 . 그러나 이 경우에도 위치 지정 도구나 움직임 측정 센서가 필요한 기능을 제외한 나머지 사용자 인터페이스는 키보드만으로 사용할 수 있어야 한다 . 37
검사항목 7 키보드 포커스를 받는 element -a(href 값이 있어야 함 ), area(href 값이 있어야 함 ), button, input, select, textarea -Img, li 등의 onclick 등은 마우스로만 이용이 가능하며 , 키보드 사용자들 은 접근이 불가능 함 . 플래시 콘텐츠의 wmode 값은 기본적으로 transparent 또는 opaque 로 지정하게 되면 MSAA 를 사용할 수 없어 화면낭독기로 인식이 불가함 . -단 , 링크와 같은 특정기능 없이 단순정보 전달이나 디자인용 등 키보드 포커스가 불필요한 플래시 콘텐츠의 경우 , wmode 를 window 로 지정하면 키보드 포커스가 브라우저 메뉴영역에 갇혀 더 이상 운용이 어려운 상황 이 초래됨 . 이 경우 transparent 또는 opaque 를 사용하되 정보가 있는 경우 대체 콘텐츠로 제공하는 등 키보드 사용이 가능하도록 제공해야 함 . 웹 애플리케이션 제공 시 키보드 이용 보장 -대표적 예로는 웹 에디터 ( 모든 기능이 키보드로 이동 가능해야 하며 실 행 또한 가능해야 한다 . 그리고 기능 영역과 작성 영역 간의 이동 역시 가능해야 한다 .) -단축키를 제공하는 경우 사용자에게 단축키에 대한 정보를 제공해야 한 다 . 38
검사항목 7 마우스 드래그와 드롭 기능은 마우스로만 구현이 가능한 기능이다 . 또한 콘텐츠의 특성에 따라 유사한 기능을 키보드로 수행할 수 있도록 제공해 야 한다 . 1) 체크 상자를 이용한 상품 선택 : 드래그앤드롭으로 장바구니에 담는 기능을 제공하는 경우 , 모든 상품에 장바구니에 담기용 체크 상자를 제공 하고 ' 장바구니에 담기 ' 버튼을 클릭하면 체크상자가 ' 체크된 ' 상품을 장 바구니에 담도록 구현하는 것도 가능하다 . 2) 상품 선택 버튼을 이용한 방법 : 또 다른 방법은 상품별로 ' 장바구니 에 담기 ' 버튼을 제공하고 이 버튼을 누를때마다 해당 상품을 장바구니 목록에 포함되도록 구현하는 것도 가능하다 . 상기 1), 2) 방법의 기능에 추가하여 마우스 드래그 및 드롭 기능을 이용 하여 상품을 선택하여 장바구니에 담는 기능기능을 함께 제공하면 마우스 를 사용할 수 있는 사용자의 사용성도 함께 높일 수 있다 . 여기서 중요한 점은 마우스 드래그 및 드롭 방법만을 사용하도록 구현해서는 안 된다는 것이다 . 39
검사항목 7 컨텐츠를 tab 으로 이동해서 모든 기능에 접근이 가능한지 먼저 체크 . 마우스와 키보드 이벤트 핸들러를 동시에 제공했는지 체크한다 . -onmousedown = onkeydown, onmouseup = onkeyup, onmouseover = onfocus, onmouseout = onblur ( 체크 후 판단 ) -onclick 이벤트 핸들러는 키보드로 어떤 객체를 선택했을 경우 발생하며 마우스의 버튼을 눌렀다 놓았을 경우에도 발생하는 이벤트 핸들러이다 . 여기서 onclick 과 onkeypress 를 같이 주면 키보드 사용시 오류 발생 . (onkeypress 삭제 ) -onfocus = “this.blur();” 를 사용하지 않아야 함 . 잘못된 사례 : 키보드만으로 이전 입력 서식 이동이 불가능한 경우 주민등록번호의 앞 6 자리를 입력하면 초점이 자동적으로 주민등록번호 뒷 7 자리로 이동하는 경우 , shift + tab 키를 이용하여 초점을 첫 번째 입 력상자로 이동시키더라도 초점이 자동적으로 두 번째 입력 상자로 이동하40
검사항목 8 2.1.2 ( 초점 이동 ) 키보드에 의한 초점은 논리적으로 이동해야 하며 , 시각 적으로 구별할 수 있어야 한다 . 웹 페이지에서 제공하는 모든 기능을 키보드만으로 사용하여 운용할 경우 에도 초점이 논리적인 순서에 따라 이동하도록 제공해야 하며 , 조작이 불 가능한 상태가 되거나 갑작스러운 페이지의 전환 등이 일어나지 않아야 한다 . 또한 저시력자 , 지체 장애인들이 초점을 받은 콘텐츠를 시각적으로 인지 할 수 있도록 시각적으로 표현하여야 한다 . 41
검사항목 8 Tab 키와 Shift + Tab 키에 의한 초점의 이동 순서는 논리적이며 일관성 이 있어야 한다 . -키보드 내비게이션의 순서는 일반적으로 웹 페이지의 좌측 상단 영역에 서 우측 하단 영역으로 이동하는 것이 원칙이다 . -Ex) 로그인의 경우 , ‘ 아이디 -> 비빌번호 -> 로그인’ 순서 링크나 입력 필드 , 버튼 등에 초점이 가면 시각적으로 테두리가 생기는 것을 일부러 없애는 경우가 있다 . 그러나 시각적인 테두리는 키보드로 웹 페이지를 탐색하는 사람들에게는 현재의 초점의 위치를 보여주는 매우 중 요한 정보가 된다 . -초점을 받은 위치에 초점을 없애게 되면 키보드 내비게이션이 전혀 불가 능하게 되어 키보드에 의존하는 대부분의 장애인들이 웹을 사용할 수 없 게 될 뿐만 아니라 일반 사용자들도 매우 중요한 단서인 초점 위치를 잃 어버려 사용성을 떨어뜨리는 요인이 된다 . 42
검사항목 8 초점이 사라지는 경우들… ( 일부 브라우져에서만 사라지는 경우도 있음 ) •HTML : <a href=“a.html” onfocus=“this.blur();”>JS 오용 사례 </a> •HTML : <a href=“a.html”>CSS outline 오용 사례 </a> CSS : a { outline : none; } •HTML : <li><a href=“a.html”>CSS overflow 오용 사례 </a></li> CSS : li { overflow: hidden; width: 200px; height: 200px; } a { display: inline-block; width: 200px; height: 200px; } •HTML : <li><a href=“a.html”><img src=“ 경도” alt=“a 안의 요소” /></a></li> CSS : img { position 값 , display 값이 있는 경우 } <area> 요소의 진행 순서에 의미가 있으나 키보드 접근 순서가 일치하지 않으면 오류 . tabindex 는 가급적 사용하지 않는 것이 좋다 . -Tabindex 속성값이 0 이 아닌 다른 값이 지정되면 키보드 이동 순서가 순서대로 이동하기 전에 tabindex 가 지정된 곳으로 먼저 이동되는 문제가 발생하게 된다 . 43
검사항목 9 2.2.1 ( 응답 시간 조절 ) 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다 . 웹 콘텐츠 제작 시 시간 제한이 있는 콘텐츠는 가급적 제공하지 않는 것 이 바람직하며 , 보안 등의 사유로 시간 제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다 . 시간제한이 있는 콘텐츠는 그 변화를 사용자가 제어할 수 없는 콘텐츠이 다 . •일정한 시간마다 그 내용의 일부 또는 전체가 자동적으로 갱신되는 콘텐 츠 •일정한 시간이 경과하면 다른 웹 페이지로 이동하도록 구성된 콘텐츠 •사용자가 제어하지 않아도 자동적으로 스크롤되는 콘텐츠 •일정시간 후 사라지거나 접근이 차단되는 콘텐츠 등이 시간제한이 있는 콘텐츠이다 . 44
검사항목 9 반응 시간 조절 : 웹 콘텐츠에 대해 반응 시간을 지정한 경우 , 사용자가 반응 시간에 제한 없이 웹 콘텐츠를 이용할 수 있도록 하기 위해 반응 시 간이 종료되기 이전 , 사용자가 다음 중 한 가지 방법을 선택하여 조절할 수 있는 기능을 제공해야 한다 . 또한 반응 시간 조절 기능은 충분한 시간 ( 최소 20 초 이상 ) 을 두고 사전에 알려 주어야 한다 . -1) 시간 제한을 해제할 수 있어야 한다 . -2) 시간 제한을 연장할 수 있어야 한다 . 예외 사항 -시간 제한이 있는 온라인 경매 , 실시간 게임 등과 같이 반응 시간의 조 절이 원천적으로 허용되지 않는 경우에는 개별적인 반응 시간 조절이 불 가능하다 . 따라서 이러한 웹 콘텐츠의 경우에는 본 검사 항목의 적용을 받지 않는다 . 다만 , 이 경우에도 사용자에게 시간 제한이 있다는 것을 미 리 알려주고 , 종료되었을 경우에도 이를 알려주어야 한다 . 45
검사항목 9 javascript 나 meta 를 이용한 페이지를 자동으로 이동시키는 방법은 브라 우저에서의 히스토리를 이용하는데 문제가 있으므로 , 웹 서버의 설정으로 리다이렉트를 시켜주거나 서버측 웹 언어의 리다이렉션 기능을 사용해야 합니다 . 바이러스 자동 체크 사례 -웹 페이지에 접속하자마자 특정 서비스 ( 예를 들어 , 온라인 바이러스 체 크 등 ) 를 수행할 경우 사용자는 자신이 이동하려 했던 페이지가 아니라 다른 페이지로 이동이 되어버리게 되어 이용에 혼란을 줄 수 있다 . -사용자가 바이러스 체크를 시작할 수 있도록 컨트롤을 제공해 주어야 한 다 . 또한 사용자가 어떤 서비스를 선택한 경우에도 해당 서비스를 수행하 는 과정이 복잡하고 오랜 시간이 걸린다면 서비스를 중간에 멈추고 목적 지 URL 로 되돌아 갈수 있는 수단을 제공해야 한다 . 46
검사항목 10 2.2.2 ( 정지 기능 제공 ) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다 . 저시력자나 지적장애인 등은 이동하거나 스크롤되는 콘텐츠를 인지하기가 어 렵다 . 때문에 웹 콘텐츠는 사용자가 이동이나 스크롤을 일시 정지시키거나 지 나간 콘텐츠 또는 앞으로 나타날 콘텐츠를 사용할 수 있도록 " 앞으로 이동 ", " 뒤로 이동 ", " 정지 " 등의 컨트롤을 제공해야 한다 . 정지버튼 없이 포커스가 갔을 때 자동으로 변경되지 않도록 멈추는 경우 -키보드 사용시의 접근성만 고려한다면 정지버튼이 필수가 되지 않겠지만 마 우스 이용자의 경우 마우스 오버시 정지가 되는 기능을 제공하더라도 사용자 는 마우스 오버 상태를 유지하지 못할 가능성이 있습니다 . 그래서 정지버튼을 제공하는 것을 권장 . 47
검사항목 10 사용자의 요구와 무관하게 콘텐츠가 자동적으로 업데이트되는 기능의 경우 사용자는 불편함을 겪게 된다 . 따라서 업데이트를 자동적으로 발생시키는 대 신 , 사용자가 자신의 필요에 따라 업데이트를 요청할 수 있는 기능을 제공해 야 한다 . 또한 자동으로 업데이트되는 콘텐츠를 사용자는 멈출 수 있어야 한다 . 이를 위 해 " 일시정지 " 버튼을 제공하여 자동으로 업데이트되고 있는 콘텐츠를 사용 자가 원하는 만큼 정지시킨 뒤 이용이 다 끝난 뒤 다시 업데이트될 수 있도록 해야 한다 . 48
검사항목 11 2.3.1 ( 깜빡임과 번쩍임 사용 제한 ) 초당 3~50 회 주기로 깜빡이거나 번쩍이 는 콘텐츠를 제공하지 않아야 한다 . 깜빡이는 콘텐츠는 사용자의 시선을 끌기 위한 목적으로 주로 사용되는 콘텐 츠이다 . 그러나 깜빡임의 주기와 크기 , 변화의 정도에 따라 광과민성 증후군 이 있는 사용자에게 발작이나 졸도 등을 유발할 수 있으므로 깜빡이는 콘텐츠 의 사용에 유의하여야 한다 . 포켓몬 사례 -1997 년 일본의 유명 애니메이션 ' 포켓몬스터 ' 의 38 번째 에피소드인 ' 전능 전사 폴리곤 ' 의 한 장면에서 빨간색과 파란색이 교대로 반복되는 섬광 장면이 나오자 TV 로 이를 시청하던 어린이들이 발작을 일으킨 사고가 있었다 . 이 사 고로 어린이 685 명이 구급차로 병원에 실려 갔으며 이들 중 150 여 명은 병원 에 입원한 바 있다 . 일본에서는 어린이들의 발작 원인으로 애니메이션의 섬광 이미지로 인한 광과 민성 발작 현상으로 결론내고 관련 업계와 방송국에 주의 조치를 내린바 있다 . 49
검사항목 11 콘텐츠의 움직임 , 번쩍임 , 깜빡임 등이 페이지를 사용하거나 이해하는 데 필 수 적이며 , 사용자가 그 기능을 활성화시키거나 멈출 수 있는 컨트롤을 제공하기 어려운 경우 다음과 같은 메시지 상자를 이용하여 사용자에게 이들 움직임 , 번쩍임 , 깜빡임이 있는 페이지로 이동함을 알리고 사용자가 이 페이지로 이동 할 것인가를 결정할 수 있도록 한다 . 50
검사항목 11 Photosensitive Epilepsy Analysis Tool 다운로드 : http://trace.wisc.edu/peat/#download 사용법 : Capture -> Start capture 1.화면 캡쳐 2.URL 3.파일 (avi 만 ) 51
검사항목 12 2.4.1 ( 반복 영역 건너뛰기 ) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다 . 반복되는 영역을 건너뛸 수 있는 방법 -웹 페이지가 제공하는 핵심 콘텐츠가 위치한 곳으로 직접 이동하는 건너뛰기 링크를 제공한다 . 건너뛰기 링크는 시각 장애인에게 반드시 필요한 기능이 다 . -이 기능은 지체장애인에게도 효과적인 웹 콘텐츠 운용을 위해 필요한 기능이 므로 , 메뉴 건너뛰기 링크는 화면에 보이도록 구현하는 것이 좋다 . 52
검사항목 12 여러 개의 건너뛰기 링크 제공할 때 -건너뛰기 기능은 웹 페이지의 가장 앞에 위치해야 한다 . 여러 개의 건너뛰기 링크를 제공하는 경우에는 핵심 콘텐츠로 이동하기 위한 건너뛰기 링크를 가 장 앞에 위치시킨다 . 만일 배경음 바로가기 링크 (1.3.4 참조 ) 가 있는 경우에 는 그 다음에 위치시킨다 . 건너뛰기 링크의 용도 표현 건너뛰기 링크에 대한 대체 텍스트 또는 링크 텍스트는 다음 예와 같이 어떤 영 역을 우회하는지 또는 목적지가 어디인지를 명확히 표시해야 한다 . 1) “oo 링크 영역 건너뛰기” 2) “oo 을 건너뛰어 ㅁㅁ으로 이동” 등 참고자료 Skip Navigation 은 Quick Link 가 아닙니다 . - jangkunblog ( http://www.jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/ ) 53
검사항목 12 (<a href=“#test”> 본문바로가기 </a>) 소스와 직접 반복영역 건너뛰기를 비교해야 함 . -href=“# 아이디이름” 으로 연결된 내용은 모두 검색 . -이 부분에서는 연결이 되어 있는지를 체크하고 , 키보드로도 실제 작동여부를 한 번 더 체크 . 54
검사항목 13 2.4.2 ( 제목 제공 ) 페이지 , 프레임 , 콘텐츠 블록에는 적절한 제목을 제공해야 한다 . 웹 페이지 제목 제공 -모든 웹 페이지가 해당 내용을 간단명료하게 기술한 제목을 포함하고 있을 경우 여러 개의 웹 페이지가 열려 있더라도 사용자 ( 예 : 시각 장애인 , 인지장애인 , 심각한 지체장애인 등 ) 는 해당 제목을 통해 초점이 주어진 웹 페이지가 어떠한 내용을 담고 있는지를 알 수 있기 때문에 , 모든 웹 페이지에는 해당 페이지를 간 단명료하게 설명한 제목을 제공해야 한다 . -또한 , 웹 페이지 제목은 서로 배타적이어야 한다 . ( 게시판의 ‘목록 , 읽기 , 쓰 기’ 페이지의 제목을 읽기 ( 해당 글의 제목 ), 쓰기 등으로 구분하는 것을 권장 ) 프레임 제목 제공 -모든 웹 페이지의 프레임에는 각 프레임을 설명하는 간단명료한 제목을 제공해 야 한다 . 아무런 내용이 없는 프레임에는 “빈 프레임” 등으로 제목을 제공한다 . -“ 메인 메뉴” , “ 참고 문헌” 등은 적절 , “top 프레임” , “main 프레임”등은 부적 절 55
검사항목 13 콘텐츠 블록 -콘텐츠 블록에는 적절한 제목을 제공해야 한다 . 콘텐츠 블록에 제목을 제공 하는 경우에 <h1>, <h2> 태그를 부여하면 제목과 본문을 구분할 수 있으며 , 제목간 이동이 가능하다 . 특수 기호 ( )▩▩▩▩ 사용 제한 -웹 페이지 , 프레임 또는 콘텐츠 블록의 제목은 문장의 하나로 간주하여 불필 요한 특수 기호를 반복하여 사용하지 않는다 . 56
검사항목 13 •페이지 제목 체크 ( 유니크 ) •프레임 제목 체크 •콘텐츠 블록 제목 체크 57
검사항목 14 2.4.3 ( 적절한 링크 텍스트 ) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다 . 링크 텍스트를 “여기를 클릭하세요 .” 나 “여기”와 같은 애매모호한 표현을 사용 하면 시각장애인이나 인지장애인 뿐만 아니라 비장애인들도 링크를 클릭했을 때 어떤 반응이나 어떤 페이지로 이동될 지 예측하기 어렵다 . 따라서 링크 텍스트를 직관적이고 의미 있게 구성하여 사용자가 링크의 용도 나 목적지를 명확히 알 수 있게 제공해야 한다 . 링크 텍스트를 단순히 URL 경로로만 제공하지 않는 것을 권장 . Ex) “ 여기를 클릭해 주세요 .” 보다는 “다른 테스트를 하고 싶으시다면 클릭해 주세요 .” 라는 문장 전체를 링크 텍스트로 사용하는 것이 좋다 . Ex) 58
원칙 3. 이해의 용이 성 59
이해의 용이성 (Understandable) 콘텐츠는 이해할 수 있어야 한다 . 지침 (4 개 ) 검사항목 (6 개 ) 3.1( 가독성 ) 콘텐츠는 읽고 이해하기 쉬워야 한다 . 3.1.1( 기본 언어 표시 ) 주로 사용하는 언어를 명 시해야 한다 . 3.2( 예측 가능성 ) 콘텐츠의 기능과 실행결과는 예측 가능 해야 한다 . 3.2.1( 사용자 요구에 따른 실행 ) 사용자가 의도 하지 않은 기능 ( 새 창 , 초점 변화 등 ) 은 실행되지 않아야 한다 . 3.3( 콘텐츠의 논리성 ) 콘텐 츠는 논리적으로 구성해야 한 다 . 3.3.1( 콘텐츠의 선형화 ) 콘텐츠는 논리적인 순서 로 제공해야 한다 . 3.3.2( 표의 구성 ) 표는 이해하기 쉽게 구성해야 한다 . 3.4( 입력 도움 ) 입력 오류를 방지하거나 정정할 수 있어야 한다 . 3.4.1( 레이블 제공 ) 입력 서식에는 대응하는 레 이블을 제공해야 한다 . 3.4.2( 오류 정정 ) 입력 오류를 정정할 수 있는 방법을 제공해야 한다 . 60
검사항목 15 3.1.1 ( 기본 언어 표시 ) 주로 사용하는 언어를 명시해야 한다 . 웹 페이지의 언어 명시 -웹 브라우저는 웹 페이지를 구성하는 텍스트 콘텐츠의 언어 정보를 바탕으로 텍스트 콘텐츠를 화면에 표시하거나 보조 기기로 제공한다 . 화면 낭독 프로그 램을 사용하는 경우 , 텍스트 콘텐츠의 언어 정보를 화면 낭독 프로그램으로 제공하여 정확한 발음이 가능하도록 화면 낭독 프로그램을 제어하기도 한다 . 따라서 웹 페이지를 구성하는 기본 언어는 정확히 명시해야 한다 . -웹 페이지에서 주로 사용하는 언어는 페이지의 상단에 html 태그에 lang 속 성을 이용하여 다음과 같이 지정한다 . (ex: <html lang=“ko”> ) 참고자료 -지침에서는 해당 페이지의 주요 사용 언어만을 최소한으로 지정할 것을 요구 하고 있다 . 이렇게 함으로써 , 화면 낭독 프로그램이 페이지의 내용을 해당 언 어로 정확하게 읽어주도록 지시하는 역할을 한다 . 그러나 페이지 안에서 여러 개의 언어가 번갈아 가면서 쓰이는 경우 , 변경되는 언어가 나올 때마다 언어 를 지정해 주는 것이 좋다 . (ex : <p> 중국어로는 " 안녕하세요 " 라고 인사할 때 <span lang="zh"> 你好 </span> 라고 말합니다 .</p> ) 61
검사항목 15 브라우져에서 소스보기 (IE 를 사용 ) 를 클릭해서 직접 체크함 . -간혹 html 이 제대로 작성되지 않은 페이지들에서 , tool 로 검사할 경우 간혹 제대로 검출을 못하는 경우들이 발생함 . ( 마크업 오류로 인하여… ) 62
검사항목 16 3.2.1 ( 사용자 요구에 따른 실행 ) 사용자가 의도하지 않은 기능 ( 새 창 , 초점 변화 등 ) 은 실행되지 않아야 한다 . 서식 컨트롤이나 사용자 입력이 초점을 받았을 때 의도하지 않는 기능이 자동 적으로 실행되지 않도록 콘텐츠를 개발해야 한다 . 사용자가 마우스로 클릭하 거나 키보드를 이용하여 입력한 후 기능이 실행되어야 하며 , 사용자가 예측할 수 없는 상황에서 정보를 제공하지 않아야 한다 . 특히 사용자가 인지하지 못 한 상황에서 새 창 , 팝업 창 등을 제공하지 않아야 한다 . 63
검사항목 16 새 창이 열릴 것을 알려주는 방법 64
검사항목 16 이동 버튼이 없는 목록 선택 상자 개선방법 이동버튼 제공 , form 의 Onsubmit 활용 . 65
검사항목 16 66
검사항목 16 로지텍이라는 제조사를 선택하자마자 바로 로지텍 마우스의 목록이 다음에 나 오게 된다 . 개선 체크 상자를 다 선택한 후 별도의 [ 확인 ] 이나 [ 제출 ] 버튼을 누르도록 하여 , 사 용자의 선택이 전송된 후 상품 목록이 화면에 나오도록 한다 . (ex: “ 오늘 하루 더 이상 보지 않기” 체크 후 팝업이 닫히는 경우도 오류 ) 67
검사항목 16 주민등록번호 앞자리 입력 후 자동으로 뒷자리로 포커스가 발생하는 경우 개선 포커스가 자동으로 이동되지 않게 수정 . 68
국내 웹 페이지들에서는 한시적인 사안을 홍보하거나 전달할 때 사용자가 원 하지 않는 팝업 창을 많이 사용한다 . 그러나 예측되지 않은 팝업은 사용자를 혼란스럽게 할 뿐만 아니라 시각장애인 , 인지 능력이 떨어지는 사람 , 운동 능 력이 떨어지는 사람들에게 웹 탐색을 어렵게 만드는 요인이 된다 . 개선방법 : 사용자가 원하지 않는 팝업 창은 제공하지 않아야 한다 . 검사항목 16 69
검사항목 16 레이어 팝업으로 구현 하는 경우 -레이어 팝업의 경우 기존의 콘텐츠를 가릴 수 있어 바로 닫을 수 있는 콘트롤 을 제공해야 하고 전후의 콘텐츠에 대한 콘텐츠 순서를 잘 구성하여 레이어 팝 업을 구성해야 합니다 . -결국 레이어는 페이지내에 콘텐츠가 구성되는것이기 때문에 콘텐츠의 순서를 잘 고려해야 하는 것 -레이어 닫기 버튼의 경우 . ( 닫기 버튼은 연결 (anchor) 의 의미나 기능이 아니 기 때문에 button 요소를 사용권장 . 닫기 버튼을 누를 때에도 JS 를 사용해서 인위적으로 a 요소로 초점을 옮겨주어야 합니다 . 왜냐하면 닫기 버튼을 누르 는 타겟 레이어가 display:none 이 되어버리면 초점이 페이지 최상단으로 되돌 아 가기 때문 .) 참고자료 : 레이어 열기 / 닫기 키보드 접근성 . (http ://naradesign.net/wp/2013/04/24/1996/) 70
검사항목 16 새 창을 체크 하는 방법 -사용자가 원하지 않게 새 창을 제공하려면 .open 을 사용해야 한다 . -소스에서 .open 을 검색 . ( 새 창을 제공하고 있는 함수들을 정리해서 해 당 함수들의 사용을 검색해서 직접 비교 – 이때 , 자바스크립트 link 된 파 일들도 모두 검색 ) “ 새창” or “ 새 창”을 검색해서 target=“_blank”, window.open 등을 함께 사용하 는지도 체크 . 71
검사항목 17 3.3.1 ( 콘텐츠의 선형화 ) 콘텐츠는 논리적인 순서로 제공해야 한다 . 웹 페이지에 제공되는 콘텐츠는 시각적으로 보았을 때 논리적인 순서로 보이 지만 , 그것을 선형적으로 풀어보면 논리가 어긋나지는 않은지 주의해야 한 다 . 화면낭독 프로그램과 같은 보조 기기는 전체 콘텐츠를 보통 소스 코드 순 서대로 풀어서 접근하게 딘다 . 이 때 시각적으로 보였던 순서와 달리 논리적 인 순서가 흐트러질 경우 , 보조 기기 사용자들은 내용을 이해할 수 없게 된다 . 72
검사항목 17 개선방법 : ul > li > ul > li 구조로 변경 . 73
검사항목 17 개선 74
검사항목 17 Firefox 부가기능 Web Developer Extension 을 활용 . CSS 가 제거된 페이지가 나옴 . 75
검사항목 18 3.3.2 ( 표의 구성 ) 표는 이해하기 쉽게 구성해야 한다 . 복잡한 데이터를 표로 제공할 경우 , 시각장애인 등도 이해할 수 있도록 표의 이 해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다 . 행과 열이 얽힌 표 에 담긴 정보를 음성으로 듣고 이해하는 것은 쉽지 않다 . 따라서 HTML 에서는 표의 실제 데이터와 그것의 헤더 ( 제목 열과 제목 행 ) 를 짝지어 주는 몇 가지 방법을 제공한다 . 그렇게 하면 , 복잡한 표를 풀어서 읽 을 때에도 내용을 이해할 수 있게 된다 . 76
검사항목 18 표 제목을 <caption> 으로 제공 , 표의 구조 또는 내용에 대한 요약을 summary 로 제공 (summary 와 caption 을 같은 용도로 사용하지 않아야 한 다 .) ※ 배치용 테이블에는 (th, caption 요소 , summary 속성을 사용하지 않아야 함 ) 77
검사항목 18 표의 제목과 요약 설명을 제공하는 것만으로 표의 내용을 정확히 이해할 수는 없다 . 중요한 것은 표에 담긴 데이터를 이해할 수 있게 하려면 , 표의 헤더 셀 과 데이터 셀을 명확히 구분해 주어야 한다 . 헤더 셀이란 다른 데이터들에 대한 제목 셀을 뜻하고 , HTML 마크업에서는 일반적인 <td> 가 아닌 <th> 라는 요 소를 사용한다 . 78
검사항목 18 표가 복잡해지면 단순히 <th> 를 지정하는 것으로 표의 헤더 셀과 데이 터 셀을 짝지을 수 없는 경우가 생긴다 . 이 경우 두 가지 방법 (id, hedaers 속 성을 이용하는 방법과 scope 를 이용하는 방법 ) 중 하나로 헤더 셀과 데이터 셀을 짝지어준다 . 79
검사항목 18 Pajet 을 활용 한 예 . (caption 과 summary 가 없이 th 만 사용한 table) 80
검사항목 19 3.4.1 ( 레이블 제공 ) 입력 서식에는 대응하는 레이블을 제공해야 한다 . 온라인 서식에서 사용되는 각 컨트롤 ( 예 : 텍스트 입력 상자 , 라디오 선택 버 튼 , 체크 상자 , 드롭다운 메뉴 등 ) 의 역할을 설명해 주는 제목 텍스트를 레이블이 라 한다 . (input type=“image | hidden | submit | button | reset” 을 제외한 모든 <input>, <textarea>, <select> 요소에 1:1 대응하는 <label> 요소를 제공해야 한다 .) 81
검사항목 19 명시적 레이블링 (explicit labeling) 과 암묵적 레이블링 (implicit labeling) 예전에는 <label> 요소를 쓸 때 레이블이 입력 서식을 감싸도록 하는 암묵적 인 레이블링을 허용하거나 권장하였다 . ( 암묵적인 방법 : <label> 주소 : <input type="text" name=“address" id="address" size="50"></label>) 암묵적인 방법을 사용함으로써 접근성을 보장하도록 하였다 . 그러나 이러한 방법은 <label> 과 입력 서식이 물리적으로 떨어질 수밖에 없는 상황 ( 예를 들 어 , 표의 서로 다른 셀에 들어가야 하는 상황 ) 에서 쓰기 어려울 뿐만 아니라 현재의 화면 낭독 프로그램에서 제대로 레이블을 인식하지 못하는 경우가 많 다 . 따라서 <label> 을 사용할 때 for 속성을 사용하여 어떤 입력 서식과 짝이 지어 지는지 명확하게 표시하는 명시적인 레이블링 방법을 사용해야 한다 . ( 명시적인 방법 : <label for="address"> 주소 :</label> <input type="text" name=“address" id="address“ size="50">) 82
검사항목 19 검색 창 옆에 검색 대상의 종류를 선택하는 목록 상자를 제공하는 경우 별도로 검색 대상이라고 레이블을 표시할 공간이 없으므로 , 목록상자의 레이블을 title 로 제공할 수 있다 . 83
검사항목 19 데이터 테이블에서 제목 행과 제목열을 표시하는 마크업 (<th> 등 ) 을 사 용했다고 하더라도 일반 데이터 셀에 서식 요소를 넣었을 경우 반드시 title 을 넣어주지 않으면 서식 에 무슨 값을 넣어야 하는 지 알 방법이 없다 . 84
검사항목 19 서식 컨트롤이 매우 많으며 , 이것들이 논리적으로 몇 개 집단으로 묶는 것이 전 체적으로 서식들을 이해하는 데 도움이 된다면 , 묶어주는 것이 좋다 . 85
검사항목 19 PAJET 을 이용한 체크 . 86
검사항목 20 3.4.2 ( 오류 정정 ) 입력 오류를 정정할 수 있는 방법을 제공해야 한다 . 입력 서식 작성 시 오류가 발생하지 않도록 미리 어떤 값을 넣어야 하는지 안 내를 해주고 , 만약 그래도 실수로 오류가 발생하는 경우 , 어디에서 어떤 오류 가 났는지 사용자가 알 수 있어야 하고 , 이를 정정할 수 있는 방법을 제공해야 한 다 . 오류가 생겼을 때 많이 쓰는 방법은 서식 전체를 다시 보여주고 , 오류가 발생 한 필드에 별도의 표시를 했는데 , 이것만으로는 충분하지 않다 . 화면 낭독 프로그램 사용자의 경우 , 오류가 생긴 필드에 순차적으로 접근하기 전까지는 무엇이 잘못되었는지 알 수가 없어 서식 전체가 작동하지 않는 것으 로 여기고 입력을 포기할 가능성이 있다 . 입력에 오류가 생겼을 때 그것을 보조 기술 사용자들이 알 수 있게 하고 , 오류 내용에 대한 설명에 접근할 수 있도록 하는 것이 이 검사 항목의 목적이다 . 87
검사항목 20 주의할 점 -입력 값의 오류를 검사하는 데 전적으로 자바스크립트와 같은 클라이언트측 스크립트 기술에만 의존해서는 안 된다는 것이다 . 클라이언트측 기술은 값이 서버에 전송되기 전에 유효성 검사를 빠르게 할 수 있는 장점이 있지만 , 스크 립트가 작동하지 않는 환경에서는 서버에 잘못된 값이 그대로 제출되어 데이 터베이스에 오류를 야기할 가능성이 있다 . 따라서 클라이언트측 오류 검사 기 능은 부가적으로 사용자 편의성을 위해 제공하는 것이고 , 사용자가 최종적으 로 값을 제출할 때 반드시 서버측에서 오류를 검사해야 한다 . -해당 서식의 전송버튼을 눌렀을 때 , 입력 내용이 모두 사라지면 안 된다 . 88
검사항목 20 서식 값에 대한 적합성 검사를 순전히 클라이언트측 자바스크립트로만 운용하 는 것은 위험하고 , 접근 가능하지 않다 . 어떤 이유이든지 사용자가 자바스크 립트를 사용하지 않거나 꺼놓은 경우에도 서버측에서 하는 검사를 생략할 수 없기 때문에 <form action=""> 값으로는 반드시 서버측 URI 를 넣어주어야 한 다 . 잘못된 예 개선 다음과 같이 서버측 처리 프로그램을 지정해 주되 , 자바스크립트 함수도 함께 지정해 주면 된다 . ( 참고자료 : 89
검사항목 20 입력 값의 형식 , 범위 , 예제를 미리 안내해 주는 예 HTML 순서는 <label for=“userId”> 아이디 </label> <span>4~24 자리의 영문 소문자 , 숫자만 사용 가능 </span> <input type=“text” id=“userId” /> CSS 로 구현 . 90
검사항목 20 잘못된 사례 : 오류 정보를 확인한 후 오류 발생 페이지로 돌아가지 못 하는 경우 해당 예제는 어떤 오류인지에 대한 설명이 없어 무엇이 잘못 되었는지 알 수도 없고 , 브라우저의 [ 뒤로 가기 ] 버튼을 눌러서 뒤로 가면 서식 자체가 사라져 버려 작동하지 않는다 . 오류 안내 페이지에서도 원래의 회원 가입 페이지로 돌아가는 링크가 없이 아 예 전체 사이트의 초기 ( 홈 ) 화면으로 가도록 하고 있기 때문에 , 회원 가입 페 이지를 다시 찾아간 다음 , 모든 정보를 처음부터 다시 입력해야 한다 . 91
원칙 4. 견고성 92
견고성 (Robust) 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다 . 지침 (2 개 ) 검사 항목 (2 개 ) 4.1( 문법 준수 ) 웹 콘텐츠는 마 크업 언어의 문법을 준수해야 한다 . 4.1.1( 마크업 오류 방지 ) 마크업 언어의 요소 는 열고 닫음 , 중첩 관계 및 속성 선언에 오류 가 없어야 한다 . 4.2( 웹 애플리케이션 접근성 ) 웹 애플리케이션은 접근성이 있어야 한다 . 4.2.1( 웹 애플리케이션 접근성 준수 ) 콘텐츠 에 포함된 웹 애플리케이션은 접근성이 있어야 한다 . 93
검사항목 21 4.1.1 ( 마크업 오류 방지 ) 마크업 언어의 요소는 열고 닫음 , 중첩 관계 및 속 성 선언에 오류가 없어야 한다 . 태그의 열고 닫음 -마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 시 작 태그와 끝나는 태그가 정의되어야 한다 . 94
검사항목 21 < 참고 > HTML 과 XHTML 의 차이점 XHTML 은 HTML 을 XML 의 형식으로 구성한 XML 문서의 한 종류다 . HTML 과는 달리 , XHTML 은 문법이 엄격하여 표준 XML 해석기 (parser) 로 해석이 가능하다 . XHTML 1.0 과 XHTML 1.1 이 현재 W3C 의 권고안이다 . HTML 과 XHTML 의 주요 차이점은 다음과 같다 . •태그의 열고 닫음이 명확해야 한다 . •단독으로 사용되는 태그도 닫는 표기를 해야 한다 . •속성 값은 따옴표로 묶어야 한다 . •대소문자를 엄격하게 구분한다 . •축약형 속성을 사용하지 않는다 . •스크립트와 스타일은 CDATA 로 표기한다 . 참고 : XHTML 과 HTML 의 차이 (wystan) ( http://blog.wystan.net/2007/05/24/xhtml-vs-html ) < 참고 > 닫는 태그의 생략이 가능한 경우 다음 HTML 태그는 닫는 태그의 생략이 가능하다 . html, head, body, p, li, dt, dd, thead, tbody, tfoot, colgroup, tr, th, td, option 보 다 자세한 HTML 과 그밖에 마크업언어에 대한 정보는 W3C 웹사이트에서 확 인할 수 있다 . HTML 4.01 Specification ( http://www.w3.org/TR/html401/ ) 95
검사항목 21 태그의 중첩 -열고 닫는 태그가 나타내는 요소는 포함관계가 어긋나지 않아야 한다 . 또한 마크업 언어의 속성을 사용할 경우 , 해당 마크업의 문법을 최대한 준수하여 제공하는 것이 바람직하다 . 공지사항을 링크 목록으로 구현하는 과정에서 각 링크 항목의 닫는 태그 (</a>) 를 누락한 사례다 . 96
검사항목 21 속성 이름과 속성 값의 정확한 사용 -중복된 속성 제공 -따옴표 누락 -속성과 속성 사이에 공백이 누락 -속성 값을 따옴표로 구분하여 제공하지 않는 예 . ( 속성 값이 빈칸을 포함하는 경우 반드시 따옴표를 이용하여 표시해야 한다 .) 97
검사항목 21 -속성 값에 따옴표를 사용해야 할 경우 , 따옴표를 그냥 사용하면 속성 값의 종 결 문자로 인식하기 때문에 값으로 사용할 때 &quot; 로 사용해야 한다 . id 속성 값 -하나의 마크업 문서에는 같은 id 값을 가진 요소가 존재해서는 안 되므로 , id 값을 중복되지 않도록 사용해야 한다 . 98
검사항목 21 W3C Markup Validation (http://validator.w3.org/) 99
검사항목 22 검사항목 4.2.1 ( 웹 애플리케이션 접근성 준수 ) 콘텐츠에 포함된 웹 애플리케 이션은 접근성이 있어야 한다 . 웹 콘텐츠에 포함된 부가 애플리케이션 또는 웹 페이지의 기능을 실행하는 데 필요한 웹 애플리케이션은 웹 페이지를 사용하거나 접근하는 것을 방해하지 않아야 한다 . 웹 애플리케이션은 설명한 모든 검사항목들을 적용하여 제작하여야 한다 . 100
검사항목 22 플러그인 플랫폼이 제공하는 접근성 API 활용 •Best Practices fot Accessible Flash Design (http://www.adobe.com/resources/accessibility/best_practices/best_practices_ acc_flash.pdf ) •Flex accessibility (http://www.adobe.com/accessibility/products/flex/ ) •UI Automation and Microsoft Active Accessibility (http://msdn.microsoft.com/en-us/library/ms788733.aspx ) •Silverlight Accessibility Overview (http://msdn.microsoft.com/en-us/library/cc707824(VS.95).aspx ) •Java Accessibility Helper Early Access v0.8 (http://java.sun.com/developer/earlyAccess/jaccesshelper/ ) •Accessible Explorer (http://msdn.microsoft.com/en-us/library/ms696082.aspx ) 101
검사항목 22 웹 애플리케이션의 대체 콘텐츠 제공 플래시 대체 콘텐츠 제공 예제 사용자의 선택에 따 라 플래시 버전과 플래시가 아닌 버전 을 제공하는 예제 102
검사항목 22 잘못된 사례 : 이미지 링크를 자바스크립트로 잘못 구현한 경우 문제점 : 첫 번째는 키보드로 접근이 불가능하다는 점이며 , 두 번째는 이미지 가 의미하는 사용자 인터페이스의 종류가 링크임을 알려주지 못한다는 점이 다 . 개선 여기에서 a 태그의 href 속성으로 목적지 URL 을 제공하고 , onclick 이벤 트 핸들러의 URL 을 this.href 로 변경하였다 . onclick 이벤트 핸들러를 img 요소가 아닌 a 태그에 사용하여 this.href 로 URL 을 참조할 수 있게 하였다 . 이벤트 핸들러에 'return false;' 부분을 생략하면 마우스 클릭과 키보드에 의해서 새 창 열기와 함께 원래 창의 콘텐츠가 'popup.html' 로 로드 된다 . 103
검사항목 22 잘못된 사례 : 잘못된 이미지 버튼 구현 사례 개선 문제점 : 첫째 , 키보드 초점이 버튼 이미지로 이동하지 않아 키보드로 실행시킬 수 없다는 점이며 , 둘째 , 이미지가 의미 하는 사용자 인터페이스 요소 의 종류가 버튼임을 알 수 없다 는 점이고 , 셋째 , 이미지 버튼 에 대체 텍스트가 누락되어 그 용도를 알 수 없는 점이다 . 서식 전송을 의미하는 버튼 컨 트롤은 form 요소와 함께 <button type="submit">, <input type="submit">, <input type="image"> 요소 중 하나를 이용하여 구현해야 한다 . 104
참고자료 105
참고한 자료 • 웹 접근성의 정의 | 웹 접근성 연구소 ( http://www.wah.or.kr/Accessibility/define.asp ) • 웹 접근성 준수를 위한 가이드라인 ( 안 ) – 현준호 (http://jhyun.files.wordpress.com/2008/11/ec9bb9-eca091eab7bcec84b1- eca480ec8898- eab080ec9db4eb939ceb9dbcec9db8_20081103_ed9884eca480ed98b8.pdf ) • 한국형 웹 콘텐츠 접근성 지침 2.0 ( http://wah.or.kr/Example2.0/ ) • Professional Accessibility Javascript Evaluation Tools - PAJET ( http://mydeute.com/was/was.html ) • 웹 접근성을 고려한 콘텐츠 제작 기법 2.0 (http://www.wah.or.kr/_Upload/pds/%EC%9B%B9%20%EC%A0%91%EA %B7%BC%EC%84%B1%EC%9D%84%20%EA%B3%A0%EB %A0%A4%ED%95%9C%20%EC%BD%98%ED%85%90%EC %B8%A0%20%EC%A0%9C%EC%9E%91%20%EA%B8%B0%EB %B2%95%20v2.0(111130).pdf ) • NULI (http://html.nhncorp.com/accessibility ) • 웹 접근성 품질인증 심사가이드 1.2 (http://www.wah.or.kr/Board/brd_view.asp? page=3&brd_sn=2&brd_idx=826 ) 106

More Related Content

PDF
«Українська література» підручник для 7 класу закладів загальної середньої ос...
ssuser5dd4af
 
PPS
Movimentos Do Pé
arianepenna
 
PPTX
반응형 웹 디자인
준극 김
 
PDF
Swc발표자료1 3(오픈cms wordpress_drupal)
마경근 마
 
PDF
한국형 웹 콘텐츠_접근성_지침_2.0
Hongseok Yeon
 
PDF
모바일 디자인 접근방법
규연 황
 
PDF
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
Saltlux zinyus
 
PDF
[솔트룩스] 큐레이션과 마켓플레이스 Yes24 이선재 본부장
Saltlux zinyus
 
«Українська література» підручник для 7 класу закладів загальної середньої ос...
ssuser5dd4af
 
Movimentos Do Pé
arianepenna
 
반응형 웹 디자인
준극 김
 
Swc발표자료1 3(오픈cms wordpress_drupal)
마경근 마
 
한국형 웹 콘텐츠_접근성_지침_2.0
Hongseok Yeon
 
모바일 디자인 접근방법
규연 황
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
Saltlux zinyus
 
[솔트룩스] 큐레이션과 마켓플레이스 Yes24 이선재 본부장
Saltlux zinyus
 

Similar to Qa를 위한 검사항목으로 바라보는 웹 접근성 (20)

PPTX
2.보건복지정보개발원 2부(국가표준 및 품질마크)자료
Youngil Ryu
 
PDF
웹 접근성을 고려한 콘텐츠 제작 기법 V2.0(111130)
고 고태영
 
PPT
A Case Study on Accessibility of Online Learning Content in Korea
Greg SHIN
 
PDF
Web Accessibility, When you need empathy led by the market!
Youngil Ryu
 
PDF
한국형웹콘텐츠접근성지침2 0 알아보기_윤좌진
Jwajin Yoon
 
PPTX
[11/25 정보접근성 세미나]미 교통부(Dot) 장애인 접근성 의무화 준수 대응 방안(국내외 동향) (주)에이매스컨설팅 김근우 전임
AmassCunsulting
 
PDF
웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로
Joon-Ho Hyun
 
PPTX
다음카카오 Pc&Mobile 웹 접근성 개선 사례
Jaesung Choi
 
PDF
장차법과 웹접근성 웹음성서비스 제안서
Justin Shin
 
PDF
Wcag2.0 vs KWCAG2.0 비교자료
Justin Shin
 
PPTX
웹표준스터디5주차 이미진
Mijin Lee
 
PDF
2013년 웹 접근성 기술 백서 (주)kt
Hyunmin Lim
 
PDF
[7/27 접근성세미나] 장차법 해석을 통한 기업의 방향성 수립
Nts Nuli
 
PPSX
웹접근성지침 2012 0701
Hyesun Choi
 
PDF
Web Accessibility_SYS4U
sys4u
 
PDF
[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Nts Nuli
 
PPT
국내외 정보통신 접근성 정책 및 기술 동향
Joon-Ho Hyun
 
PPT
웹 접근성 A to z
Joon-Ho Hyun
 
PDF
이러닝 콘텐츠의 웹 접근성 개선방안
Joon-Ho Hyun
 
PPTX
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
Nts Nuli
 
2.보건복지정보개발원 2부(국가표준 및 품질마크)자료
Youngil Ryu
 
웹 접근성을 고려한 콘텐츠 제작 기법 V2.0(111130)
고 고태영
 
A Case Study on Accessibility of Online Learning Content in Korea
Greg SHIN
 
Web Accessibility, When you need empathy led by the market!
Youngil Ryu
 
한국형웹콘텐츠접근성지침2 0 알아보기_윤좌진
Jwajin Yoon
 
[11/25 정보접근성 세미나]미 교통부(Dot) 장애인 접근성 의무화 준수 대응 방안(국내외 동향) (주)에이매스컨설팅 김근우 전임
AmassCunsulting
 
웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로
Joon-Ho Hyun
 
다음카카오 Pc&Mobile 웹 접근성 개선 사례
Jaesung Choi
 
장차법과 웹접근성 웹음성서비스 제안서
Justin Shin
 
Wcag2.0 vs KWCAG2.0 비교자료
Justin Shin
 
웹표준스터디5주차 이미진
Mijin Lee
 
2013년 웹 접근성 기술 백서 (주)kt
Hyunmin Lim
 
[7/27 접근성세미나] 장차법 해석을 통한 기업의 방향성 수립
Nts Nuli
 
웹접근성지침 2012 0701
Hyesun Choi
 
Web Accessibility_SYS4U
sys4u
 
[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Nts Nuli
 
국내외 정보통신 접근성 정책 및 기술 동향
Joon-Ho Hyun
 
웹 접근성 A to z
Joon-Ho Hyun
 
이러닝 콘텐츠의 웹 접근성 개선방안
Joon-Ho Hyun
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
Nts Nuli
 
Ad

Qa를 위한 검사항목으로 바라보는 웹 접근성

  • 1. QA 를 위한 검사항목으로 바라보는 웹 접근 성 1
  • 3. 웹 접근성은 장애인만을 위한 것이다 ?? 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간 - 팀 버너스 리 (Tim Berners-Lee) 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대 부분 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지 만 , 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스 를 손쉽게 활용할 수 있도록 만드는 것을 말한다 . 3
  • 4. • 휠체어사용자 • 무릎이 아픈 사용자 • 축구 , 등산을 하고 난 뒤 다리에 힘 이 풀렸을 때 • 무거운 짐을 들고 다닐 때 등 ( 여행 용 가방등 ) 웹 접근성 = 인터넷 상의 경사로를 만들어 주자 !! • 시각 장애자용의 음성 브라우저 사용자 • 텍스트를 점자로 번역하는 점자 브라우저 사용자 • 키보드를 활용하지 못할 때 or 마우스를 활용하지 못할 때 • 저사양 컴퓨터 , 모뎀 등 통신환경이 좋지 않을 때 • 시끄러운 환경에 놓여 있을 때 동영상 보기 등 4
  • 6. 우리나라의 웹 접근성 (1) 정보통신 단체 표준인 한국형 웹 콘텐츠 접근성 지침 1.0 (TTAS.OT-10.0003, 2004.12.23) •국제 표준화 기구인 W3C(World Wide Web Consortium) 의 WAI(Web Accessibility Initiative) 에서 1999 년 5 월 제정한 웹 콘텐츠 접근성 가이드라인 (WCAG : Web Content Accessibility Guidelines 1.0) •WCAG 2.0 초안 (2003 년 6 월 24 일판 ) 을 참고 •부분적으로 미국 재활법 508 조를 참고 이를 바탕으로 국가 표준인 ‘인터넷 웹 콘텐츠 접근성 지침’ (KICS.OT-10.0003, 2005.12.21) 제작 6
  • 7. 우리나라의 웹 접근성 (2) 현재의 국가 표준 한국형 웹 콘텐츠 접근성 지침 2.0 (2010 년 12 월 31 일부로… ) •그 동안 우리나라에서 웹 접근성 표준으로 사용되어온 정보통신 단체 표 준인“한국형 웹 콘텐츠 접근성 지침 1.0” 과 이를 바탕으로 제정된 국가 표준인 ‘인터넷 웹 콘텐츠 접근성 지침’에 해외 웹 관련 표준 및 기술 동 향을 최대한 반영하여 개정 . •특히 2008 년 12 월에 제정된 웹 접근성 관련 국제 표준인 월드 와이드 웹 컨소시엄 (W3C: World Wide Web Consortium) 의 ‘웹 콘텐츠 접근성 가 이드라인 2.0(WCAG 2.0: Web Content Accessibility Guidelines 2.0)’ 을 국내 실정에 맞게 반영 . 7
  • 8. 한국형 웹 콘텐츠 접근성 지침 2.0 4 개의 원칙과 13 개의 지침 22 개의 검사항목으로 구성되어 있습니다 . 4 개의 원칙 •인식의 용이성 (Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다 . •운용의 용이성 (Operable) : 사용자 인터페이스 구성 요소는 조작 가능하 고 내비게이션할 수 있어야 한다 . •이해의 용이성 (Understandable) : 콘텐츠는 이해할 수 있어야 한다 . •견고성 (Robust) : 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다 . 8
  • 9. 원칙 1. 인식의 용이 성 9
  • 10. 인식의 용이성 (Perceivable) 지침 (3 개 ) 검사 항목 (6 개 ) 1.1( 대체 텍스트 ) 텍스트 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다 . 1.1.1( 적절한 대체 텍스트 제공 ) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다 . 1.2( 멀티미디어 대체 수단 ) 동영상 , 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다 . 1.2.1( 자막 제공 ) 멀티미디어 콘텐츠에는 자막 , 원고 또는 수화를 제공해야 한다 . 1.3( 명료성 ) 콘텐츠는 명확하게 전달되어 야 한다 . 1.3.1( 색에 무관한 콘텐츠 인식 ) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다 . 1.3.2( 명확한 지시 사항 제공 ) 지시 사항 은 모양 , 크기 , 위치 , 방향 , 색 , 소리 등에 관계없이 인식될 수 있어야 한다 . 1.3.3( 텍스트 콘텐츠의 명도 대비 ) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다 . 1.3.4( 배경음 사용 금지 ) 자동으로 재생되 는 배경음을 사용하지 않아야 한다 . 모든 콘텐츠는 사용자가 인식할 수 있어야 한다 . 10
  • 11. 검사항목 1 1.1.1 ( 적절한 대체 텍스트 제공 ) 텍스트 아닌 콘텐츠는 그 의미나 용 도를 이해할 수 있도록 대체 텍스트를 제공해야 한다 . 이미지 등 텍스트가 아닌 콘텐츠를 이용할 경우 , 그 의미나 용도를 해당 이미 지와 동등하게 인식할 있도록 적절한 대체 텍스트를 제공해야 한다 . 텍스트로 제공할 수 있는 콘텐츠를 이미지 등 텍스트 아닌 콘텐츠로 제공하는 것은 바람 직하지 않은 방법이므로 지양해야 한다 . 또한 대체 텍스트는 간단명료하게 제 공해야 한다 . 링크나 버튼의 대체 텍스트로 ‘이동하기’ , ‘GO’ 등과 같이 그 목적지를 구체적 으로 알려주지 않는 대체 텍스트는 피해야 한다 . 11
  • 12. 검사항목 1 특정 감각 기관을 위한 콘텐츠인 경우 -플루트 독주나 시각적 예술 작품 등의 경우 , 해당 콘텐츠에 대한 간략한 용도 를 알려주는 대체 텍스트만으로 충분하다 . 콘텐츠의 내용을 설명하는 대체 텍스트를 제공할 수 없는 경우 -생방송 콘텐츠와 같이 그 내용을 설명하기 어려운 경우 , 해당 콘텐츠에 대한 간략한 용도를 알려주는 대체 텍스트만으로도 충분하다 . -또한 색맹 검사 , 청각 검사 , 시력 검사 , 받아쓰기 등과 같은 검사 또는 시험 의 경우에도 콘텐츠의 간략한 용도를 알려주는 대체 텍스트만으로 충분하다 . 12
  • 13. 검사항목 1 - check Tool Open-wax, n-wax, Pajet, NIA 평가 ( http://www.korea-nia.appspot.com ) 등을 주로 이용 . Professional Accessibility Javascript Evaluation Tools - PAJET ( http://mydeute.com/was/was.html ) 13
  • 14. 검사항목 1 – check 방법 1. 이미지와 텍스트를 비교하여 적절한 대체 텍스트를 판단 . ( 빈 값 , 없 음 , 내용 불충분 , 오타 등등 ) 2. Longdesc 는 직접 클릭해서 확인 . - 클릭시 해당 페이지가 없는 경우는 오류 - 페이지의 내용이 해당 의미나 기능을 파악하기 어려운 경우 도 오류 3. 의미 있는 내용을 배경이미지 사용 체크 ( 의미 있는 이미지를 배경이미지로 사용했을 경우 , HTML 소스로 확인 ) 14
  • 15. 검사항목 1 F12 로 해당 영역 을 찍어서 확인가 능 . A 요소에는 alt 속성이 올 수 없음 . 15
  • 16. 검사항목 1 – 사례 (1) 1. 이미지 맵 작성시 <area> 에 대체 텍스트를 바르게 작성 했더라도 <img> 에 alt 속성을 제공하지 않은 경우 . 2. 이미지맵 형태로 조직의 관계나 프로세스 등 복잡한 이미지의 대체 텍 스트를 제공 시 , area 로 항목만 나열하고 조직 간의 관계를 표현하지 않은 경우 . 3. 대체 텍스트를 alt (alternate text) 가 아닌 title 로 제공 4. QR 코드의 이동 주소 정보 등을 대체텍스트 또는 설명 , 링크 등으로 제공해야 함 . <img src=“ 경로” usemap=“#id” alt=“” /> <map id=“id” name=“id”> <area … alt=“ 작성” /> <area … alt=“ 작성” /> <img src=“” alt=“” title=“ 대체텍스트” /> 16
  • 17. 검사항목 1 – 사례 (2) 1. ACSII 심벌 기호는 <abbr title=" 웃는 돼지 ">(^(oo)^)</abbr> 와 같이 제공 . 2. 플래시 (Flash) 를 이용한 콘텐츠 구현 시 콘텐츠에 대한 대체 텍스트 는 액세스 가능성 (Accessibility) 패널의 ' 객체를 액세스 가능하게 만 들기 (Make object accessible)' 항목을 체크하고 , ' 이름 (N)' 항목에 대 체 텍스트를 제공한다 . 설명 (D) 항목은 보다 자세한 설명문을 제공 하는 경우에 사용한다 . 17
  • 18. 검사항목 1 – 사례 (3) 1. 실버라이트 (Silverlight) 에서 텍스트 아닌 콘텐츠에 대한 대체 텍스트 는 AutomationProperties.Name 속성 또는 AutomationProperties.LabeledBy 속성을 이용하여 제공한다 . 콘텐츠 또는 컨트롤에 대한 설명문이나 도움말은 AutomationProperties.HelpText 속성을 이용하여 제공한다 . 2. 실시간 오디오와 실시간 동영상 콘텐츠에 대한 대체 텍스트는 콘텐츠 의 내용이 시시각각으로 변화한다 . 이 경우 , 대체 텍스트를 콘텐츠의 내용 변화에 따라 동적으로 제공하는 것은 매우 어려운 일이다 . 따라 서 실시간 오디오 또는 동영상 콘텐츠의 대체 텍스트로는 해당 콘텐 츠의 용도를 알려주는 것으로도 충분하다 . • 한국도로공사가 제공하는 경부고속도로 서울방향 서초 나들목에 설치된 CCTV 실시간 영상의 링크에 대한 대체 텍스트를 " 경부 선 서울방향 서초 나들목 실시간 영상 " 이라고 제공한다 . • 인터넷을 통하여 중계되는 생방송 KBS FM 라디오 콘텐츠로 이 동하는 이미지 링크의 대체 텍스트를 "KBS FM 라디오 생방 송 " 이라고 제공한다 . 18
  • 19. 검사항목 1 – 사례 (4) CAPTCHA 는 사용 목적상 그 내용을 대체 텍스트로 제공한다면 CAPTCHA 가 의도하는 본래 목적을 달성할 수 없다 . 따라서 CAPTCHA 에 대한 대체 텍 스트는 그 용도를 알려주는 것으로 충분하다 . •Ex) 텍스트로 제공되는 CAPTCHA 에 대한 대체 텍스트로는 " 숫자 이미지 용 CAPTCHA" 가 적절하다 . •Ex) 오디오로 제공되는 CAPTCHA 에 대한 대체 텍스트로는 " 오디오 CAPTCHA" 등이 적절하다 . CAPTCHA 를 제공하는 웹 콘텐츠는 반드시 대체 수단을 제공해야 한다 . •두 가지 이상의 감각 , 예를 들어 시각적 CAPTCHA 와 청각적 CAPTCHA 를 동시에 제공 •사용자에게 문제를 텍스트 콘텐츠로 제시하고 문제에 대한 답을 입력하도 록 하는 문제 풀이 방식의 CAPTCHA 제공 •상담원을 이용하여 CAPTCHA 가 제공하는 역할을 대신할 수 있는 서비스 제공 •기타 CAPTCHA 의 이용을 우회할 수 있는 방법 제공 ※ 보다 다양한 방법은 W3C WAI 에서 제공하는 “ Inaccessibility of CAPTCHA ( http://www.w3.org/TR/turingtest/ )” 을 참고하기 바람 19
  • 20. 검사항목 1 – 사례 (5) 온라인 시험 등에 대한 대체 텍스트 제공 •검사 ( 색맹검사 , 청각검사 , 시력검사 등 ) 또는 시험 ( 듣기 평가 예문 , 단어 받아쓰기 등 ) 을 위하여 제공되는 텍스트 아닌 콘텐츠는 검사의 결과 또는 시험의 정답을 유추할 수 있는 내용을 대체 텍스트로 제공할 수 없 다 . 따라서 이들 콘텐츠에 대한 대체 텍스트는 콘텐츠의 간략한 용도를 알려주는 대체 텍스트를 제공해야 한다 . Ex ) 색맹 검사용 콘텐츠에 대하여 " 색맹 검사용 이미지 1" 등과 같이 대체 텍스트를 제공한다 . Ex ) 토플 (TOEFL) 듣기 평가용 예제의 오디오 콘텐츠에 대하여 " 토플 문항 5 번용 오디오 " 등과 같이 대체 텍스트를 제공한다 . Ex ) 시력검사용 이미지에 대하여 " 시력 검사용 이미지 " 등과 같이 대체 텍스트를 제공한다 . 20
  • 21. 검사항목 2 1.2.1( 자막 제공 ) 멀티미디어 콘텐츠에는 자막 , 원고 또는 수화를 제 공해야 한다 . 멀티미디어 콘텐츠를 동등하게 인식할 수 있도록 제작하기 위해서는 자 막 , 원고 또는 수화를 제공해야 한다 . 대체 수단에서 가장 중요한 요소 는 멀티미디어 콘텐츠와 동등한 내용을 제공하는 것이다 . 가장 바람직한 방법은 닫힌 자막 (Closed caption) 을 오디오와 동기화시 켜 (Synchronized) 제공하는 것이다 . 대사 없이 영상 (Video) 만 제공 하는 경우 화면 해설 ( 텍스트 , 오디오 , 원고 ) 을 제공하고 , 음성만 제 공하는 경우 자막 , 원고 또는 수화를 제공해야 한다 . 생방송 콘텐츠의 경우 자막 또는 수화의 제공을 이 검사항목의 예외로 인 정한다 . 그러나 생방송 콘텐츠의 경우에도 자막 또는 수화를 제공하는 것이 바람직하다 . 생방송 콘텐츠의 경우에도 검사항목 1 – 사례 (3) 페이지의 2 번과 같이 대체 텍스트를 반드시 제공해야 한다 . 21
  • 22. 검사항목 2 자막으로 인해 수화가 가리지 않도록 하고 , 원고는 페이지를 벗어나지 않 는 수준으로 제공해야 함 . ( 요약정보는 안 됨 ) 사용자가 등록하는 UCC 같은 영상 , 음성 등의 콘텐츠를 제공 시 , 자막 을 등록할 수 있도록 개발 . 음성이 없는 동영상의 경우도 대체 수단이 반드시 제공해야 함 . 22
  • 23. 검사항목 2 자막 관련 제공방법들은 웹 접근성을 고려한 콘텐츠 제작 기법 v2.0(111130) 의 적용 기술 13 ~ 17 확인 . -자막 제공 방법 , 대본 제공 방법 , 수화 동영상의 제공 방법 , 대체텍스트 또는 설명을 제공하는 방법등이 있음 . 잘못된 사례 -자막 , 원고 , 수화 중 어느 한 가지도 제공하지 않는 경우 -동영상의 내용을 요약하여 제공하는 자막 또는 원고의 경우 -대체 수단에 대한 또 다른 대체 수단임을 알려주지 않는 경우 -열린 자막이 수화를 가리는 동영상 -동영상의 해상도가 낮아 수화를 볼 수 없는 경우 23
  • 24. 검사항목 3 1.3.1 ( 색에 무관한 콘텐츠 인식 ) 콘텐츠는 색에 관계없이 인식될 수 있 어야 한다 . 콘텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자나 흑 백 디스플레이 사용자 , 흑백 인쇄물을 보는 사용자가 색을 배제하여도 해 당 콘텐츠를 인식할 수 있도록 제공해야 한다 . [ 오류 사례 ] •그래프 , 차트 , 지도 등… 색상만으로 내용을 분별하도록 제공한 콘텐츠 는 오류 •페이지 네비게이션 , 메뉴 , 현재 위치 등에 대해 명암 , 패턴 등의 변화 없이 색상의 변화만으로 현재의 위치를 표시한 경우도 오류 24
  • 26. Fujitsu ColorDoctor 활용 다운 : http://www.fujitsu.com/global/accessibility/assistance/cd/download.html •Gray scale ( 흑백 ) •Protanopia ( 제 1 색맹 , 적색맹 ) •Deuteranopia ( 제 2 색맹 , 녹색맹 ) •Tritanopia ( 제 3 색맹 , 청황색맹 ) 검사항목 3 26
  • 27. Fujitsu ColorSelector 활용 다운 : http://www.fujitsu.com/global/accessibility/assistance/cs/download.html ( 한국어 버전 ) 검사항목 3 27
  • 28. 검사항목 4 1.3.2 ( 명확한 지시 사항 제공 ) 지시 사항은 모양 , 크기 , 위치 , 방향 , 색 , 소리 등에 관계없이 인식될 수 있어야 한다 . 본 검사 항목은 특정 요소를 가리키거나 지시 사항을 전달하는 콘텐츠에 한정해 적용하는 것으로 , 시각이나 청각 등과 같은 특정 감각에만 의존하 여 제공해서는 안 된다는 것이다 . Ex) ‘ 동그란 버튼을 누르시오’ 또는 ‘오른쪽 버튼을 누르시오’ (X) Ex) 둥근 모양의 빨간색 버튼과 초록색 버튼을 제공하고 각 버튼의 레이 블을 각각 ‘확인’ 과 ‘취소’로 구성한 콘텐츠에서 “작성한 서식을 제출하려 면 빨간색 확인 버튼을 누르시오 .” (O) Ex) 온라인 시험 중 사용자에게 비프음으로 정답인지 오답인지를 알려주 면 , 청각 장애 사용자나 스피커가 설치되어 있지 않은 환경에 있는 사용 자는 정답과 오답 여부를 확인할 수 없다 . 최초 기획서를 받을 때 체크 . 28
  • 29. 검사항목 5 검사항목 1.3.3 ( 텍스트 콘텐츠의 명도 대비 ) 텍스트 콘텐츠 와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다 . 웹 페이지에서 보이는 핵심 텍스트 콘텐츠와 배경 간의 충분한 대비를 제 공하여 , 저시력자 , 색각 이상자 , 노인 등도 콘텐츠를 인식할 수 있도록 제공해야 한다 . 다만 , 본문 콘텐츠에 단순히 장식 목적으로만 사용한 글 자 , 마우스나 키보드를 활용하여 초점 (Focus) 을 받았을 때 명도 대비가 커지는 콘텐츠는 예외로 한다 . 폰트 크기에 따른 명도 대비 : 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14 pt 이상의 굵은 폰트를 사용하는 경우에는 명도 대비 를 3:1 까지 낮출 수 있다 . 29
  • 30. Colour Contrast Analyser 다운로드 : http://www.visionaustralia.org/business-and-professionals/digital-access/resou 검사항목 5 30
  • 31. Contrast Ratio ( 포토샵 익스텐션 ) 다운로드 : http://a11y.nhncorp.com/download/contrast-ratio/contrast-ratio.zip 설치방법 : http://html.nhncorp.com/accessibility/tool 검사항목 5 31
  • 32. WCAG Contrast checker ( 파이어폭스 부가기능 ) 애드온 : https://addons.mozilla.org/es/firefox/addon/wcag-contrast-checker/ 설치 및 사용방법 : http://wagunblog.com/wp/?p=76 검사항목 5 32
  • 33. 검사항목 6 1.3.4 ( 배경음 사용 금지 ) 자동으로 재생되는 배경음을 사용하지 않아야 한다 . 웹 페이지에서 자동으로 재생되는 배경음 ( 동영상 , 음성 , 음악 등 ) 으로 인해 콘텐츠를 인식하는 데 방해받지 않아야 한다 . 단 , 3 초 미만의 배경음은 예외로 한다 . 또한 콘텐츠가 제공하는 배경음의 음량을 조절하더라도 화면 낭독 프로그 램의 음량에는 영향을 주지 않아야 한다 . 33
  • 34. 검사항목 6 마우스 오버 또는 키보드 초점을 받으면 자동적으로 배경음이 실행되는 경우 (X) -> 마우스 오버가 아닌 마우스 클릭 ( 또는 Enter 키 ) 에 의하여 애니메이 션 플레이어가 실행되도록 수정 . ( 자동 실행이 아닌 사용자가 실행을… ) 3 초 이상 재생되는 배경음을 사용할 경우 , 반드시 배경음을 제어할 수 있는 수단 ( 멈춤 , 일시정지 , 음량조절 등 ) 을 웹 페이지의 첫 부분에 제공함 . ( 본문 바로가기 이전 ) 34
  • 35. 원칙 2. 운용의 용이 성 35
  • 36. 운용의 용이성 (Operable) 사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션할 수 있어야 한다 . 지침 (4 개 ) 검사 항목 (8 개 ) 2.1( 키보드 접근성 ) 콘텐츠는 키보드로 접근할 수 있어야 한 다 . 2.1.1( 키보드 사용 보장 ) 모든 기능은 키보드만으로 도 사용할 수 있어야 한다 . 2.1.2( 초점 이동 ) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다 . 2.2( 충분한 시간 제공 ) 콘텐 츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다 . 2.2.1( 응답 시간 조절 ) 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다 . 2.2.2( 정지 기능 제공 ) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다 . 2.3( 광과민성 발작 예방 ) 광 과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한 다 . 2.3.1( 깜빡임과 번쩍임 사용 제한 ) 초당 3~50 회 주 기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다 . 2.4( 쉬운 내비게이션 ) 콘텐츠 는 쉽게 내비게이션 할 수 있 어야 한다 . 2.4.1( 반복 영역 건너뛰기 ) 콘텐츠의 반복되는 영역 은 건너뛸 수 있어야 한다 . 2.4.2( 제목 제공 ) 페이지 , 프레임 , 콘텐츠 블록에 는 적절한 제목을 제공해야 한다 . 2.4.3( 적절한 링크 텍스트 ) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다 . 36
  • 37. 검사항목 7 2.1.1 ( 키보드 사용 보장 ) 모든 기능은 키보드만으로도 사용할 수 있어야 한다 . 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다 . ( 이 경우 , 해당 기능을 사용하는 데 필요한 키보드의 조 작횟수의 많고 적음은 고려대상이 아니다 .) 예외 사항 위치 지정 도구의 커서 궤적이 중요한 역할을 하는 콘텐츠 ( 붓질 기능이 필요한 콘텐츠 , 시뮬레이션 콘텐츠 , 지리정보 콘텐츠 , 가상현실 콘텐츠 등 ), 움직임 측정 센서 (Motion sensor) 를 이용하는 콘텐츠는 이 검사 항목 의 예외로 할 수 있다 . 그러나 이 경우에도 위치 지정 도구나 움직임 측정 센서가 필요한 기능을 제외한 나머지 사용자 인터페이스는 키보드만으로 사용할 수 있어야 한다 . 37
  • 38. 검사항목 7 키보드 포커스를 받는 element -a(href 값이 있어야 함 ), area(href 값이 있어야 함 ), button, input, select, textarea -Img, li 등의 onclick 등은 마우스로만 이용이 가능하며 , 키보드 사용자들 은 접근이 불가능 함 . 플래시 콘텐츠의 wmode 값은 기본적으로 transparent 또는 opaque 로 지정하게 되면 MSAA 를 사용할 수 없어 화면낭독기로 인식이 불가함 . -단 , 링크와 같은 특정기능 없이 단순정보 전달이나 디자인용 등 키보드 포커스가 불필요한 플래시 콘텐츠의 경우 , wmode 를 window 로 지정하면 키보드 포커스가 브라우저 메뉴영역에 갇혀 더 이상 운용이 어려운 상황 이 초래됨 . 이 경우 transparent 또는 opaque 를 사용하되 정보가 있는 경우 대체 콘텐츠로 제공하는 등 키보드 사용이 가능하도록 제공해야 함 . 웹 애플리케이션 제공 시 키보드 이용 보장 -대표적 예로는 웹 에디터 ( 모든 기능이 키보드로 이동 가능해야 하며 실 행 또한 가능해야 한다 . 그리고 기능 영역과 작성 영역 간의 이동 역시 가능해야 한다 .) -단축키를 제공하는 경우 사용자에게 단축키에 대한 정보를 제공해야 한 다 . 38
  • 39. 검사항목 7 마우스 드래그와 드롭 기능은 마우스로만 구현이 가능한 기능이다 . 또한 콘텐츠의 특성에 따라 유사한 기능을 키보드로 수행할 수 있도록 제공해 야 한다 . 1) 체크 상자를 이용한 상품 선택 : 드래그앤드롭으로 장바구니에 담는 기능을 제공하는 경우 , 모든 상품에 장바구니에 담기용 체크 상자를 제공 하고 ' 장바구니에 담기 ' 버튼을 클릭하면 체크상자가 ' 체크된 ' 상품을 장 바구니에 담도록 구현하는 것도 가능하다 . 2) 상품 선택 버튼을 이용한 방법 : 또 다른 방법은 상품별로 ' 장바구니 에 담기 ' 버튼을 제공하고 이 버튼을 누를때마다 해당 상품을 장바구니 목록에 포함되도록 구현하는 것도 가능하다 . 상기 1), 2) 방법의 기능에 추가하여 마우스 드래그 및 드롭 기능을 이용 하여 상품을 선택하여 장바구니에 담는 기능기능을 함께 제공하면 마우스 를 사용할 수 있는 사용자의 사용성도 함께 높일 수 있다 . 여기서 중요한 점은 마우스 드래그 및 드롭 방법만을 사용하도록 구현해서는 안 된다는 것이다 . 39
  • 40. 검사항목 7 컨텐츠를 tab 으로 이동해서 모든 기능에 접근이 가능한지 먼저 체크 . 마우스와 키보드 이벤트 핸들러를 동시에 제공했는지 체크한다 . -onmousedown = onkeydown, onmouseup = onkeyup, onmouseover = onfocus, onmouseout = onblur ( 체크 후 판단 ) -onclick 이벤트 핸들러는 키보드로 어떤 객체를 선택했을 경우 발생하며 마우스의 버튼을 눌렀다 놓았을 경우에도 발생하는 이벤트 핸들러이다 . 여기서 onclick 과 onkeypress 를 같이 주면 키보드 사용시 오류 발생 . (onkeypress 삭제 ) -onfocus = “this.blur();” 를 사용하지 않아야 함 . 잘못된 사례 : 키보드만으로 이전 입력 서식 이동이 불가능한 경우 주민등록번호의 앞 6 자리를 입력하면 초점이 자동적으로 주민등록번호 뒷 7 자리로 이동하는 경우 , shift + tab 키를 이용하여 초점을 첫 번째 입 력상자로 이동시키더라도 초점이 자동적으로 두 번째 입력 상자로 이동하40
  • 41. 검사항목 8 2.1.2 ( 초점 이동 ) 키보드에 의한 초점은 논리적으로 이동해야 하며 , 시각 적으로 구별할 수 있어야 한다 . 웹 페이지에서 제공하는 모든 기능을 키보드만으로 사용하여 운용할 경우 에도 초점이 논리적인 순서에 따라 이동하도록 제공해야 하며 , 조작이 불 가능한 상태가 되거나 갑작스러운 페이지의 전환 등이 일어나지 않아야 한다 . 또한 저시력자 , 지체 장애인들이 초점을 받은 콘텐츠를 시각적으로 인지 할 수 있도록 시각적으로 표현하여야 한다 . 41
  • 42. 검사항목 8 Tab 키와 Shift + Tab 키에 의한 초점의 이동 순서는 논리적이며 일관성 이 있어야 한다 . -키보드 내비게이션의 순서는 일반적으로 웹 페이지의 좌측 상단 영역에 서 우측 하단 영역으로 이동하는 것이 원칙이다 . -Ex) 로그인의 경우 , ‘ 아이디 -> 비빌번호 -> 로그인’ 순서 링크나 입력 필드 , 버튼 등에 초점이 가면 시각적으로 테두리가 생기는 것을 일부러 없애는 경우가 있다 . 그러나 시각적인 테두리는 키보드로 웹 페이지를 탐색하는 사람들에게는 현재의 초점의 위치를 보여주는 매우 중 요한 정보가 된다 . -초점을 받은 위치에 초점을 없애게 되면 키보드 내비게이션이 전혀 불가 능하게 되어 키보드에 의존하는 대부분의 장애인들이 웹을 사용할 수 없 게 될 뿐만 아니라 일반 사용자들도 매우 중요한 단서인 초점 위치를 잃 어버려 사용성을 떨어뜨리는 요인이 된다 . 42
  • 43. 검사항목 8 초점이 사라지는 경우들… ( 일부 브라우져에서만 사라지는 경우도 있음 ) •HTML : <a href=“a.html” onfocus=“this.blur();”>JS 오용 사례 </a> •HTML : <a href=“a.html”>CSS outline 오용 사례 </a> CSS : a { outline : none; } •HTML : <li><a href=“a.html”>CSS overflow 오용 사례 </a></li> CSS : li { overflow: hidden; width: 200px; height: 200px; } a { display: inline-block; width: 200px; height: 200px; } •HTML : <li><a href=“a.html”><img src=“ 경도” alt=“a 안의 요소” /></a></li> CSS : img { position 값 , display 값이 있는 경우 } <area> 요소의 진행 순서에 의미가 있으나 키보드 접근 순서가 일치하지 않으면 오류 . tabindex 는 가급적 사용하지 않는 것이 좋다 . -Tabindex 속성값이 0 이 아닌 다른 값이 지정되면 키보드 이동 순서가 순서대로 이동하기 전에 tabindex 가 지정된 곳으로 먼저 이동되는 문제가 발생하게 된다 . 43
  • 44. 검사항목 9 2.2.1 ( 응답 시간 조절 ) 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다 . 웹 콘텐츠 제작 시 시간 제한이 있는 콘텐츠는 가급적 제공하지 않는 것 이 바람직하며 , 보안 등의 사유로 시간 제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다 . 시간제한이 있는 콘텐츠는 그 변화를 사용자가 제어할 수 없는 콘텐츠이 다 . •일정한 시간마다 그 내용의 일부 또는 전체가 자동적으로 갱신되는 콘텐 츠 •일정한 시간이 경과하면 다른 웹 페이지로 이동하도록 구성된 콘텐츠 •사용자가 제어하지 않아도 자동적으로 스크롤되는 콘텐츠 •일정시간 후 사라지거나 접근이 차단되는 콘텐츠 등이 시간제한이 있는 콘텐츠이다 . 44
  • 45. 검사항목 9 반응 시간 조절 : 웹 콘텐츠에 대해 반응 시간을 지정한 경우 , 사용자가 반응 시간에 제한 없이 웹 콘텐츠를 이용할 수 있도록 하기 위해 반응 시 간이 종료되기 이전 , 사용자가 다음 중 한 가지 방법을 선택하여 조절할 수 있는 기능을 제공해야 한다 . 또한 반응 시간 조절 기능은 충분한 시간 ( 최소 20 초 이상 ) 을 두고 사전에 알려 주어야 한다 . -1) 시간 제한을 해제할 수 있어야 한다 . -2) 시간 제한을 연장할 수 있어야 한다 . 예외 사항 -시간 제한이 있는 온라인 경매 , 실시간 게임 등과 같이 반응 시간의 조 절이 원천적으로 허용되지 않는 경우에는 개별적인 반응 시간 조절이 불 가능하다 . 따라서 이러한 웹 콘텐츠의 경우에는 본 검사 항목의 적용을 받지 않는다 . 다만 , 이 경우에도 사용자에게 시간 제한이 있다는 것을 미 리 알려주고 , 종료되었을 경우에도 이를 알려주어야 한다 . 45
  • 46. 검사항목 9 javascript 나 meta 를 이용한 페이지를 자동으로 이동시키는 방법은 브라 우저에서의 히스토리를 이용하는데 문제가 있으므로 , 웹 서버의 설정으로 리다이렉트를 시켜주거나 서버측 웹 언어의 리다이렉션 기능을 사용해야 합니다 . 바이러스 자동 체크 사례 -웹 페이지에 접속하자마자 특정 서비스 ( 예를 들어 , 온라인 바이러스 체 크 등 ) 를 수행할 경우 사용자는 자신이 이동하려 했던 페이지가 아니라 다른 페이지로 이동이 되어버리게 되어 이용에 혼란을 줄 수 있다 . -사용자가 바이러스 체크를 시작할 수 있도록 컨트롤을 제공해 주어야 한 다 . 또한 사용자가 어떤 서비스를 선택한 경우에도 해당 서비스를 수행하 는 과정이 복잡하고 오랜 시간이 걸린다면 서비스를 중간에 멈추고 목적 지 URL 로 되돌아 갈수 있는 수단을 제공해야 한다 . 46
  • 47. 검사항목 10 2.2.2 ( 정지 기능 제공 ) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다 . 저시력자나 지적장애인 등은 이동하거나 스크롤되는 콘텐츠를 인지하기가 어 렵다 . 때문에 웹 콘텐츠는 사용자가 이동이나 스크롤을 일시 정지시키거나 지 나간 콘텐츠 또는 앞으로 나타날 콘텐츠를 사용할 수 있도록 " 앞으로 이동 ", " 뒤로 이동 ", " 정지 " 등의 컨트롤을 제공해야 한다 . 정지버튼 없이 포커스가 갔을 때 자동으로 변경되지 않도록 멈추는 경우 -키보드 사용시의 접근성만 고려한다면 정지버튼이 필수가 되지 않겠지만 마 우스 이용자의 경우 마우스 오버시 정지가 되는 기능을 제공하더라도 사용자 는 마우스 오버 상태를 유지하지 못할 가능성이 있습니다 . 그래서 정지버튼을 제공하는 것을 권장 . 47
  • 48. 검사항목 10 사용자의 요구와 무관하게 콘텐츠가 자동적으로 업데이트되는 기능의 경우 사용자는 불편함을 겪게 된다 . 따라서 업데이트를 자동적으로 발생시키는 대 신 , 사용자가 자신의 필요에 따라 업데이트를 요청할 수 있는 기능을 제공해 야 한다 . 또한 자동으로 업데이트되는 콘텐츠를 사용자는 멈출 수 있어야 한다 . 이를 위 해 " 일시정지 " 버튼을 제공하여 자동으로 업데이트되고 있는 콘텐츠를 사용 자가 원하는 만큼 정지시킨 뒤 이용이 다 끝난 뒤 다시 업데이트될 수 있도록 해야 한다 . 48
  • 49. 검사항목 11 2.3.1 ( 깜빡임과 번쩍임 사용 제한 ) 초당 3~50 회 주기로 깜빡이거나 번쩍이 는 콘텐츠를 제공하지 않아야 한다 . 깜빡이는 콘텐츠는 사용자의 시선을 끌기 위한 목적으로 주로 사용되는 콘텐 츠이다 . 그러나 깜빡임의 주기와 크기 , 변화의 정도에 따라 광과민성 증후군 이 있는 사용자에게 발작이나 졸도 등을 유발할 수 있으므로 깜빡이는 콘텐츠 의 사용에 유의하여야 한다 . 포켓몬 사례 -1997 년 일본의 유명 애니메이션 ' 포켓몬스터 ' 의 38 번째 에피소드인 ' 전능 전사 폴리곤 ' 의 한 장면에서 빨간색과 파란색이 교대로 반복되는 섬광 장면이 나오자 TV 로 이를 시청하던 어린이들이 발작을 일으킨 사고가 있었다 . 이 사 고로 어린이 685 명이 구급차로 병원에 실려 갔으며 이들 중 150 여 명은 병원 에 입원한 바 있다 . 일본에서는 어린이들의 발작 원인으로 애니메이션의 섬광 이미지로 인한 광과 민성 발작 현상으로 결론내고 관련 업계와 방송국에 주의 조치를 내린바 있다 . 49
  • 50. 검사항목 11 콘텐츠의 움직임 , 번쩍임 , 깜빡임 등이 페이지를 사용하거나 이해하는 데 필 수 적이며 , 사용자가 그 기능을 활성화시키거나 멈출 수 있는 컨트롤을 제공하기 어려운 경우 다음과 같은 메시지 상자를 이용하여 사용자에게 이들 움직임 , 번쩍임 , 깜빡임이 있는 페이지로 이동함을 알리고 사용자가 이 페이지로 이동 할 것인가를 결정할 수 있도록 한다 . 50
  • 51. 검사항목 11 Photosensitive Epilepsy Analysis Tool 다운로드 : http://trace.wisc.edu/peat/#download 사용법 : Capture -> Start capture 1.화면 캡쳐 2.URL 3.파일 (avi 만 ) 51
  • 52. 검사항목 12 2.4.1 ( 반복 영역 건너뛰기 ) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다 . 반복되는 영역을 건너뛸 수 있는 방법 -웹 페이지가 제공하는 핵심 콘텐츠가 위치한 곳으로 직접 이동하는 건너뛰기 링크를 제공한다 . 건너뛰기 링크는 시각 장애인에게 반드시 필요한 기능이 다 . -이 기능은 지체장애인에게도 효과적인 웹 콘텐츠 운용을 위해 필요한 기능이 므로 , 메뉴 건너뛰기 링크는 화면에 보이도록 구현하는 것이 좋다 . 52
  • 53. 검사항목 12 여러 개의 건너뛰기 링크 제공할 때 -건너뛰기 기능은 웹 페이지의 가장 앞에 위치해야 한다 . 여러 개의 건너뛰기 링크를 제공하는 경우에는 핵심 콘텐츠로 이동하기 위한 건너뛰기 링크를 가 장 앞에 위치시킨다 . 만일 배경음 바로가기 링크 (1.3.4 참조 ) 가 있는 경우에 는 그 다음에 위치시킨다 . 건너뛰기 링크의 용도 표현 건너뛰기 링크에 대한 대체 텍스트 또는 링크 텍스트는 다음 예와 같이 어떤 영 역을 우회하는지 또는 목적지가 어디인지를 명확히 표시해야 한다 . 1) “oo 링크 영역 건너뛰기” 2) “oo 을 건너뛰어 ㅁㅁ으로 이동” 등 참고자료 Skip Navigation 은 Quick Link 가 아닙니다 . - jangkunblog ( http://www.jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/ ) 53
  • 54. 검사항목 12 (<a href=“#test”> 본문바로가기 </a>) 소스와 직접 반복영역 건너뛰기를 비교해야 함 . -href=“# 아이디이름” 으로 연결된 내용은 모두 검색 . -이 부분에서는 연결이 되어 있는지를 체크하고 , 키보드로도 실제 작동여부를 한 번 더 체크 . 54
  • 55. 검사항목 13 2.4.2 ( 제목 제공 ) 페이지 , 프레임 , 콘텐츠 블록에는 적절한 제목을 제공해야 한다 . 웹 페이지 제목 제공 -모든 웹 페이지가 해당 내용을 간단명료하게 기술한 제목을 포함하고 있을 경우 여러 개의 웹 페이지가 열려 있더라도 사용자 ( 예 : 시각 장애인 , 인지장애인 , 심각한 지체장애인 등 ) 는 해당 제목을 통해 초점이 주어진 웹 페이지가 어떠한 내용을 담고 있는지를 알 수 있기 때문에 , 모든 웹 페이지에는 해당 페이지를 간 단명료하게 설명한 제목을 제공해야 한다 . -또한 , 웹 페이지 제목은 서로 배타적이어야 한다 . ( 게시판의 ‘목록 , 읽기 , 쓰 기’ 페이지의 제목을 읽기 ( 해당 글의 제목 ), 쓰기 등으로 구분하는 것을 권장 ) 프레임 제목 제공 -모든 웹 페이지의 프레임에는 각 프레임을 설명하는 간단명료한 제목을 제공해 야 한다 . 아무런 내용이 없는 프레임에는 “빈 프레임” 등으로 제목을 제공한다 . -“ 메인 메뉴” , “ 참고 문헌” 등은 적절 , “top 프레임” , “main 프레임”등은 부적 절 55
  • 56. 검사항목 13 콘텐츠 블록 -콘텐츠 블록에는 적절한 제목을 제공해야 한다 . 콘텐츠 블록에 제목을 제공 하는 경우에 <h1>, <h2> 태그를 부여하면 제목과 본문을 구분할 수 있으며 , 제목간 이동이 가능하다 . 특수 기호 ( )▩▩▩▩ 사용 제한 -웹 페이지 , 프레임 또는 콘텐츠 블록의 제목은 문장의 하나로 간주하여 불필 요한 특수 기호를 반복하여 사용하지 않는다 . 56
  • 57. 검사항목 13 •페이지 제목 체크 ( 유니크 ) •프레임 제목 체크 •콘텐츠 블록 제목 체크 57
  • 58. 검사항목 14 2.4.3 ( 적절한 링크 텍스트 ) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다 . 링크 텍스트를 “여기를 클릭하세요 .” 나 “여기”와 같은 애매모호한 표현을 사용 하면 시각장애인이나 인지장애인 뿐만 아니라 비장애인들도 링크를 클릭했을 때 어떤 반응이나 어떤 페이지로 이동될 지 예측하기 어렵다 . 따라서 링크 텍스트를 직관적이고 의미 있게 구성하여 사용자가 링크의 용도 나 목적지를 명확히 알 수 있게 제공해야 한다 . 링크 텍스트를 단순히 URL 경로로만 제공하지 않는 것을 권장 . Ex) “ 여기를 클릭해 주세요 .” 보다는 “다른 테스트를 하고 싶으시다면 클릭해 주세요 .” 라는 문장 전체를 링크 텍스트로 사용하는 것이 좋다 . Ex) 58
  • 59. 원칙 3. 이해의 용이 성 59
  • 60. 이해의 용이성 (Understandable) 콘텐츠는 이해할 수 있어야 한다 . 지침 (4 개 ) 검사항목 (6 개 ) 3.1( 가독성 ) 콘텐츠는 읽고 이해하기 쉬워야 한다 . 3.1.1( 기본 언어 표시 ) 주로 사용하는 언어를 명 시해야 한다 . 3.2( 예측 가능성 ) 콘텐츠의 기능과 실행결과는 예측 가능 해야 한다 . 3.2.1( 사용자 요구에 따른 실행 ) 사용자가 의도 하지 않은 기능 ( 새 창 , 초점 변화 등 ) 은 실행되지 않아야 한다 . 3.3( 콘텐츠의 논리성 ) 콘텐 츠는 논리적으로 구성해야 한 다 . 3.3.1( 콘텐츠의 선형화 ) 콘텐츠는 논리적인 순서 로 제공해야 한다 . 3.3.2( 표의 구성 ) 표는 이해하기 쉽게 구성해야 한다 . 3.4( 입력 도움 ) 입력 오류를 방지하거나 정정할 수 있어야 한다 . 3.4.1( 레이블 제공 ) 입력 서식에는 대응하는 레 이블을 제공해야 한다 . 3.4.2( 오류 정정 ) 입력 오류를 정정할 수 있는 방법을 제공해야 한다 . 60
  • 61. 검사항목 15 3.1.1 ( 기본 언어 표시 ) 주로 사용하는 언어를 명시해야 한다 . 웹 페이지의 언어 명시 -웹 브라우저는 웹 페이지를 구성하는 텍스트 콘텐츠의 언어 정보를 바탕으로 텍스트 콘텐츠를 화면에 표시하거나 보조 기기로 제공한다 . 화면 낭독 프로그 램을 사용하는 경우 , 텍스트 콘텐츠의 언어 정보를 화면 낭독 프로그램으로 제공하여 정확한 발음이 가능하도록 화면 낭독 프로그램을 제어하기도 한다 . 따라서 웹 페이지를 구성하는 기본 언어는 정확히 명시해야 한다 . -웹 페이지에서 주로 사용하는 언어는 페이지의 상단에 html 태그에 lang 속 성을 이용하여 다음과 같이 지정한다 . (ex: <html lang=“ko”> ) 참고자료 -지침에서는 해당 페이지의 주요 사용 언어만을 최소한으로 지정할 것을 요구 하고 있다 . 이렇게 함으로써 , 화면 낭독 프로그램이 페이지의 내용을 해당 언 어로 정확하게 읽어주도록 지시하는 역할을 한다 . 그러나 페이지 안에서 여러 개의 언어가 번갈아 가면서 쓰이는 경우 , 변경되는 언어가 나올 때마다 언어 를 지정해 주는 것이 좋다 . (ex : <p> 중국어로는 " 안녕하세요 " 라고 인사할 때 <span lang="zh"> 你好 </span> 라고 말합니다 .</p> ) 61
  • 62. 검사항목 15 브라우져에서 소스보기 (IE 를 사용 ) 를 클릭해서 직접 체크함 . -간혹 html 이 제대로 작성되지 않은 페이지들에서 , tool 로 검사할 경우 간혹 제대로 검출을 못하는 경우들이 발생함 . ( 마크업 오류로 인하여… ) 62
  • 63. 검사항목 16 3.2.1 ( 사용자 요구에 따른 실행 ) 사용자가 의도하지 않은 기능 ( 새 창 , 초점 변화 등 ) 은 실행되지 않아야 한다 . 서식 컨트롤이나 사용자 입력이 초점을 받았을 때 의도하지 않는 기능이 자동 적으로 실행되지 않도록 콘텐츠를 개발해야 한다 . 사용자가 마우스로 클릭하 거나 키보드를 이용하여 입력한 후 기능이 실행되어야 하며 , 사용자가 예측할 수 없는 상황에서 정보를 제공하지 않아야 한다 . 특히 사용자가 인지하지 못 한 상황에서 새 창 , 팝업 창 등을 제공하지 않아야 한다 . 63
  • 64. 검사항목 16 새 창이 열릴 것을 알려주는 방법 64
  • 65. 검사항목 16 이동 버튼이 없는 목록 선택 상자 개선방법 이동버튼 제공 , form 의 Onsubmit 활용 . 65
  • 67. 검사항목 16 로지텍이라는 제조사를 선택하자마자 바로 로지텍 마우스의 목록이 다음에 나 오게 된다 . 개선 체크 상자를 다 선택한 후 별도의 [ 확인 ] 이나 [ 제출 ] 버튼을 누르도록 하여 , 사 용자의 선택이 전송된 후 상품 목록이 화면에 나오도록 한다 . (ex: “ 오늘 하루 더 이상 보지 않기” 체크 후 팝업이 닫히는 경우도 오류 ) 67
  • 68. 검사항목 16 주민등록번호 앞자리 입력 후 자동으로 뒷자리로 포커스가 발생하는 경우 개선 포커스가 자동으로 이동되지 않게 수정 . 68
  • 69. 국내 웹 페이지들에서는 한시적인 사안을 홍보하거나 전달할 때 사용자가 원 하지 않는 팝업 창을 많이 사용한다 . 그러나 예측되지 않은 팝업은 사용자를 혼란스럽게 할 뿐만 아니라 시각장애인 , 인지 능력이 떨어지는 사람 , 운동 능 력이 떨어지는 사람들에게 웹 탐색을 어렵게 만드는 요인이 된다 . 개선방법 : 사용자가 원하지 않는 팝업 창은 제공하지 않아야 한다 . 검사항목 16 69
  • 70. 검사항목 16 레이어 팝업으로 구현 하는 경우 -레이어 팝업의 경우 기존의 콘텐츠를 가릴 수 있어 바로 닫을 수 있는 콘트롤 을 제공해야 하고 전후의 콘텐츠에 대한 콘텐츠 순서를 잘 구성하여 레이어 팝 업을 구성해야 합니다 . -결국 레이어는 페이지내에 콘텐츠가 구성되는것이기 때문에 콘텐츠의 순서를 잘 고려해야 하는 것 -레이어 닫기 버튼의 경우 . ( 닫기 버튼은 연결 (anchor) 의 의미나 기능이 아니 기 때문에 button 요소를 사용권장 . 닫기 버튼을 누를 때에도 JS 를 사용해서 인위적으로 a 요소로 초점을 옮겨주어야 합니다 . 왜냐하면 닫기 버튼을 누르 는 타겟 레이어가 display:none 이 되어버리면 초점이 페이지 최상단으로 되돌 아 가기 때문 .) 참고자료 : 레이어 열기 / 닫기 키보드 접근성 . (http ://naradesign.net/wp/2013/04/24/1996/) 70
  • 71. 검사항목 16 새 창을 체크 하는 방법 -사용자가 원하지 않게 새 창을 제공하려면 .open 을 사용해야 한다 . -소스에서 .open 을 검색 . ( 새 창을 제공하고 있는 함수들을 정리해서 해 당 함수들의 사용을 검색해서 직접 비교 – 이때 , 자바스크립트 link 된 파 일들도 모두 검색 ) “ 새창” or “ 새 창”을 검색해서 target=“_blank”, window.open 등을 함께 사용하 는지도 체크 . 71
  • 72. 검사항목 17 3.3.1 ( 콘텐츠의 선형화 ) 콘텐츠는 논리적인 순서로 제공해야 한다 . 웹 페이지에 제공되는 콘텐츠는 시각적으로 보았을 때 논리적인 순서로 보이 지만 , 그것을 선형적으로 풀어보면 논리가 어긋나지는 않은지 주의해야 한 다 . 화면낭독 프로그램과 같은 보조 기기는 전체 콘텐츠를 보통 소스 코드 순 서대로 풀어서 접근하게 딘다 . 이 때 시각적으로 보였던 순서와 달리 논리적 인 순서가 흐트러질 경우 , 보조 기기 사용자들은 내용을 이해할 수 없게 된다 . 72
  • 73. 검사항목 17 개선방법 : ul > li > ul > li 구조로 변경 . 73
  • 75. 검사항목 17 Firefox 부가기능 Web Developer Extension 을 활용 . CSS 가 제거된 페이지가 나옴 . 75
  • 76. 검사항목 18 3.3.2 ( 표의 구성 ) 표는 이해하기 쉽게 구성해야 한다 . 복잡한 데이터를 표로 제공할 경우 , 시각장애인 등도 이해할 수 있도록 표의 이 해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다 . 행과 열이 얽힌 표 에 담긴 정보를 음성으로 듣고 이해하는 것은 쉽지 않다 . 따라서 HTML 에서는 표의 실제 데이터와 그것의 헤더 ( 제목 열과 제목 행 ) 를 짝지어 주는 몇 가지 방법을 제공한다 . 그렇게 하면 , 복잡한 표를 풀어서 읽 을 때에도 내용을 이해할 수 있게 된다 . 76
  • 77. 검사항목 18 표 제목을 <caption> 으로 제공 , 표의 구조 또는 내용에 대한 요약을 summary 로 제공 (summary 와 caption 을 같은 용도로 사용하지 않아야 한 다 .) ※ 배치용 테이블에는 (th, caption 요소 , summary 속성을 사용하지 않아야 함 ) 77
  • 78. 검사항목 18 표의 제목과 요약 설명을 제공하는 것만으로 표의 내용을 정확히 이해할 수는 없다 . 중요한 것은 표에 담긴 데이터를 이해할 수 있게 하려면 , 표의 헤더 셀 과 데이터 셀을 명확히 구분해 주어야 한다 . 헤더 셀이란 다른 데이터들에 대한 제목 셀을 뜻하고 , HTML 마크업에서는 일반적인 <td> 가 아닌 <th> 라는 요 소를 사용한다 . 78
  • 79. 검사항목 18 표가 복잡해지면 단순히 <th> 를 지정하는 것으로 표의 헤더 셀과 데이 터 셀을 짝지을 수 없는 경우가 생긴다 . 이 경우 두 가지 방법 (id, hedaers 속 성을 이용하는 방법과 scope 를 이용하는 방법 ) 중 하나로 헤더 셀과 데이터 셀을 짝지어준다 . 79
  • 80. 검사항목 18 Pajet 을 활용 한 예 . (caption 과 summary 가 없이 th 만 사용한 table) 80
  • 81. 검사항목 19 3.4.1 ( 레이블 제공 ) 입력 서식에는 대응하는 레이블을 제공해야 한다 . 온라인 서식에서 사용되는 각 컨트롤 ( 예 : 텍스트 입력 상자 , 라디오 선택 버 튼 , 체크 상자 , 드롭다운 메뉴 등 ) 의 역할을 설명해 주는 제목 텍스트를 레이블이 라 한다 . (input type=“image | hidden | submit | button | reset” 을 제외한 모든 <input>, <textarea>, <select> 요소에 1:1 대응하는 <label> 요소를 제공해야 한다 .) 81
  • 82. 검사항목 19 명시적 레이블링 (explicit labeling) 과 암묵적 레이블링 (implicit labeling) 예전에는 <label> 요소를 쓸 때 레이블이 입력 서식을 감싸도록 하는 암묵적 인 레이블링을 허용하거나 권장하였다 . ( 암묵적인 방법 : <label> 주소 : <input type="text" name=“address" id="address" size="50"></label>) 암묵적인 방법을 사용함으로써 접근성을 보장하도록 하였다 . 그러나 이러한 방법은 <label> 과 입력 서식이 물리적으로 떨어질 수밖에 없는 상황 ( 예를 들 어 , 표의 서로 다른 셀에 들어가야 하는 상황 ) 에서 쓰기 어려울 뿐만 아니라 현재의 화면 낭독 프로그램에서 제대로 레이블을 인식하지 못하는 경우가 많 다 . 따라서 <label> 을 사용할 때 for 속성을 사용하여 어떤 입력 서식과 짝이 지어 지는지 명확하게 표시하는 명시적인 레이블링 방법을 사용해야 한다 . ( 명시적인 방법 : <label for="address"> 주소 :</label> <input type="text" name=“address" id="address“ size="50">) 82
  • 83. 검사항목 19 검색 창 옆에 검색 대상의 종류를 선택하는 목록 상자를 제공하는 경우 별도로 검색 대상이라고 레이블을 표시할 공간이 없으므로 , 목록상자의 레이블을 title 로 제공할 수 있다 . 83
  • 84. 검사항목 19 데이터 테이블에서 제목 행과 제목열을 표시하는 마크업 (<th> 등 ) 을 사 용했다고 하더라도 일반 데이터 셀에 서식 요소를 넣었을 경우 반드시 title 을 넣어주지 않으면 서식 에 무슨 값을 넣어야 하는 지 알 방법이 없다 . 84
  • 85. 검사항목 19 서식 컨트롤이 매우 많으며 , 이것들이 논리적으로 몇 개 집단으로 묶는 것이 전 체적으로 서식들을 이해하는 데 도움이 된다면 , 묶어주는 것이 좋다 . 85
  • 86. 검사항목 19 PAJET 을 이용한 체크 . 86
  • 87. 검사항목 20 3.4.2 ( 오류 정정 ) 입력 오류를 정정할 수 있는 방법을 제공해야 한다 . 입력 서식 작성 시 오류가 발생하지 않도록 미리 어떤 값을 넣어야 하는지 안 내를 해주고 , 만약 그래도 실수로 오류가 발생하는 경우 , 어디에서 어떤 오류 가 났는지 사용자가 알 수 있어야 하고 , 이를 정정할 수 있는 방법을 제공해야 한 다 . 오류가 생겼을 때 많이 쓰는 방법은 서식 전체를 다시 보여주고 , 오류가 발생 한 필드에 별도의 표시를 했는데 , 이것만으로는 충분하지 않다 . 화면 낭독 프로그램 사용자의 경우 , 오류가 생긴 필드에 순차적으로 접근하기 전까지는 무엇이 잘못되었는지 알 수가 없어 서식 전체가 작동하지 않는 것으 로 여기고 입력을 포기할 가능성이 있다 . 입력에 오류가 생겼을 때 그것을 보조 기술 사용자들이 알 수 있게 하고 , 오류 내용에 대한 설명에 접근할 수 있도록 하는 것이 이 검사 항목의 목적이다 . 87
  • 88. 검사항목 20 주의할 점 -입력 값의 오류를 검사하는 데 전적으로 자바스크립트와 같은 클라이언트측 스크립트 기술에만 의존해서는 안 된다는 것이다 . 클라이언트측 기술은 값이 서버에 전송되기 전에 유효성 검사를 빠르게 할 수 있는 장점이 있지만 , 스크 립트가 작동하지 않는 환경에서는 서버에 잘못된 값이 그대로 제출되어 데이 터베이스에 오류를 야기할 가능성이 있다 . 따라서 클라이언트측 오류 검사 기 능은 부가적으로 사용자 편의성을 위해 제공하는 것이고 , 사용자가 최종적으 로 값을 제출할 때 반드시 서버측에서 오류를 검사해야 한다 . -해당 서식의 전송버튼을 눌렀을 때 , 입력 내용이 모두 사라지면 안 된다 . 88
  • 89. 검사항목 20 서식 값에 대한 적합성 검사를 순전히 클라이언트측 자바스크립트로만 운용하 는 것은 위험하고 , 접근 가능하지 않다 . 어떤 이유이든지 사용자가 자바스크 립트를 사용하지 않거나 꺼놓은 경우에도 서버측에서 하는 검사를 생략할 수 없기 때문에 <form action=""> 값으로는 반드시 서버측 URI 를 넣어주어야 한 다 . 잘못된 예 개선 다음과 같이 서버측 처리 프로그램을 지정해 주되 , 자바스크립트 함수도 함께 지정해 주면 된다 . ( 참고자료 : 89
  • 90. 검사항목 20 입력 값의 형식 , 범위 , 예제를 미리 안내해 주는 예 HTML 순서는 <label for=“userId”> 아이디 </label> <span>4~24 자리의 영문 소문자 , 숫자만 사용 가능 </span> <input type=“text” id=“userId” /> CSS 로 구현 . 90
  • 91. 검사항목 20 잘못된 사례 : 오류 정보를 확인한 후 오류 발생 페이지로 돌아가지 못 하는 경우 해당 예제는 어떤 오류인지에 대한 설명이 없어 무엇이 잘못 되었는지 알 수도 없고 , 브라우저의 [ 뒤로 가기 ] 버튼을 눌러서 뒤로 가면 서식 자체가 사라져 버려 작동하지 않는다 . 오류 안내 페이지에서도 원래의 회원 가입 페이지로 돌아가는 링크가 없이 아 예 전체 사이트의 초기 ( 홈 ) 화면으로 가도록 하고 있기 때문에 , 회원 가입 페 이지를 다시 찾아간 다음 , 모든 정보를 처음부터 다시 입력해야 한다 . 91
  • 93. 견고성 (Robust) 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다 . 지침 (2 개 ) 검사 항목 (2 개 ) 4.1( 문법 준수 ) 웹 콘텐츠는 마 크업 언어의 문법을 준수해야 한다 . 4.1.1( 마크업 오류 방지 ) 마크업 언어의 요소 는 열고 닫음 , 중첩 관계 및 속성 선언에 오류 가 없어야 한다 . 4.2( 웹 애플리케이션 접근성 ) 웹 애플리케이션은 접근성이 있어야 한다 . 4.2.1( 웹 애플리케이션 접근성 준수 ) 콘텐츠 에 포함된 웹 애플리케이션은 접근성이 있어야 한다 . 93
  • 94. 검사항목 21 4.1.1 ( 마크업 오류 방지 ) 마크업 언어의 요소는 열고 닫음 , 중첩 관계 및 속 성 선언에 오류가 없어야 한다 . 태그의 열고 닫음 -마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 시 작 태그와 끝나는 태그가 정의되어야 한다 . 94
  • 95. 검사항목 21 < 참고 > HTML 과 XHTML 의 차이점 XHTML 은 HTML 을 XML 의 형식으로 구성한 XML 문서의 한 종류다 . HTML 과는 달리 , XHTML 은 문법이 엄격하여 표준 XML 해석기 (parser) 로 해석이 가능하다 . XHTML 1.0 과 XHTML 1.1 이 현재 W3C 의 권고안이다 . HTML 과 XHTML 의 주요 차이점은 다음과 같다 . •태그의 열고 닫음이 명확해야 한다 . •단독으로 사용되는 태그도 닫는 표기를 해야 한다 . •속성 값은 따옴표로 묶어야 한다 . •대소문자를 엄격하게 구분한다 . •축약형 속성을 사용하지 않는다 . •스크립트와 스타일은 CDATA 로 표기한다 . 참고 : XHTML 과 HTML 의 차이 (wystan) ( http://blog.wystan.net/2007/05/24/xhtml-vs-html ) < 참고 > 닫는 태그의 생략이 가능한 경우 다음 HTML 태그는 닫는 태그의 생략이 가능하다 . html, head, body, p, li, dt, dd, thead, tbody, tfoot, colgroup, tr, th, td, option 보 다 자세한 HTML 과 그밖에 마크업언어에 대한 정보는 W3C 웹사이트에서 확 인할 수 있다 . HTML 4.01 Specification ( http://www.w3.org/TR/html401/ ) 95
  • 96. 검사항목 21 태그의 중첩 -열고 닫는 태그가 나타내는 요소는 포함관계가 어긋나지 않아야 한다 . 또한 마크업 언어의 속성을 사용할 경우 , 해당 마크업의 문법을 최대한 준수하여 제공하는 것이 바람직하다 . 공지사항을 링크 목록으로 구현하는 과정에서 각 링크 항목의 닫는 태그 (</a>) 를 누락한 사례다 . 96
  • 97. 검사항목 21 속성 이름과 속성 값의 정확한 사용 -중복된 속성 제공 -따옴표 누락 -속성과 속성 사이에 공백이 누락 -속성 값을 따옴표로 구분하여 제공하지 않는 예 . ( 속성 값이 빈칸을 포함하는 경우 반드시 따옴표를 이용하여 표시해야 한다 .) 97
  • 98. 검사항목 21 -속성 값에 따옴표를 사용해야 할 경우 , 따옴표를 그냥 사용하면 속성 값의 종 결 문자로 인식하기 때문에 값으로 사용할 때 &quot; 로 사용해야 한다 . id 속성 값 -하나의 마크업 문서에는 같은 id 값을 가진 요소가 존재해서는 안 되므로 , id 값을 중복되지 않도록 사용해야 한다 . 98
  • 99. 검사항목 21 W3C Markup Validation (http://validator.w3.org/) 99
  • 100. 검사항목 22 검사항목 4.2.1 ( 웹 애플리케이션 접근성 준수 ) 콘텐츠에 포함된 웹 애플리케 이션은 접근성이 있어야 한다 . 웹 콘텐츠에 포함된 부가 애플리케이션 또는 웹 페이지의 기능을 실행하는 데 필요한 웹 애플리케이션은 웹 페이지를 사용하거나 접근하는 것을 방해하지 않아야 한다 . 웹 애플리케이션은 설명한 모든 검사항목들을 적용하여 제작하여야 한다 . 100
  • 101. 검사항목 22 플러그인 플랫폼이 제공하는 접근성 API 활용 •Best Practices fot Accessible Flash Design (http://www.adobe.com/resources/accessibility/best_practices/best_practices_ acc_flash.pdf ) •Flex accessibility (http://www.adobe.com/accessibility/products/flex/ ) •UI Automation and Microsoft Active Accessibility (http://msdn.microsoft.com/en-us/library/ms788733.aspx ) •Silverlight Accessibility Overview (http://msdn.microsoft.com/en-us/library/cc707824(VS.95).aspx ) •Java Accessibility Helper Early Access v0.8 (http://java.sun.com/developer/earlyAccess/jaccesshelper/ ) •Accessible Explorer (http://msdn.microsoft.com/en-us/library/ms696082.aspx ) 101
  • 102. 검사항목 22 웹 애플리케이션의 대체 콘텐츠 제공 플래시 대체 콘텐츠 제공 예제 사용자의 선택에 따 라 플래시 버전과 플래시가 아닌 버전 을 제공하는 예제 102
  • 103. 검사항목 22 잘못된 사례 : 이미지 링크를 자바스크립트로 잘못 구현한 경우 문제점 : 첫 번째는 키보드로 접근이 불가능하다는 점이며 , 두 번째는 이미지 가 의미하는 사용자 인터페이스의 종류가 링크임을 알려주지 못한다는 점이 다 . 개선 여기에서 a 태그의 href 속성으로 목적지 URL 을 제공하고 , onclick 이벤 트 핸들러의 URL 을 this.href 로 변경하였다 . onclick 이벤트 핸들러를 img 요소가 아닌 a 태그에 사용하여 this.href 로 URL 을 참조할 수 있게 하였다 . 이벤트 핸들러에 'return false;' 부분을 생략하면 마우스 클릭과 키보드에 의해서 새 창 열기와 함께 원래 창의 콘텐츠가 'popup.html' 로 로드 된다 . 103
  • 104. 검사항목 22 잘못된 사례 : 잘못된 이미지 버튼 구현 사례 개선 문제점 : 첫째 , 키보드 초점이 버튼 이미지로 이동하지 않아 키보드로 실행시킬 수 없다는 점이며 , 둘째 , 이미지가 의미 하는 사용자 인터페이스 요소 의 종류가 버튼임을 알 수 없다 는 점이고 , 셋째 , 이미지 버튼 에 대체 텍스트가 누락되어 그 용도를 알 수 없는 점이다 . 서식 전송을 의미하는 버튼 컨 트롤은 form 요소와 함께 <button type="submit">, <input type="submit">, <input type="image"> 요소 중 하나를 이용하여 구현해야 한다 . 104
  • 106. 참고한 자료 • 웹 접근성의 정의 | 웹 접근성 연구소 ( http://www.wah.or.kr/Accessibility/define.asp ) • 웹 접근성 준수를 위한 가이드라인 ( 안 ) – 현준호 (http://jhyun.files.wordpress.com/2008/11/ec9bb9-eca091eab7bcec84b1- eca480ec8898- eab080ec9db4eb939ceb9dbcec9db8_20081103_ed9884eca480ed98b8.pdf ) • 한국형 웹 콘텐츠 접근성 지침 2.0 ( http://wah.or.kr/Example2.0/ ) • Professional Accessibility Javascript Evaluation Tools - PAJET ( http://mydeute.com/was/was.html ) • 웹 접근성을 고려한 콘텐츠 제작 기법 2.0 (http://www.wah.or.kr/_Upload/pds/%EC%9B%B9%20%EC%A0%91%EA %B7%BC%EC%84%B1%EC%9D%84%20%EA%B3%A0%EB %A0%A4%ED%95%9C%20%EC%BD%98%ED%85%90%EC %B8%A0%20%EC%A0%9C%EC%9E%91%20%EA%B8%B0%EB %B2%95%20v2.0(111130).pdf ) • NULI (http://html.nhncorp.com/accessibility ) • 웹 접근성 품질인증 심사가이드 1.2 (http://www.wah.or.kr/Board/brd_view.asp? page=3&brd_sn=2&brd_idx=826 ) 106