개발자를 위한 웹표준 &...
DESCRIPTION
TRANSCRIPT
Front-end 개발자를 위한 웹표준 & 웹접근성 이야기
하드코딩하는 사람들 김민종 2014. 2. 15
About 빼로
I. 빼빼로데이에 태어남
II. 8년차 개발자&퍼블리셔&강사
III. 마이다스아이티 근무
IV. 웹 어플리케이션, 플래시 대체 모션구현
누구를 위한 이야기인가?
이 흰 여백이 무엇으로 보이나요?
목차 I. 웹 표준이란?
II. 웹 표준의 첫 단추 Doctype
III. 상황에 맞는 태그 사용하기
IV. 웹 접근성이란?
V. 국제 웹 접근성 지침과 한국 웹 접근성 지침의 차이
VI. 개발자가 지켜야 할 웹 접근성 항목
VII. 웹 표준 & 웹 접근성 실무사례
I. 웹 표준이란?
웹은 무엇인가?
웹 = 문서!
HTML 구성요소
• 제목요소(H1, H2 ,H3…) • 문단요소(P) • 텍스트 효과 (Bold, Italic, Underline) • 표(TABLE) • 이미지삽입(IMG) • 목록(UL, OL, DL)
CSS는 무엇인가?
워드프로세서의 스타일
워드프로세서의 스타일
생산과 소비의 분리
메모장, 드림위버, 에디트플러스 NotePad++
익스플로러, 파이어폭스, 크롬, 사파리, 오페라
한글, MS-Word
워드프로세서
생산/소비
HTML
생산 소비
웹 표준이란?
HTML 문서양식을 준수하는 의미론적(시멘틱)인 마크업
II. 웹 표준의 첫 단추 Doctype
Doctype은 무엇인가?
문서의 양식/버전
HTML 4.01, XHTML1.0, HTML5
Word2003 doc파일, Word2007 docx파일
=
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML>
HTML 4.01
XHTML 1.0
HTML 5
Doctype의 종류
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.wapforum.org/DTD/xhtml-mobile12.dtd"> XHTML Mobile 1.2
HTML5를 대하는 우리의 자세
III. 상황에 맞는 태그 사용하기
시멘틱한 마크업이란?
글의 의미에 맞는 태그 사용하기
P태그의 흑역사 엔터 두개!! <br><br>
시멘틱 레이아웃 DIV+CSS
웹표준 바람
IV. 웹 접근성이란?
접근성이란? 사용자의 신체적 특징/지역/성별/나이 등을 고려하여 가능한 많은 사용자가 불편 없이 이용할 수 있도록 제품/서비스를 제공하고 평가
웹 접근성의 대상은? 남녀노소가 어떠한 환경에서도 정보를 얻을 수 있게 하는 것이 기본
한국형 웹 콘텐츠 접근성 지침의 경우
70% 시각장애, 30% 기타장애
웹 접근성에 해당되는 장애는?
대 중 소
신체적 장애
외부 신체적 기능 장애 지체장애, 뇌병변장애, 시각장애, 청각장애, 언어장애, 안면장애
내부 기관 장애 신장장애, 심장장애, 호흡기장애, 간장애, 장루요루장애, 간질장애
정신적 장애 지적장애, 정신장애, 자폐성 장애
웹 접근성에 해당되는 장애는? 장애유형 특징 보완대책
시각장애
전맹 모니터를 볼 수 없음, 마우스 사용 어려움 스크린리더, 키보드
약시 모니터 사용이 일부 가능함 화면확대/고대비
색맹 색을 구별할 수 없음 색의 제한적 사용
청각장애 사운드, 오디오 등을 청취할 수 없음 수화, 시각정보 제공
지체장애 상지장애 손을 사용할 수 없음 마우스 대체방법,
키보드만 사용
기타 움직임이 어려움 충분한 시간 제공
언어장애 복잡한 용어, 어려운 용어의 이해 불가능 쉬운 용어 사용
웹 접근성 지침 신뢰해도 될까?
국제표준화기구인 W3C에서 만든 WCAG
-> WCAG를 기반으로 KWCAG 제정
V. 국제 웹 접근성 지침과 한국 웹 접근성 지침의 차이
WCAG의 3단계 우선순위
Level A– 반드시 준수(must)
Level AA – 가급적 준수(should)
Level AAA – 준수하면 좋음(may)
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)
WCAG 지침 예문
2. 운영의 용이성
• 지침 2.1 모든 기능은 키보드로 사용 가능해야 함
- 2.1.1 모든 기능은 키보드로 사용 가능해야 함 (Level A)
단, 그리기(Drawing), 드래그 앤 드롭, 실시간 모형 조정 등 예외
- 2.1.2 키보드 운영시 함정(Trap)에 빠지지 않아야 함 (Level AA)
- 2.1.3 모든 기능은 키보드로 사용 가능해야 함 (Level AAA)
예외 없이 모두 준수한 경우
VI. 개발자가 지켜야 할 웹 접근성 항목
선정 기준
1. 디자인/마크업 작업상태가 웹 접근성을 준수했다고 가정
2. UI작업이나 유효성 검사 등 스크립트를 작업한다고 가정
개발자에게 웹 접근성이란?
즐겁게 로딩되다가 그대로 멈춰라 팝업 뜨지 말고, 움직이지마 배경음 끄고, 슬라이드도
개발자가 지켜야할 웹 접근성 항목
1.3.4 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
2.2.1 (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
2.2.2 (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
3.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
3.4.2 (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
VII. 웹 표준 & 웹 접근성 실무 사례
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">
Doctype 상단에 태그나 주석이 들어간 경우
웹 표준 실무사례
A태그 마크업 오류
웹 표준 실무사례
<a href=“javascript:pop_open();”>팝업</a>
<a href=“http://www.naver.com” onclick=“window.open(this.href, ’’, ’’);”>팝업</a>
1.3.4 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.
웹 접근성 실무사례
지침 1. 자동적으로 재생되는 배경음의 지속시간은 3초 미만
2. 3초 이상 재생되는 배경음은 멈춤/일시정지/음량조절 등의 제어기능을 웹 페이지의 첫 부분에 제공
올바르게 구현한 사례 1. 웹 페이지를 로딩하면 자동적으로 팡파레가 들린 후 종료
2. 웹 페이지를 로딩하면 “또 하나의 가족, 삼촌” 이라는 멘트가 한 번 제공된다.
3. 웹 페이지를 로딩하면 “시작하려면 엔터키를 누르세요” 라는 멘트가 한 번 제공된다.
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
웹 접근성 실무사례
키보드로 접근 가능한 링크와 버튼 <a>, <area>, <button>, <input>, <object>, <select>
키보드로 접근 불가능한 사례 <img src=“images/button.png” onclick=“print();” alt=“인쇄”>
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
웹 접근성 실무사례
키보드만으로 이전 입력 서식으로 이동이 불가능한 경우
2.2.1 (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
웹 접근성 실무사례
2.2.2 (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
웹 접근성 실무사례
3.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
웹 접근성 실무사례
3.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
웹 접근성 실무사례
자동초점이동이 가능한 예외 사례
3.4.2 (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
웹 접근성 실무사례
발표를 마치며…
감사합니다