웹 콘텐츠 접근성 지침 2.0에 기반한 콘텐츠 제작 기법: 3. 이해의 용이성

원칙 원칙 3. 3. 이해의 용 이해의 용이성이성

201 1201 1 년 년 55 월 월 22 일일신승식신승식 , LG, LG 전자전자

2

이해의 용이성이란 이해의 용이성이란

Perc eption C ognitionUnders tanding

3

44 개의 지침 개의 지침

3. 1 가독성 3. 2 예측 가능성

3. 3 콘텐츠의 논리성 3. 4 입력 도움

4

66 개의 검사 항목 개의 검사 항목

3. 4. 2( 오류 정정 ) 입력 오류를 정정할 수 있는 방법을 제공해야 한다 .

3. 4. 1( 레이블 제공 ) 입력 서식에는 대응하는 레이블을 제공해야 한다 . 3. 4( 입력 도움 ) 입력 오

류를 방지하거나 정정할 수 있어야 한다 .

3. 3. 2( 표의 구성 ) 표는 이해하기 쉽게 구성해야 한다 .

3. 3. 1( 콘텐츠의 선형화 ) 콘텐츠는 논리적인 순서로 제공해야 한다 . 3. 3( 콘텐츠의 논리성 )

콘텐츠는 논리적으로 구성해야 한다 .

3. 2. 1( 사용자 요구에 따른 실행 ) 사용자가 의도하지 않은 기능 ( 새 창 , 초점 변화 등 )은 실행되지 않아야 한다 .

3. 2( 예측 가능성 ) 콘텐츠의 기능과 실행결과는 예측 가능해야 한다 .

3. 1. 1( 기본 언어 표시 ) 주로 사용하는 언어를 명시해야 한다 .

3. 1( 가독성 ) 콘텐츠는 읽고 이해하기 쉬워야 한다 .

검사항목 ( 6 개 ) 지침 ( 4 개 )

5

3. 1. 1 3. 1. 1 기본 언어 표시 기본 언어 표시 주 사용 언어를 지정한다 주 사용 언어를 지정한다 ..

주로 사용되는 언어가 영어일 때 주로 사용되는 언어가 영어일 때<html lang="en"><html lang="en">

주로 사용되는 언어가 한국어일 때 주로 사용되는 언어가 한국어일 때<html lang="<html lang="koko">">

주로 사용되는 언어가 일본어일 때 주로 사용되는 언어가 일본어일 때<html lang="ja"><html lang="ja">

주로 사용되는 언어가 스페인어일 때 주로 사용되는 언어가 스페인어일 때<html lang="es"><html lang="es">

참고참고 : :

h ttp ://e n .wikip e d ia.o rg/wiki/Lis t_o f_IS O _639- 1 _c o d e shttp ://e n .wikip e d ia.o rg/wiki/Lis t_o f_IS O _639- 1 _c o d e s

3. 1 가독성

http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

6

인코딩 방식 지정 인코딩 방식 지정<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/html4/strict.dtd"> <head> <head> <meta http-equiv="Content-Type" <meta http-equiv="Content-Type" content="text/html; content="text/html; charset=UTF-8charset=UTF-8"> ">

<title><title> 페이지의 제목 페이지의 제목 </title></title>

<!doctype html><!doctype html><head> <head> <meta <meta charset="UTF-8">charset="UTF-8">

<title><title> 페이지의 제목 페이지의 제목 </title></title>

3. 1 가독성

7

언어 변환 언어 변환<p><p> 중국어로는 중국어로는 "" ” 안녕하세요 라고 인사할 때에” 안녕하세요 라고 인사할 때에 <span <span lang="zh">lang="zh"> 你好你好 </span></span> 라고 말합니다 라고 말합니다 . </p> . </p>

<p> 그는 한국어로 <q lang="ko"> 웹은 보편적으로 접근 가능한것입니다 .</q> 라고 말하였다 .</p> <p> 그는 프랑스어로 <q lang="fr">Web est accessible à tous</q> 이라고 말하였다 .</p>

그는 한국어로 “ 웹은 보편적으로 접근 가능한 것입니다 .” 라고 말하였다 .

그는 프랑스어로 « We b e s t ac c e s s ib le to u s à » 이라고 말하였다 .

중국어로는 " ” 안녕하세요 라고 인사할 때에 니하오 라고 말합니다 .

3. 1 가독성

8

3. 2. 1 3. 2. 1 사용자 요구에 따른 사용자 요구에 따른실행실행

3. 2 예측 가능성

마우스 롤오버에 의해 하위 메뉴가 생성되는 잘못된 사례

초점 변화나 롤오버 이벤트에 의해 맥락을 변화시키면 안 된다 .

http://www.kyobobook.co.kr/index.laf

9

서식 제출 서식 제출 ( s ubmit) ( s ubmit) 버튼 제 버튼 제공공

<form method="get" id="form1"> <form method="get" id="form1"> <input type="text" name="text1" size="3" <input type="text" name="text1" size="3"

maxlength="3"> - maxlength="3"> - <input type="text" name="text2" size="3" <input type="text" name="text2" size="3"

maxlength="3"> - maxlength="3"> - <input type="text" name="text3" size="4" <input type="text" name="text3" size="4"

maxlength="4" onchange="form1.submit();"> maxlength="4" onchange="form1.submit();"> </form> </form>


값을 입력하자마자 서식이 제출되는 잘못된 사례

그림 1). 전화 번호 입력 필드 예

10

제출제출 (( 이동이동 ) ) 버튼은 어디로 버튼은 어디로 ??

목록 선택 후 확인 목록 선택 후 확인 // 제출제출 // 이동 버튼이 없는 잘못된 이동 버튼이 없는 잘못된사례사례


??

http://www.chosun.com/

11

자동으로 열리는 팝업 창 자동으로 열리는 팝업 창

페이지를 열자마자 자동으로 열리는 팝업 창이 있는 잘 페이지를 열자마자 자동으로 열리는 팝업 창이 있는 잘 못된 사례 못된 사례


12

제출 버튼이 없는 체크 상자 제출 버튼이 없는 체크 상자3. 2 예측 가능성

그림 4). 체크 상자를 선택하는 것만으로 페이지의 내용이 바뀌는 경우

잘못된 사례 잘못된 사례 : : 체크 상자를 선택하자마자 바로 상품 목 체크 상자를 선택하자마자 바로 상품 목 록이 바뀌는 쇼핑몰 록이 바뀌는 쇼핑몰

13

초점 위치를 알 수 있게 초점 위치를 알 수 있게 !!

초점을 일부러 감춘 잘못된 사례 초점을 일부러 감춘 잘못된 사례


<input type="submit" onFocus="this.blur();">

<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif">

</a>

14

초점의 시각적 표현 초점의 시각적 표현3. 2 예측 가능성

초점을 받은 곳을 강조해 보여주는 윈도우즈용 브라우저 초점을 받은 곳을 강조해 보여주는 윈도우즈용 브라우저 들 들 (( 왼쪽부터 오페라 왼쪽부터 오페라 , , 크롬크롬 , , 사파리사파리 ))

초점이 잘 안 보이는 브라우저들( 왼쪽부터 인터넷 익스플로러 , 파이어폭스 )

15

약시자를 위한 선명한 초점 약시자를 위한 선명한 초점

:focus {outline-width: 2px !important;outline-style: solid !important;-moz-outline-radius: 4px;

}


인터넷 익스플로러와 파이어폭스에 사용자 정의 스타 인터넷 익스플로러와 파이어폭스에 사용자 정의 스타 일을 넣어준다 일을 넣어준다 ..

참고 : http : //g regs hin. pe . kr/b log/arc hives /296

16

내용을 자동으로 업데이트 내용을 자동으로 업데이트 ??

잘못된 사례 잘못된 사례 : : 내용이 자동으로 바뀌고 내용이 자동으로 바뀌고 , , 중단할 수도 중단할 수도없다없다 ..


http://www.korea.ac.kr/

17

잠시 후 자동으로 페이지 이 잠시 후 자동으로 페이지 이동동 ??

잘못된 사례 잘못된 사례 : : 메타 리프레시로 시간 제한을 두고 페 메타 리프레시로 시간 제한을 두고 페 이지를 이동시키면 안 된다 이지를 이동시키면 안 된다 ..

<title> 유효하지 않은 페이지 </title> <meta http-equiv="refresh" content="10;URL='http://target-page.com/'" />

대신 서버측 리디렉션 기술을 이용한다 .http: //gregs hin. pe . kr/xe/? mid=board&c ategory=259&page=2&doc ument_s rl=505 참고


http://gregshin.pe.kr/xe/?mid=board&category=259&page=2&document_srl=505

18

마크업 순서도 논리적으로 마크업 순서도 논리적으로 잘못된 사례 잘못된 사례 : : 시각적으로만 논리적이나 선형화하면 시각적으로만 논리적이나 선형화하면 순서가 어긋난다 순서가 어긋난다 ..

3. 3 콘텐츠의 논리성

겉보기

선형화해보면

19

레이블 붙이기 레이블 붙이기 : : 라디오 버튼 라디오 버튼3. 4 입력 도움

<input type="radio" name="show" value="0" id="show0" checked="checked“ /> <label for="show0">Threads</label> <input type="radio" name="show" value="1" id="show1" /> <label for="show1">Posts</label>

< input name=“ ” >< input name=“ ” > 은 버튼 공통으로 부여하고 각 버 은 버튼 공통으로 부여하고 각 버 튼 고유의 튼 고유의 < input id=“ ” >< input id=“ ” > 와 와 < label for=“ ” >< label for=“ ” > 를 넣 를 넣

어야 함에 주의한다 어야 함에 주의한다 ..

20

서식을 표 안에서 쓸 때 서식을 표 안에서 쓸 때3. 4 입력 도움

<td><input type="radio" name="no2" id="no2-2" value="2" title="2. 강사 실력 - 중립 "></td>

부득이하게 표 안에서 서식을 쓸 때에는 반드시 각 서 부득이하게 표 안에서 서식을 쓸 때에는 반드시 각 서 식 컨트롤마다 식 컨트롤마다 titletitle 을 넣어준다 을 넣어준다 ..

21

실시간 오류 검사 실시간 오류 검사 자바스크립트를 이용한 실시간 오류 검사 자바스크립트를 이용한 실시간 오류 검사

3. 4 입력 도움

실시간으로 호스트명이 적합한지 검사하는 예제

22

오류 메시지는 서식보다 위에 오류 메시지는 서식보다 위에3. 4 입력 도움

오류로 바로 가는 링크와 함께 !

23

1) 1) 경고창으로 오류 확인 경고창으로 오류 확인3. 4 입력 도움

24

2) 2) 오류간 난 곳으로 초점 이 오류간 난 곳으로 초점 이동동

3. 4 입력 도움

25

반드시 서버측 오류 검사를 병행 반드시 서버측 오류 검사를 병행!!

3. 4 입력 도움

<form action="javascript:validateform()">

<form action="#" onsubmit="validateform()">

<form action="submit.php" onsubmit="return validateform()">

잘못된 사례

바른 사례

26

지나친 친절은 독이 된다 지나친 친절은 독이 된다 !!3. 4 입력 도움

잘못된 사례 잘못된 사례 :: 주민등록번호 입력 앞자리 입력 후 자동으로 뒷자리로 주민등록번호 입력 앞자리 입력 후 자동으로 뒷자리로

이동하므로 이동하므로 (( 키보드로는키보드로는 ) ) 다시 앞자리로 돌아올 수 다시 앞자리로 돌아올 수없다없다 ..

27

처음부터 다시 하라고 처음부터 다시 하라고 ??3. 4 입력 도움

잘못된 사례 잘못된 사례 :: 서식 제출 후에 오류가 발생하면 아예 초기 화면으로 서식 제출 후에 오류가 발생하면 아예 초기 화면으로

가고가고 , , 서식은 처음부터 다시 입력해야 하는 경우 서식은 처음부터 다시 입력해야 하는 경우

28

최종 제출 전에 확인 최종 제출 전에 확인 !!3. 4 입력 도움

좋은 사례 좋은 사례 ::

중요한 서식을 제출하기 전에 다시 돌아가거나 중요한 서식을 제출하기 전에 다시 돌아가거나 , , 요약요약 된 결과를 확인할 수 있는 기회를 줘야 한다 된 결과를 확인할 수 있는 기회를 줘야 한다 ..

웹 콘텐츠 접근성 지침 2.0에 기반한 콘텐츠 제작 기법: 3. 이해의 용이성

Technology

Transcript of 웹 콘텐츠 접근성 지침 2.0에 기반한 콘텐츠 제작 기법: 3. 이해의 용이성