5. 목차
I.
웹 표준이란?
II.
웹 표준의 첫 단추 Doctype
III.
상황에 맞는 태그 사용하기
IV.
웹 접근성이란?
V.
국제 웹 접근성 지침과 한국 웹 접근성 지침의 차이
VI.
개발자가 지켜야 할 웹 접근성 항목
VII. 웹 표준 & 웹 접근성 실무사례
16. Doctype의 종류
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 5
<!DOCTYPE HTML>
XHTML Mobile 1.2
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.wapforum.org/DTD/xhtml-mobile12.dtd">
26. 웹 접근성의 대상은?
남녀노소가 어떠한 환경에서도
정보를 얻을 수 있게 하는 것이 기본
한국형 웹 콘텐츠 접근성 지침의 경우
70% 시각장애, 30% 기타장애
27. 웹 접근성에 해당되는 장애는?
대
중
소
외부 신체적 기능 장애
지체장애, 뇌병변장애,
시각장애, 청각장애,
언어장애, 안면장애
내부 기관 장애
신장장애, 심장장애,
호흡기장애, 간장애,
장루요루장애, 간질장애
신체적 장애
정신적 장애
지적장애, 정신장애, 자폐성 장애
28. 웹 접근성에 해당되는 장애는?
장애유형
특징
보완대책
전맹
모니터를 볼 수 없음, 마우스 사용 어려움
스크린리더, 키보드
약시
모니터 사용이 일부 가능함
화면확대/고대비
색맹
색을 구별할 수 없음
색의 제한적 사용
사운드, 오디오 등을 청취할 수 없음
수화, 시각정보 제공
상지장애
손을 사용할 수 없음
마우스 대체방법,
키보드만 사용
기타
움직임이 어려움
충분한 시간 제공
복잡한 용어, 어려운 용어의 이해 불가능
쉬운 용어 사용
시각장애
청각장애
지체장애
언어장애
29. 웹 접근성 지침 신뢰해도 될까?
국제표준화기구인 W3C에서 만든 WCAG
-> WCAG를 기반으로 KWCAG 제정
31. WCAG의 3단계 우선순위
Level A– 반드시 준수(must)
Level AA – 가급적 준수(should)
Level AAA – 준수하면 좋음(may)
32. WCAG 지침 예문
1. 인식의 용이성
•
지침 1.1 텍스트가 아닌 콘텐츠에 대하여 대체텍스트 제공
-
•
1.1.1 텍스트가 아닌 콘텐츠에 대해 대체 텍스트를 제공 (Level A)
지침 1.2 멀티미디어에 캡션과 다른 대체물 제공
-
1.2.2 녹화된 미디어에 대한 자막 제공 (Level A)
-
1.2.4 실시간 미디어에 대한 자막 제공 (Level AA)
-
1.2.5 녹화된 비디오에 대한 화면해설 제공 (Level AA)
-
1.2.6 녹화된 미디어에 대해 수화 제공 (Level AAA)
-
1.2.7 녹화된 미디어 및 비디오 전용에 대체미디어 제공 (Level AAA)
자막을 보기 어렵거나 화면해설을 듣기 어려운 사용자가 보조기기 등으로 정보사용을 가능하게 함
-
1.2.9 실시간 오디오 전용에 대해 대체콘텐츠 제공 (Level AAA)
33. WCAG 지침 예문
2. 운영의 용이성
•
지침 2.1 모든 기능은 키보드로 사용 가능해야 함
-
2.1.1 모든 기능은 키보드로 사용 가능해야 함 (Level A)
단, 그리기(Drawing), 드래그 앤 드롭, 실시간 모형 조정 등 예외
-
2.1.2 키보드 운영시 함정(Trap)에 빠지지 않아야 함 (Level AA)
-
2.1.3 모든 기능은 키보드로 사용 가능해야 함 (Level AAA)
예외 없이 모두 준수한 경우
37. 개발자가 지켜야할 웹 접근성 항목
1.3.4 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
2.2.1 (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
2.2.2 (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
3.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은
실행되지 않아야 한다.
3.4.2 (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
39. 웹 표준 실무사례
Doctype 오류
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“
"http://www.w3.org/TR/html4/strict.dtd">
41. 웹 표준 실무사례
A태그 마크업 오류
<a href=“javascript:pop_open();”>팝업</a>
<a href=“http://www.naver.com” onclick=“window.open(this.href, ’’, ’’);”>팝업</a>
42. 웹 접근성 실무사례
1.3.4 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.
지침
1. 자동적으로 재생되는 배경음의 지속시간은 3초 미만
2. 3초 이상 재생되는 배경음은 멈춤/일시정지/음량조절 등의 제어기능을 웹 페이지의 첫 부분에 제공
올바르게 구현한 사례
1. 웹 페이지를 로딩하면 자동적으로 팡파레가 들린 후 종료
2. 웹 페이지를 로딩하면 “또 하나의 가족, 삼촌” 이라는 멘트가 한 번 제공된다.
3. 웹 페이지를 로딩하면 “시작하려면 엔터키를 누르세요” 라는 멘트가 한 번 제공된다.
43. 웹 접근성 실무사례
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
키보드로 접근 가능한 링크와 버튼
<a>, <area>, <button>, <input>, <object>, <select>
키보드로 접근 불가능한 사례
<img src=“images/button.png” onclick=“print();” alt=“인쇄”>
44. 웹 접근성 실무사례
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
키보드만으로 이전 입력 서식으로 이동이 불가능한 경우
