Front-end 개발자를 위한
웹표준 & 웹접근성 이야기
하드코딩하는 사람들 김민종
2014. 2. 15
About 빼로
I.  빼빼로데이에 태어남
II.  8년차 개발자&퍼블리셔&강사
III.  마이다스아이티 근무
IV.  웹 어플리케이션, 플래시 대체 모션구현
누구를 위한 이야기인가?
이 흰 여백이 무엇으로 보이나요?
목차
I. 

웹 표준이란?

II. 

웹 표준의 첫 단추 Doctype

III. 

상황에 맞는 태그 사용하기

IV. 

웹 접근성이란?

V. 

국제 웹 접근성 지침과 한국 웹 접근성 지침의 차이

VI. 
...
I. 웹 표준이란?
웹은 무엇인가?

웹 = 문서!
HTML 구성요소
• 
• 
• 
• 
• 
• 

제목요소(H1, H2 ,H3…)
문단요소(P)
텍스트 효과 (Bold, Italic, Underline)
표(TABLE)
이미지삽입(IMG)
목록(UL, OL, DL)
CSS는 무엇인가?
워드프로세서의 스타일
워드프로세서의 스타일
생산과 소비의 분리
HTML

워드프로세서
한글,
MS-Word

메모장,
드림위버,
에디트플러스
NotePad++

익스플로러,
파이어폭스,
크롬,
사파리,
오페라

생산/소비

생산

소비
웹 표준이란?
HTML 문서양식을 준수하는
의미론적(시멘틱)인 마크업
II. 웹 표준의 첫 단추 Doctype
Doctype은 무엇인가?
문서의 양식/버전
HTML 4.01, XHTML1.0, HTML5

=
Word2003 doc파일, Word2007 docx파일
Doctype의 종류
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1....
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 멀티미디...
WCAG 지침 예문
2. 운영의 용이성
• 

지침 2.1 모든 기능은 키보드로 사용 가능해야 함
- 

2.1.1 모든 기능은 키보드로 사용 가능해야 함 (Level A)
단, 그리기(Drawing), 드래그 앤 드롭...
VI. 개발자가 지켜야 할
웹 접근성 항목
선정 기준
1.  디자인/마크업 작업상태가 웹 접근성을 준수했다고 가정
2.  UI작업이나 유효성 검사 등 스크립트를 작업한다고 가정
개발자에게 웹 접근성이란?
즐겁게 로딩되다가
팝업 뜨지 말고,

그대로 멈춰라
배경음 끄고,

슬라이드도

움직이지마
개발자가 지켜야할 웹 접근성 항목
1.3.4 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
2.2.1 (응답시...
VII. 웹 표준 & 웹 접근성
실무 사례
웹 표준 실무사례
Doctype 오류
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM...
웹 표준 실무사례
Doctype 상단에 태그나 주석이 들어간 경우
웹 표준 실무사례
A태그 마크업 오류
<a href=“javascript:pop_open();”>팝업</a>

<a href=“http://www.naver.com” onclick=“window.open(this.hre...
웹 접근성 실무사례
1.3.4 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.
지침
1.  자동적으로 재생되는 배경음의 지속시간은 3초 미만
2.  3초 이상 재생되는 배경음은 멈춤/일시정지/음량...
웹 접근성 실무사례
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

키보드로 접근 가능한 링크와 버튼
<a>, <area>, <button>, <input>, <object>, <s...
웹 접근성 실무사례
2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

키보드만으로 이전 입력 서식으로 이동이 불가능한 경우
웹 접근성 실무사례
2.2.1 (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
웹 접근성 실무사례
2.2.2 (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
웹 접근성 실무사례
3.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능
(새 창, 초점 변화 등)은 실행되지 않아야 한다.
웹 접근성 실무사례
3.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능
(새 창, 초점 변화 등)은 실행되지 않아야 한다.

자동초점이동이 가능한 예외 사례
웹 접근성 실무사례
3.4.2 (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
발표를 마치며…
감사합니다
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기
Upcoming SlideShare
Loading in...5
×

개발자를 위한 웹표준 & 웹접근성이야기

11,665

Published on

Published in: Technology
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,665
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
84
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

개발자를 위한 웹표준 & 웹접근성이야기

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

    Clipping is a handy way to collect important slides you want to go back to later.

×