슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

민아 견
5 years ago
Views:

1 Daum 의웹접근성 추짂젂략 (Daum 첫화면으로본웹접근성 ) Daum Communications / TI 센터 / UI 개발팀최재성

2 목차 1 추짂현황 2 웹접근성? 2.1 IWA TFT 2,2 웹접근성준수실태 2.3 웹접근성? 웹표준? 웹사용성? 2.4 국제 / 국내동향 2.5 기대효과 3 웹접근성향상기술실무적용방법 3.1 웹표준화 HTML HTML Element (X)HTML/CSS/SCRIPT 분리 구조화 일반문법준수 DTD 문법준수 CSS 속성 에러속성 경고속성 3.2 웹접근성 HTML 웹문서제목 문서언어 대체수단제공 키보드로만서비스이용 독립적인릿크텍스트 페이지자동새로고침 온라인양식 CSS 미디어설명자 3.3 웹사용성 HTML 반복네비게이션릿크 양식컨트롟 인접릿크분리 새브라우저창열기 4 Daum 첫화면으로본웝접근성 5 결롞

3 목차 1 추짂현황 UI 워크샵 IWA TFT 결성 시각장애인 UT UI 개발가이드라인 사내 / 와교육및홍보 직굮영역확장 2 웹접근성? 2.1 IWA TFT 2,2 웹접근성준수실태 2.3 웹접근성? 웹표준? 웹사용성? 2.4 국제 / 국내동향 2.5 기대효과 3 웹접근성향상기술실무적용방법 4 Daum 첫화면으로본웝접근성 4.1 개발프로세스 4.2 웹접근성개발프로세스 4.3 적용된웹접근성예제 웹표준화 part (X)HTML/CSS/JASCRIPT 분리 구조화 W3C 유효성검증기통과 Tip 웹사용성 part 목차제공 양식콘트롟 fieldset / legend 이용가이드 웹접근성 part 키보드이용 독립적릿크텍스트 의미롞적요소 4.4 효과 5 결롞

4 1. 추짂현황

5 UI 직굮워크샵 웹접근성 웹표준 공평한인터넷홖경을위한창의적 UI 발상프로젝트 2006 년 6 월 16 일 UI 직굮워크샵세미나중..

6 IWA TFT 결성 IWA TFT (Improve Web Accessibility TFT) UI 개발직굮으로구성된웹접근성향상을위한그룹 본격적인 UI 개발단연구개발 홖경적요인 + 싞체적요인 국내실정에맞게고려 시각장애인 UT UI 개발가이드라인제공및사내 / 외교육 직굮영역확장

7 시각장애인 UT IWA TFT 주최시작장애인 UT 1 차 2007 년 6 월 5 일 한국시각장애인복지관

8 시각장애인 UT UT 시나리오 시각장애인이스크린리더기를이용하여미디어다음을이용하는모습 센스리더 국내대표적인스크린리더

9 시각장애인 UT 한국정보문화짂흥원주최포탈사이트웹접근성실태조사 2007 년 9 월 12 일 한국시각장애인복지관 포털 6 개사중 1 개사만회원가입성공!

10 시각장애인 UT 탑 회원가입페이지로이동 회원종류선택

11 UI 개발가이드라인화 HTML/CSS/JAVASCRIPT 가이드 웹표준, 웹접근성보장된시맨틱맀크업텐플릾화 base css 배포로 CSS 일관화 javascript 공통라이브러리제공 서비스오픈체크리스트에웹접근성관렦항목추가

12 웹접근성사내 / 외교육홗동강화및사내홍보 07. Daum/Lycos 개발자컨퍼런스 07. 웹접근성향상캠페인참여 07. Daum, 웹접근성모범사이트수상 08. 싞입개발공채교육 08. UI개발자 / 개발자역량강화교육 08. UI Dev 컨퍼런스

13 직굮영역확장 UI 개발 + 마케팅 기획 개발 디자인

14 2. 웹접근성?

15 정보화격차

16 정보화격차 인터넷이용률 ( 06) 100% 74.8% 28.2% 50% 46.6% 젂체국민 장애인 한국정보문화짂흥원 정보화격차지수 일반인 (100) 대비장애인정보화수준 ( 06) % 35.1% 64.9 일반 장애인정보화수준 양 / 질적홗용

17 웹접근성 Web Accessibility [ Web ] Word Wide Web [ ac ces si bil i ty ] n. 접근 ( 가능성 ), 접근하기쉬움 ; 이해하기쉬움

18 일반인, 장애인, 노인등모든사용자 웹접근성 Web Accessibility 브라우저, 저속사양컴퓨터, PDA 등모든홖경 웹접근성 이란? 사용자의싞체적홖경적조건에관계없이웹에접근하여이용가능하도록보장하는겂

19 웹접근성? 웹표준? 웹사용성? 웹접근성향상을위한가이드라인 (Web Contents Accessibility Guidelines) 이용할수있는 만족할수있는 웹사용성 (Web Usability) 접근할수없는 웹접근성 (Web Accessibility) 웹에접근하고이용할수있는가.. 웹표준 (Web Standard) 편리하고정확하게사용하여사용자가만족할수있는가.. WEB WWW 관렦표준스펙 CSS, CGI, DOM, HTML, XTHML, XML, XSLT, JavaScript (ECMA Script)

20 국제동향 영국 1995 장애인차별금지법웹접근성인증마크제도시행 일본 2004 장애인기본법 2003 JIS X 미국 1990 미국장애인법, 통싞법 255 조 1998 재홗법 508 조 2000 웹접근성지침 508 조 호주 1992 장애인차별금지법 (DDA) 2003 W3C 지침 ( 인권동등기회보장위원회 )

21 국내동향 장애인노인등을위한정보통싞접근성향상을위한권장지침정보화촉짂기본법정보격차해소에관한법률 편의증짂법한국형웹콘텎츠접근성향상을위한지침 KWCAG 년까지공공기관홈페이지표준화 장애인차별금지법입법 WCAG 2.0 짂행중 월 10 일 - 장애인차별금지및권리구제등에관한법률시행

22 기대효과 이용자확대 웹사용성증가 소외계층정보격차해소로평등한기회제공 다양한이용자확대플랫폼, 홖경조건이용확대 생산성향상 사회갂접비용절감 다양한플랫폼 / 다양한홖경조건이용확대 효율적웹운영 경량의로딩속도 효율적인정보검색 웹사이트제작기갂단축 높은호홖성및운영비용절감 웹기술품질보증 기업이미지홍보 사회공헌정부정책부응에따른이미지제고효과

23 3. 웹접근성향상기술 실무적용방법 웹접근성 (Web Accessibility) 웹표준 (Web Standard) HTML Element (X)HTML/CSS/SCRIPT 분리 구조화 (X)HTML 일반문법준수 (X)HTML DTD 문법준수 웹사용성 (Web Usability) 반복네비게이션링크 양식컨트롤 인접한링크는공백으로붂리 새브라우저창열기 웹문서에는독립적인제목을붙인다. 문서의언어변경내용확인 대체수단제공 키보드로만서비스이용가능 독립적인링크텍스트 새브라우저창열기 페이지자동새로고침지양 온라인양식 (Form)

24 웹표준화실무적용방법 Web standards HTML HTML Element (X)HTML/CSS/SCRIPT 분리 구조화 일반문법준수 DTD 문법준수 CSS 속성 에러속성 경고속성 웹표준

25 (X)HTML Element HTML < 웹표준화 HTML Element 모델 Empty Element HR IMG BR INPUT AREA LINK Non-Empty Element Empty Element 를제외한나머지모든 Element HTML Content 모델 Block P 제목 목록 preformatted DL DIV NOSCRIPT BLOCKQUOTE FORM HR TABLE FIELDSET ADDRESS Inline #PCDATA 글자스타일 문구 special Formctrl

26 (X)HTML Element HTML < 웹표준화 HTML Element 역할 의미 데이터의내용자체에관렦된정보서술을위한 Element TITLE, ADDRESS, CODE 구조 문서의구성방식에관렦된정보의의미있는 Element HEAD BODY DIV H1,H2,UL,DL,OL,LI,LINK,ADDRESS,STRONG,BLOCKQUOTE,Q,P 표현 문서의시각적유형에관렦된정보로 CSS 로대체하여표현 Element FONT,I,B 행동 맀크업의동작, 이벤트처리 Element SCRIPT

27 (X)HTML Element HTML < 웹표준화 HTML Element 문서본체 BODY ADDRESS DIV BLOCKQUOTE HR Form FORM FIELDSET LEGEND Formctrl INPUT SELECT TEXTAREA LABEL BUTTON type="text", type="password", type="radio",type="checkbox", type="hidden", type="submit", type="reset"

28 (X)HTML Element HTML < 웹표준화 HTML Element 목록 표 DL UL OL Frame DT DD LI TABLE CAPTION THEAD TBODY TFOOTER TR TH TD FRAMESET FRAME NOFRAME 사젂양식화포멧 PRE

29 (X)HTML Element 선택자 HTML < 웹표준화 id/class 선택자지정 id 엘리먼트에고유한이름을부여한다. 문서릿크에서목표 anchor( 앵커 ) 로사용된다. 스크립트로부터특정엘리먼트를호출할수있다. 문서로부터데이터추출할때필트를지정하거나문서를다른양식으로번역처리를위해사용된다. class 엘리먼트에하나또는여러클래스이름을부여한다. 여러엘리먼트에동일하게부여할수있으며여러개의클래스를가질경우공갂으로분리한다. id/class 선택자위치 표현하고자하는엘리먼트의부모엘리먼트에주는것이좋다. <ul> <li><a href= # class= go_cafe >cafe</a></li> <li><a href= # class= go_blog >blog</a></li> </ul> <ul> <li class= go_cafe ><a href= # > 링크 </a></li> <li class= go_blog ><a href= # > 링크 </a></li> </ul>

30 (X)HTML Element HTML < 웹표준화 id/class 선택자지정 id 엘리먼트에고유한이름을부여한다. 문서릿크에서목표 anchor( 앵커 ) 로사용된다. 스크립트로부터특정엘리먼트를호출할수있다. 문서로부터데이터추출할때필트를지정하거나문서를다른양식으로번역처리를위해사용된다. class 엘리먼트에하나또는여러클래스이름을부여한다. 여러엘리먼트에동일하게부여할수있으며여러개의클래스를가질경우공갂으로분리한다. id/class 선택자위치 표현하고자하는엘리먼트의부모엘리먼트에주는것이좋다. <ul> <li><a href= # class= go_cafe >cafe</a></li> <li><a href= # class= go_blog >blog</a></li> </ul> <ul> <li class= go_cafe ><a href= # > 링크 </a></li> <li class= go_blog ><a href= # > 링크 </a></li> </ul>

31 (X)HTML Element 선택자네이밍 HTML < 웹표준화 시맨틱네이밍 의미를가짂네이밍사용하라..bluetext.redborder.d_11_666.b.notice_list.gnb.more.footer 이름을지을때는왜필요한가를생각해야한다. 어떻게보이는가를생각해서이름을지으면곤란할수있다. 생김새야언제든지바뀔수있지만, 이유는항상그대로있기때문이다.

32 (X)HTML/CSS/SCRIPT 붂리 HTML < 웹표준화 구조화된맀크업 (X)HTML CSS 디자인요소 SCRIPT 행동양식

33 구조화 HTML < 웹표준화 웹문서 문서내용에의미를부여하는작업 대제목 내용 중제목 내용 소제목내용소제목내용 중제목내용소제목내용표그림텍스트

34 구조화 HTML < 웹표준화 웹문서 body 의미와구조에맞는태그사용 대제목 내용 중제목 h1 내용 h2 내용 내용 문서의제목 (h1 ~ h6) 문단 (p) 표 (table), 순서있는리스트 (ol) 순서없는리스트 (ul) 소제목내용소제목내용 h3 내용 h3 내용 정의리스트 (dl) 중제목 h2 인용 (blockquote,q) 하이퍼릿크 (a) 강조구문 (strong, em) 내용 소제목내용 내용 h3 내용 표 그림 텍스트 table img p

35 (X)HTML 일반문법준수 HTML < 웹표준화 정확한문서구조준수 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title>daum 서비스명 </title> </head> <body> </body> </html>

36 (X)HTML 일반문법준수 HTML < 웹표준화 모든요소완벽하게중첩되어야한다 <p>this is a <strong>bad</p>example</strong> <p>this is a <strong>good</strong>example</p> 모든속성값은속성이함께선언되어야한다. <option value="wrong" selected>bad example</option> <option value="right" selected="selected">good example</option> 모든요소와속성은소문자여야한다. <DIV ID="idbox">bad example.</div> <div id="idbox">good example.</div> 모든속성값은인용부호 ( ) 앆에표기한다. <table border=1 cellpadding=0 cellspacing=0>...</table> <table border="1" cellpadding="0" cellspacing="0">...</table>

37 (X)HTML 일반문법준수 HTML < 웹표준화 부위인식자의모든 NAME 속성을 ID 속성으로변경한다. <img src= pic.jpg alt= 사진 name= best_pic /> <img src= pic.jpg alt= 사진 id= best_pic /> <img src= pic.jpg alt= 사진 id= best_pic name= best_pic /> 구버젼브라우져들의호한성 모든요소는닫아야한다. <img src="good_sample.gif" alt=" 좋은예제이미지 " /> <input type="text" /> <hr /> <br /> HTML 4.01 Transitional 은제외 <div></div> <p></p> <strong></strong> Bad : <div /> <p /> <strong />

$write("<\/p>"); // --> `</script> <a href= http://tab.search.daum.net/dsa/search?nil_profile=g&nil_searchtitle=1&w=k nowledge&q= >bad example</a> <a href= http://tab.search.daum.net/dsa/search?nil_profile=g&nil_searchtitle=1 &w=knowledge&q= >good example</a>$

38 (X)HTML 일반문법준수 HTML < 웹표준화 text 나 URL, script 에포함된특수문자는 escape 시킨다. <, ", &, > 은 <, ", &, > 로 escape text 나 URL, script 에포함된특수문자는 escape 시킨다. <script type="text/javascript">  `</script> <a href= nowledge&q= >bad example</a> <a href= &w=knowledge&q= >good example</a>

39 (X)HTML DTD 문법준수 HTML < 웹표준화 (X)HTML DTD 종류 엄격 (Strict) DTD 변이 (Transitional) DTD 프레임셋 (Frameset) DTD DTD 구성요소 1. DTD 코멘트 (comment) 2. 파라메터엔티티 (parameter entity) 3. 엘레멘트 (element ) 4. 애트리뷰트 (attribute) 5. 글자참조 [& ;]

40 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 1. DTD 코멘트 (comment) <!ELEMENT PARAM - O EMPTY -- 명명된특성이름의값 -->

41 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 2. 파라메터엔티티 (parameter entity ) 정의 = 마크로 (macro) 문자열설명 : <!ENTITY % fontstyle "TT I B BIG SMALL"> 파라메터엔티티포함 : <!ENTITY % inline "#PCDATA %fontstyle; %phrase; %special; %formctrl;">

42 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 3. 엘레멘트 (element ) 선언 <!ELEMENT ( 엘레멘트이름 ) ( 태그옵션 ) ( 컨텎트모델 ) > <!ELEMENT UL - - (LI)+ > <!ELEMENT IMG - O EMPTY >

43 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 3. 엘레멘트 (element ) 선언 3.1 태그옵션 엘레멘트종료태그는선택적이다 EMPTY 0 0

44 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 3. 엘레멘트 (element ) 선언 3.2 컨텎트 (content) 모델정의 그엘레멘트타입에서어떤내용들이포함될수있는가를표시 컨텎트모델문법 허용 / 금지엘레먼트 DTD 엔티티 문서텍스트 (SGML 로지정된 "#PCDATA")

45 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 3. 엘레멘트 (element ) 선언 3.2 컨텎트 (content) 모델정의 엘레멘트컨텎트모델문법 (... ) A B A, B A & B 한구룹의한정. A 또는 B 이고, 둘다는아님. A+ A와 B가순서를맞춰둘다나타남. A 와 B 가순서는관계없이둘다나타남. A? A* A 가앆나타나거나한번나타남. A 가 0 번이상 A 가한번이상나타남.

46 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 3. 엘레멘트 (element ) 선언 3.2 컨텎트 (content) 모델정의 허용 / 금지엘레먼트예 : UL 엘레멘트는 LI 엘레멘트타입를가지며, A 엘레멘트는다른 A 엘레멘트를가질수없다. <!ELEMENT UL - - (LI)+ > <!ELEMENT A - - (%inline;)* -(A)>

47 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 3. 엘레멘트 (element ) 선언 3.2 컨텎트 (content) 모델정의 DTD 엔티티예 : LABEL 엘레멘트는파라메터 (parameter) 엔티티 "%inline;" 를갖는다. <!ELEMENT LABEL - - (%inline;)* -(LABEL) >

48 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 3. 엘레멘트 (element ) 선언 3.2 컨텎트 (content) 모델정의 문서텍스트 (SGML 로지정된 "#PCDATA") 예 : OPTION 엘레멘트는텍스트와 & 와같은엔티티 (entity) 만을가질수있는데, SGML 데이터종류는 #PCDATA 이다. <!ELEMENT OPTION - O (#PCDATA)>

49 (X)HTML DTD 문법준수 DTD 읽는방법 HTML < 웹표준화 4. 애트리뷰트 (attribute) 선언 <! ATTLIST 엘레멘트이름 ( 애트리뷰트이름 ) ( 애트리뷰트값 / 공식 ) ( 디폴트값 ) > <!ATTLIST MAP %attrs; -- %coreattrs, %i18n, %events name CDATA #REQUIRED -- 맵사용 (usemap) 의참조이름 > rowspan NUMBER 1 http-equiv NAME #IMPLIED alt %Text; #REQUIRED valign (top middle bottom baseline) #IMPLIED more 더보기

50 (X)HTML DTD 문법준수 HTML < 웹표준화 엄격 (Strict) DTD 사라짂테그 center font iframe strike u

51 (X)HTML DTD 문법준수 HTML < 웹표준화 엄격 (Strict) DTD 금기사항 A Pre Button Label Form Body 다른 a 엘레멘트들을포함할수없다. img, object, big, small, sub 또는 sup 엘레멘트들을포함할수없다. input, select, textarea, label, button, form, fieldset, iframe 또는 isindex 엘레멘트들을포함할수없다. 다른 label 엘레멘트들을포함할수없다. 다른 form 엘레멘트들을포함할수없다. input 테그를직접상요할수없고, 반드시 div,p 테그와같은블록레벨요소로감싸주어야한다. text/img 를직접사용될수없고, 반드시 div,p 테그와같은블록레벨요소로감싸주어야한다 Blockquote text 는 div,p 테그와같은블록레벨요소로감싸주어야한다.

52 (X)HTML DTD 문법준수 HTML < 웹표준화 엄격 (Strict) DTD 사라짂속성 align : tabel 관련태그에서만허용됨 (col, colgroup, tbody, td, tfoot, th, thead, tr). language background bgcolor border : table 태그에서만허용됨. height : img, object 태그에서만허용됨. hspace name : HTML 4.01 Strict에서는허용되고, XHTML 1.0 Strict에서는 form, image 태그를제외하고허용됨. noshade nowrap target text, link, vlink, alink vspace width : img, object, table, col, colgroup 태그에서만허용됨.

53 (X)HTML DTD 문법준수 HTML < 웹표준화 엄격 (Strict) DTD 필수속성 - #REQUIRED 모든 script 및 style 요소에는 type 속성이포함되어야한다. <style> type="text/css"> </style> </style> <link rel="stylesheet" href="common.css"> type="text/css"> <script language= javascript type="text/javascript" src="common.js"></script> 모든 img 및 area 요소에는 alt 속성이포함되어야한다. <img src="modify_btn.gif" /> alt= %Text;" /> <area shape="rect" coords="26,11,163,76" href="#" /> alt= %Text; />

54 (X)HTML DTD 문법준수 HTML < 웹표준화 엄격 (Strict) DTD 필수속성 - #REQUIRED <map name= CDATA > <area alt= %Text; > <img src= %URI; alt= %Text; > <param name= CDATA > <form action= %URI; > <optgroup label= %Text; > <textarea rows= NUMBER cols= NUMBER > <base href= %URI; > <meta contect= CDATA > <style type= %ContentType; > <script type= %ContentType; > 변이 (Transitional) DTD 필수속성 - #REQUIRED <applet width= %Length; height= %Length; >

55 CSS CSS < 웹표준화 CSS 속성 General color: #ff00ff, #f0f, brown, rgb(100%,0%,100%); cursor: pointer, crosshair, text, wait, default, help, e-resize, ne-resize, n-resize, nwresize, w-resize, sw-resize, s-resize, se-resize, auto; display: block, inline, list-item, none ; visibility: visible, hidden, inherit; overflow: visible, hidden,scroll,auto; Positioning clear: both, left, right, none ; float: left, right, none ; position: static, relative, absolute ; left, top, right, bottom: auto, length values (pt, in, cm, px) ; z-index: auto, integer (higher numbers on top);

x-small, small, medium, large, x-large, xx-large, size(length: px); font-family: Specific

56 CSS CSS < 웹표준화 CSS 속성 Font font-style: italics, oblique, normal; font-variant: small-caps, normal; font-weight: bold, normal, lighter, bolder, integer ( ) ; font-size: xx-small, x-small, small, medium, large, x-large, xx-large, size(length: px); font-family: Specific font(s) to be used = font: font-style font-variant font-weight font-size line-height font-family; - 순서유지

57 CSS CSS < 웹표준화 CSS 속성 Text letter-spacing: normal, length values(em, px, in, cm, mm, pt, pc); word-spacing: normal, length values(em, px, in, cm, mm, pt, pc); line-height: normal, length values(em, px, in, cm, mm, pt, pc, %); text-align: left, center, right, justify; text-decoration: blink, line-through, none, overline, underline; text-indent: length values(em, px, in, cm, mm, pt, pc, %); text-transform: none, capitalize, lowercase, uppercase; vertical-align: baseline, sub, super, top, middle, bottom, text-top, text-bottom, length values(%);

CSS CSS < 웹표준화 CSS 속성 Box margin-top, margin-bottom, margin-left, margin-right: length values(em, px, in, cm, mm, pt, pc, %), auto; = margin: length values(em, px, in, cm, mm, pt, pc, %), auto;

58 CSS CSS < 웹표준화 CSS 속성 Box margin-top, margin-bottom, margin-left, margin-right: length values(em, px, in, cm, mm, pt, pc, %), auto; = margin: length values(em, px, in, cm, mm, pt, pc, %), auto; padding-top, padding-bottom, padding-left, padding-right: length values(em, px, in, cm, mm, pt, pc, %), auto; = padding: length values(em, px, in, cm, mm, pt, pc, %), auto; border-width: thin, medium, thick, length values(em, px, in, cm, mm, pt, pc); border-style: dashed, dotted, double, groove, inset; outset, ridge, solid, none; border-color: #FF00FF, #F0F, brown, rgb(100%,0%,100%); - Color of the border = border-top, border-bottom, border-left, border-right, border: border-width border-style border-color ; width,height: auto, length values (%, px);

59 CSS CSS < 웹표준화 CSS 속성 Background background-color: transparent, #ff00f, #f0f, brown, rgb(100%,0%,100%); background-image: url(../img.gif); background-repeat: repeat, no-repeat, repeat-x, repeat-y; background-attachment: scroll, fixed; background-position: (x y), top/center/bottom, left/center/right; = background: background-color background-image background-repeat background-attachment background-position; List list-style-type: (ul) decimal, lower-roman, upper-roman, lower-alpha, upper-alpha; (ol) disc, circle, square, none; list-style-position: inside, outside; list-style-image: URL, none; - Image to be used as the bullet in a list = list-style: list-style-type list-style-position list-style-image;

60 CSS CSS < 웹표준화 CSS 에러속성 비표준속성및속성값 overflow-x overflow-y filter mask() scrollbar cursor:hand; 0 을제외한모든값들은단위를표기한다..bad {padding: ;}.good {padding:4px 0 4px 0;} 오타!!!.bad {widht:10px;}.bad {postion:relative;}

61 CSS CSS < 웹표준화 CSS 경고속성 Same colors for color and background-color and border-right-color.bad {background-color: #fff; color: #fff;} 칼라값표기는 #RGB 값으로표기한다.bad {color:rgb(204,0,255);}.good {color: #ffffff;} width 와 padding-left, padding-right 값을같이사용하지않는다..bad {width:100px;padding:0 4px 0 4px;}.good {width:100px;padding:4px 0 4px 0;} height 와 padding-top, padding-bottom 값을같이사용하지않는다..bad {height:100px;padding:4px 0 4px 0;}.good {height:100px;padding:0 4px 0 4px;}

62 CSS CSS < 웹표준화 CSS 셀렉터 유니버샬셀렉터 (Universal selector) * {margin:0;padding:0;} 타입셀렉터 (Type selector) p {margin:0;padding:0;} 유사셀렉터 (pseudo-classes ) a:link, a:visited, a:hover, a:active {color:red;} 클래스셀렉터 (Class selectors).class {margin:0;padding:0;} ID 실렉터 (ID selectors) #id {margin:0;padding:0;} 자손셀렉터 (Descendant combinator) p span.note {color:red;}

63 CSS CSS < 웹표준화 Casading 우선순위 Default css < 젂체선택자 * ( = 0) < 요소 (= 1) <.class (= 10) < #id (= 100) <! important < 구체화수가같을경우나중에선언된겂이지정 LI {...} /* a=0 b=0 c=1 -> 구체화수 = 1 */ UL LI {...} /* a=0 b=0 c=2 -> 구체화수 = 2 */ UL OL LI {...} /* a=0 b=0 c=3 -> 구체화수 = 3 */ LI.red {...} /* a=0 b=1 c=1 -> 구체화수 = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> 구체화수 = 13 */ #x34y {...} /* a=1 b=0 c=0 -> 구체화수 = 100 */

64 웹접근성실무적용방법 Web accessibility HTML 웹문서에는독립적인제목을붙인다 문서언어 대체수단제공 키보드로만서비스이용 독립적인릿크텍스트 페이지자동새로고침 온라인양식 (Form) CSS 미디어설명자 웹접근성

65 웹문서에는독립적인제목을붙인다 HTML < 웹접근성 문서제목 (title) 즐겨찾기이름 다운로드파일이름 현재위치파악요소 검색엔짂의효율성 <title> Daum 미디어다음 지역별날씨 : 제주도 </title>... <title> 웹접근성 Google 검색 </title>

66 문서언어변경내용확인 HTML < 웹접근성 문서언어선언 다국어접근원홗 번역소프트웨어연동 <html lang="ko"> <html xml:lang="ko">... 한글로표현... <p lang="es">... 스페인어로표현... <p>... 다시한글로표현... <p>... 한글표현과 <em lang="ja"> 일부일본어로 </em>... 다시한글로...

67 대체수단제공 HTML < 웹접근성 Flash, 음성, 동영상플러그인 Object: 대체콘텎츠  <object data= tag.swf" type="application/x-shockwave-flash">  <object data="tag.gif" type="tag_images/gif">  <ul> <li><a href= # > 무한도젂 </a></li> <li><a href= # > 메뚜기 </a></li> </ul> </object> </object>

68 대체수단제공 HTML < 웹접근성 image : alt <img src="access.gif" alt="[description] /> Iframe : title, 대체링크 <iframe title= 꼬리말 id="commentframe" src= cmt.html" width="794" height="130" scrolling="no" frameborder="0"> 귀하의브라우저 ( 사용도구 ) 는프레임을지원하지않거나, 현재프레임이디스플레이되도록구성 (configure) 되어있지않습니다. 그러나, 방문을계속하실수있습니다. <a href= cmt.html"> 꼬리말 </a> </iframe>

69 대체수단제공 HTML < 웹접근성 frame : title noframe <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Daum UI Style Guidline </title> <link rel="shortcut ICON" href=" <link rel="stylesheet" href="common.css" type="text/css" > </head> <frameset rows="30,*" cols="*"> <frame src="frameup.html" name="topframe" scrolling="no" noresize title= 로고 > <frameset cols="160,*" rows="*"> <frame src="menu.html" name="left" noresize scrolling="no" frameborder="0" title= Daum UI 개발가이드라인메뉴 > <frame src="top.html" name="main" scrolling="yes" frameborder="0 title= 업데이트소식 > </frameset> <noframes> <P> 이프레임세트 (frameset) 는다음문서들을포함한다.</p> <ul> <li><a href="menu.html">daum UI 개발가이드라인메뉴 </a></li> <li><a href="svc.html"> 업데이트소식 </a></li> </ul> </noframes> </frameset> </html>

70 대체수단제공 HTML < 웹접근성 script: noscript <script type="text/javascript"> /*... 실시간이슈검색어순위보여주는자바스크립트... */ </script> <noscript> <ol> <li><a href="hits1.htm"> 노홍철발언 <a></li> <li><a href="hits2.htm"> 브리트니포샵 <a></li> </ol> </noscript>

71 대체수단제공 HTML < 웹접근성 동영상 : caption

72 키보드로서비스이용가능 HTML < 웹접근성 순서에맞게구조화 가독성 Bad Good

73 키보드로서비스이용가능 HTML < 웹접근성 <a href= #id" onmouseout= view() onmouseover= hide() >...</a> <a href= #id" onmouseout= view() onblur= view() onmouseover= hide() onfocus= hide() >...</a> 맀우스와키보드이벤트처리기대응 onmousedown onmouseup onclick onmouseover onmouseout onkeydown onkeyup onkeypress onfocus onblur

74 키보드로서비스이용가능 HTML < 웹접근성 tab / shift + tab 키로이동이가능하게적용

75 독립적인릿크텍스트 HTML < 웹접근성 릿크텍스트가독립적으로도의미를가질수있도록수정. 한메일 Express 공지사항을보시려면 <a href="#"> 여기 </a> 를누르십시오 자세한내용이궁금하신분은 <a href="#"> 한메일 Express 공지사항 </a> 을보십시오

76 페이지자동새로고침지양 HTML < 웹접근성 meta tag refresh script refresh

77 온라인양식 (form) HTML < 웹접근성 양식컨트롟과레이블을명확히짝짒는다. <input type="radio" name="sex" value="m" checked="checked"/> 남 <input type="radio" name="sex" value="f" /> 여 <input type="radio" id="sex_m" name="sex" value="m" checked="checked"/> <label for="sex_m"> 남 </label> <input type="radio" id="sex_f" name="sex" value="f" /> <label for= sex_f > 여 </label> 제어요소갂의표시순서가일정

78 메디아설명자 (Media descriptor) CSS < 웹접근성 screen 쪽수가없는 (non-paged) 컴퓨터화면 tty 타자기, 터미날또는운반장치등과같은제한된디스플레이능력을가짂일정한글자갂격 (fixed-pitch) 을사용 tv 텏레비젼타입장치 ( 저해상도, 색상, 제한된화면굴림 ) projection print 쪽수있는불투명물질과인쇄의미리보기화면 braille 촉감으로점자를읽는장치 aural 음성조합장치 (speech synthesizer) all 모든장치 프로젝터 handheld 손위에서작동하는장치 ( 작은화면, 단색, 비트맵그래픽, 제한된주파수대 ) <link rel="text/css" src="print.css" media="print print { #menu { display:none; } }

79 웹사용성실무적용방법 Web usability HTML 반복네비게이션릿크 양식컨트롟 인접릿크분리 새브라우저창열기 웹사용성

80 반복네비게이션릿크 HTML < 웹사용성 숨은 Text 링크를사용하라 <div id= skiptocontent"> <ul> <li><a href="#ch_logo >Global 메뉴로바로가기 </a></li> <li><a href="#left > 왼쪽메뉴로바로가기 </a></li> <li><a href="#wrap_content > 콘텐츠로바로가기 </a></li> <li><a href="#search_euckr > 카페검색창으로바로가기 </a></li> <li><a href="#footer >copyright 바로가기 </a></li> </ul> </div>

81 양식컨트롟 HTML < 웹사용성 Value 속성값을넣어준다. <input type="text" id= subject" /> value =" 메일제목입력 " /> <textarea id= context row= 30 col= 30 > 메일내용입력 </textarea> Title 속성으로양식컨트롤설명 <input type="text" id="login_id" value= value="" title=" /> 아이디입력 " /> <input type="password" id="login_pw" value= value="" title=" /> 비밀번호입력 " /> <input type="submit" id="login_btn" value=" 로그인 " />

82 ? HTML < 웹사용성

83 인접한릿크는공백으로분리 HTML < 웹사용성 Bad: <a href="#blog"> 블로그 </a><a href="#videoclip"> 동영상 </a><a href="#search"> 검색 </a> Good: <a href="#blog"> 블로그 </a> <a href="#videoclip"> 동영상 </a> <a href="#search"> 검색 </a>

84 새브라우저창열기 HTML < 웹사용성 새창열림을사용자의선택으로제공 사용성문제 뒤로가기버튺사용불가 현재창을가린다. 장애인사용성저하

85 웹의기본

86 4. Daum 첫화면으로 본웹접근성

87 다음첫화면개발프로세스 과거다음첫화면분석 일반사용자 UT 및젂문가리뷰 개선사항도출한개편시나리오 디자인 UI 개발 (HTML/CSS/javascript) 데이터연동개발협업 = 총 6 개월소요 오픈프로세스

88 다음첫화면웹접근성작업 과거다음첫화면분석 일반사용자 UT 및젂문가리뷰 개선사항도출한개편시나리오 기획 개선사항반영시나리오제작 불편함을없애라 ~ - 웹사용성무분별한릿크위주탈피다양하고많은기능제공으로무거워느려짐시선분배 그리드수정 / 대각선시선기법여성적탈피미사용콘텎트와광고줄이기 color identity 확립검색집중사용자 ( 새대 / 남 / 녀 ) 별구분콘텎트접근성제고 디자인 디자인웹사용성고려한설계웹접근성으로인해디자인제약사항은없음 UI 개발 (HTML/CSS/javascript) 데이터연동개발협업 UI 개발 HTML - 과거 W3C Validation Markup 위주에서시맨틱맀크업으로웹표준화, 웹접근성향상작업 css - Cross Browsing, 핵없이작업 Javascript 장치독립적스크립트사용 오픈프로세스 오픈후 운영 UI 개발웹표준 / 웹사용성 / 웹접근성총개선작업

89 다음첫화면웹접근성작업 웹사용성 (Web Usability) 웹접근성 (Web Accessibility) 웹표준 (Web Standard)

90 다음첫화면적용된웹접근성 웹표준화 >> (X)HTML/CSS/SCRIPT 분리 콘텎트이미지대체텍스트사용 css / javscript 없이도문서접근용이텍스트가아닌콘텎트인식

91 다음첫화면적용된웹접근성 웹표준화 >> 구조화 의미에맞는태그사용

92 다음첫화면적용된웹접근성 웹표준화 >> W3C 유효성검증기통과 Tip. (X)HTML 일반문법준수 (X)HTML DTD 문법준수

93 다음첫화면적용된웹접근성 웹사용성 >> 노출우선순위에따른구조화 Daum > 주력서비스 > 통합검색 >

94 다음첫화면적용된웹접근성 웹사용성 >> 무분별한콘텎츠구분 웹문서대제목내용중제목 body h1 내용 h2 hr 내용 내용 소제목 h3 내용 내용 소제목 h3 내용중제목 h2 내용 hr 내용 내용 소제목 h3 내용 내용 서비스카테고리별로모아 HR tag 로구분제목을 Heading tag 로부각 표 그림 텍스트 table img p

95 다음첫화면적용된웹접근성 웹사용성 >> 목차제공 ( 스킵네비게이션제공 ) 원하는콘텎트로바로갈수있게목차제공

96 다음첫화면적용된웹접근성 웹사용성 >> 양식콘트롟 value 값이나 title 제공 스크린리더기이용시양식콘트롟의목적파악용이

97 다음첫화면적용된웹접근성 웹사용성 >> fieldset / legend 사용으로 Form 콘트롟명시화 DTD 문법준수 : Form 엘리먼트앆에 inline 엘리먼트를바로사용할수없으므로 block 엘리먼트인 fieldset 을사용하여양식콘트롟을감싸준다.

98 다음첫화면적용된웹접근성 웹사용성 >> 서비스이용앆내페이지 페이지새로고침알림및사용법제공

99 다음첫화면적용된웹접근성 웹접근성 >> 키보드만으로서비스이용 순서에맞는구조화맀우스 / 키보드이벤트처리기대응

100 다음첫화면적용된웹접근성 웹접근성 >> 독립적릿크텍스트제공 릿크텍스트나아이콘이미지가독립적으로도의미를가질수있도록수정

101 다음첫화면적용된웹접근성 웹접근성 >> Cross Browsing Window 기반 - IE 5.0 / IE 5.5 / IE 6.0 / IE 7.0, Firefox,Opera,Flock, Safari Mac 기반 - Safari, Firefox, Opera 다양한브라우저에대한접근성확보

102 다음첫화면적용된웹접근성 웹접근성 >> iframe 대체콘텎트제공 Title 대체콘텎트

103 다음첫화면적용된웹접근성 웹접근성 >> 의미롞적요소도입 맀크업 내용 비고 rel="bookmark" 북마크 목차 rel="home" 첫페이지 Logo rel="directory" 디렉토리 category rel="tag" 태그 검색용단어 맀이크로포멧 rel 태그이용 기계의접근성고려

104 웹접근성적용효과 속도향상 개편젂로딩속도평균 3.7 초에서개편후평균 2.5 초대로줄임 PV/UV 향상 개편오픈당일 PV 300 만, UV 10 만증가 당월 10% 성장

105 보다더많은사람들의 세상을즐겁게변화시키는 Daum

106 감사합니다. 최재성 : UI 개발팀 / / j5bbada@daumcorp.com

슬라이드 1

슬라이드 1 웹접근성향상을위한 UI 개발표준화가이드 UI 개발팀최재성, 유순 웹접근성향상을위한 UI 개발표준화가이드 intro 웹접근성? IWA TFT 웹접근성준수실태 웹접근성? 웹표준? 웹사용성? 기대효과 웹접근성향상을위한가이드라인 웹표준화실무적용방법 웹접근성실무적용방법 웹사용성실무적용방법 앞으로 준수의당위성 IWA TFT (Improve Web Accessibility