원칙  3.  이해의 용이성 2011년 5월 2일 신승식, LG전자
이해의 용이성이란 Perception Cognition Understanding
4개의 지침 3.1  가독성 3.2  예측 가능성 3.3  콘텐츠의 논리성 3.4  입력 도움
6개의 검사 항목 3.4.2( 오류 정정 )  입력 오류를 정정할 수 있는 방법을 제공해야 한다 .  3.4.1( 레이블 제공 )  입력 서식에는 대응하는 레이블을 제공해야 한다 .  3.4( 입력 도움 )  입력 오류...
3.1.1 기본 언어 표시 <ul><li>주 사용 언어를 지정한다 . </li></ul><ul><li>주로 사용되는 언어가 영어일 때 <html lang=&quot;en&quot;>   </li></ul><ul><li>...
인코딩 방식 지정 <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&...
언어 변환 <ul><li><p> 중국어로는  &quot; 안녕하세요”라고 인사할 때에  <span lang=&quot;zh&quot;> 你好 </span> 라고 말합니다 . </p>  </li></ul><p> 그는 한국...
3.2.1 사용자 요구에 따른 실행 3.2  예측 가능성 마우스 롤오버에 의해 하위 메뉴가 생성되는 잘못된 사례 초점 변화나 롤오버 이벤트에 의해 맥락을 변화시키면 안 된다 .
서식 제출(submit) 버튼 제공 <ul><li><form method=&quot;get&quot; id=&quot;form1&quot;>  </li></ul><ul><li>   <input type=&quot;tex...
제출(이동) 버튼은 어디로? <ul><li>목록 선택 후 확인 / 제출 / 이동 버튼이 없는 잘못된 사례 </li></ul>3.2  예측 가능성 ?
자동으로 열리는 팝업 창 <ul><li>페이지를 열자마자 자동으로 열리는 팝업 창이 있는 잘못된 사례 </li></ul>3.2  예측 가능성
제출 버튼이 없는 체크 상자 <ul><li>잘못된 사례 :  체크 상자를 선택하자마자 바로 상품 목록이 바뀌는 쇼핑몰 </li></ul>3.2  예측 가능성                                   ...
초점 위치를 알 수 있게! <ul><li>초점을 일부러 감춘 잘못된 사례 </li></ul>3.2  예측 가능성 <input type=&quot;submit&quot;  onFocus=&quot;this.blur();&...
초점의 시각적 표현 <ul><li>초점을 받은 곳을 강조해 보여주는 윈도우즈용 브라우저들  ( 왼쪽부터 오페라 ,  크롬 ,  사파리 ) </li></ul>3.2  예측 가능성 초점이 잘 안 보이는 브라우저들  ( 왼쪽...
약시자를 위한 선명한 초점 <ul><li>인터넷 익스플로러와 파이어폭스에 사용자 정의 스타일을 넣어준다 . </li></ul>:focus { outline-width: 2px !important; outline-styl...
내용을 자동으로 업데이트? <ul><li>잘못된 사례 :  내용이 자동으로 바뀌고 ,  중단할 수도 없다 . </li></ul>3.2  예측 가능성
잠시 후 자동으로 페이지 이동? <ul><li>잘못된 사례 :  메타 리프레시로 시간 제한을 두고 페이지를 이동시키면 안 된다 . </li></ul><title> 유효하지 않은 페이지 </title>      < met...
마크업 순서도 논리적으로 <ul><li>잘못된 사례 :  시각적으로만 논리적이나 선형화하면 순서가 어긋난다 . </li></ul>3.3  콘텐츠의 논리성 겉보기 선형화해보면
레이블 붙이기: 라디오 버튼 <ul><li><input name=“”> 은 버튼 공통으로 부여하고 각 버튼 고유의  <input id=“”> 와  <label for=“”> 를 넣어야 함에 주의한다 . </li></ul...
서식을 표 안에서 쓸 때 <ul><li>부득이하게 표 안에서 서식을 쓸 때에는 반드시 각 서식 컨트롤마다  title 을 넣어준다 . </li></ul>3.4  입력 도움 <td> <input type=&quot;rad...
실시간 오류 검사 <ul><li>자바스크립트를 이용한 실시간 오류 검사 </li></ul>3.4  입력 도움 실시간으로 호스트명이 적합한지 검사하는 예제
오류 메시지는 서식보다 위에 3.4  입력 도움 오류로 바로 가는 링크와 함께 !
1)  경고창으로 오류 확인 3.4  입력 도움
2) 오류간 난 곳으로 초점 이동 3.4  입력 도움
반드시 서버측 오류 검사를 병행 ! 3.4  입력 도움 <form action=&quot; javascript:validateform() &quot;>  <form action=&quot; # &quot; onsubmi...
지나친 친절은 독이 된다! <ul><li>잘못된 사례 : </li></ul><ul><li>주민등록번호 입력 앞자리 입력 후 자동으로 뒷자리로 이동하므로  ( 키보드로는 )  다시 앞자리로 돌아올 수 없다 . </li><...
처음부터 다시 하라고? <ul><li>잘못된 사례 : </li></ul><ul><li>서식 제출 후에 오류가 발생하면 아예 초기 화면으로 가고 ,  서식은 처음부터 다시 입력해야 하는 경우 </li></ul>3.4  입...
최종 제출 전에 확인! <ul><li>좋은 사례 : </li></ul><ul><li>중요한 서식을 제출하기 전에 다시 돌아가거나 ,  요약된 결과를 확인할 수 있는 기회를 줘야 한다 . </li></ul>3.4  입력 도움
Upcoming SlideShare
Loading in …5
×

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

1,807 views

Published on

2011년 5월 2일 한국정보화진흥원이 개최한 2011 웹 접근성 향상 전략 세미나 발표 자료: 웹 콘텐츠 접근성 지침 2.0 중 원칙 3 이해의 용이성에 대한 프리젠테이션 자료.
1) 가독성
2) 이해의 용이성
3) 콘텐츠의 논리성
4) 입력 도

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

  • Be the first to like this

No Downloads
Views
Total views
1,807
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 원칙 3. 이해의 용이성 2011년 5월 2일 신승식, LG전자
  2. 2. 이해의 용이성이란 Perception Cognition Understanding
  3. 3. 4개의 지침 3.1 가독성 3.2 예측 가능성 3.3 콘텐츠의 논리성 3.4 입력 도움
  4. 4. 6개의 검사 항목 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. 5. 3.1.1 기본 언어 표시 <ul><li>주 사용 언어를 지정한다 . </li></ul><ul><li>주로 사용되는 언어가 영어일 때 <html lang=&quot;en&quot;> </li></ul><ul><li>주로 사용되는 언어가 한국어일 때 <html lang=&quot; ko &quot;> </li></ul><ul><li>주로 사용되는 언어가 일본어일 때 <html lang=&quot;ja&quot;> </li></ul><ul><li>주로 사용되는 언어가 스페인어일 때 <html lang=&quot;es&quot;> </li></ul><ul><li>참고 : http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes </li></ul>3.1 가독성
  6. 6. 인코딩 방식 지정 <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8 &quot;> </li></ul><ul><li><title> 페이지의 제목 </title> </li></ul><ul><li><!doctype html> </li></ul><ul><li><head> </li></ul><ul><li>     <meta charset=&quot;UTF-8&quot;> </li></ul><ul><li>     <title> 페이지의 제목 </title> </li></ul>3.1 가독성
  7. 7. 언어 변환 <ul><li><p> 중국어로는 &quot; 안녕하세요”라고 인사할 때에 <span lang=&quot;zh&quot;> 你好 </span> 라고 말합니다 . </p> </li></ul><p> 그는 한국어로 <q lang=&quot;ko&quot;> 웹은 보편적으로 접근 가능한 것입니다 .</q> 라고 말하였다 .</p> <p> 그는 프랑스어로 <q lang=&quot;fr&quot;> Web est accessible à tous</q> 이라고 말하였다 .</p> 그는 한국어로 “ 웹은 보편적으로 접근 가능한 것입니다 . ” 라고 말하였다 . 그는 프랑스어로 «  Web est accessible à tous  » 이라고 말하였다 . 중국어로는 &quot; 안녕하세요”라고 인사할 때에 니하오 라고 말합니다 . 3.1 가독성
  8. 8. 3.2.1 사용자 요구에 따른 실행 3.2 예측 가능성 마우스 롤오버에 의해 하위 메뉴가 생성되는 잘못된 사례 초점 변화나 롤오버 이벤트에 의해 맥락을 변화시키면 안 된다 .
  9. 9. 서식 제출(submit) 버튼 제공 <ul><li><form method=&quot;get&quot; id=&quot;form1&quot;> </li></ul><ul><li>   <input type=&quot;text&quot; name=&quot;text1&quot; size=&quot;3&quot; maxlength=&quot;3&quot;> - </li></ul><ul><li>   <input type=&quot;text&quot; name=&quot;text2&quot; size=&quot;3&quot; maxlength=&quot;3&quot;> - </li></ul><ul><li>   <input type=&quot;text&quot; name=&quot;text3&quot; size=&quot;4&quot; maxlength=&quot;4&quot; onchange=&quot;form1.submit();&quot;> </li></ul><ul><li></form> </li></ul>3.2 예측 가능성 값을 입력하자마자 서식이 제출되는 잘못된 사례                                                          그림 1). 전화 번호 입력 필드 예
  10. 10. 제출(이동) 버튼은 어디로? <ul><li>목록 선택 후 확인 / 제출 / 이동 버튼이 없는 잘못된 사례 </li></ul>3.2 예측 가능성 ?
  11. 11. 자동으로 열리는 팝업 창 <ul><li>페이지를 열자마자 자동으로 열리는 팝업 창이 있는 잘못된 사례 </li></ul>3.2 예측 가능성
  12. 12. 제출 버튼이 없는 체크 상자 <ul><li>잘못된 사례 : 체크 상자를 선택하자마자 바로 상품 목록이 바뀌는 쇼핑몰 </li></ul>3.2 예측 가능성                                                                                                                              그림 4). 체크 상자를 선택하는 것만으로 페이지의 내용이 바뀌는 경우
  13. 13. 초점 위치를 알 수 있게! <ul><li>초점을 일부러 감춘 잘못된 사례 </li></ul>3.2 예측 가능성 <input type=&quot;submit&quot; onFocus=&quot;this.blur();&quot; > <a onFocus=&quot;this.blur()&quot; href=&quot;Page.html&quot;> <img src=&quot;myImage.gif&quot;> </a>
  14. 14. 초점의 시각적 표현 <ul><li>초점을 받은 곳을 강조해 보여주는 윈도우즈용 브라우저들 ( 왼쪽부터 오페라 , 크롬 , 사파리 ) </li></ul>3.2 예측 가능성 초점이 잘 안 보이는 브라우저들 ( 왼쪽부터 인터넷 익스플로러 , 파이어폭스 )
  15. 15. 약시자를 위한 선명한 초점 <ul><li>인터넷 익스플로러와 파이어폭스에 사용자 정의 스타일을 넣어준다 . </li></ul>:focus { outline-width: 2px !important; outline-style: solid !important; -moz-outline-radius: 4px; } 3.2 예측 가능성 참고 : http://gregshin.pe.kr/blog/archives/296
  16. 16. 내용을 자동으로 업데이트? <ul><li>잘못된 사례 : 내용이 자동으로 바뀌고 , 중단할 수도 없다 . </li></ul>3.2 예측 가능성
  17. 17. 잠시 후 자동으로 페이지 이동? <ul><li>잘못된 사례 : 메타 리프레시로 시간 제한을 두고 페이지를 이동시키면 안 된다 . </li></ul><title> 유효하지 않은 페이지 </title>     < meta http-equiv=&quot;refresh&quot; content=&quot;10 ;URL='http://target-page.com/'&quot; /> 대신 서버측 리디렉션 기술을 이용한다 . http://gregshin.pe.kr/xe/?mid=board&category=259&page=2&document_srl=505 참고 3.2 예측 가능성
  18. 18. 마크업 순서도 논리적으로 <ul><li>잘못된 사례 : 시각적으로만 논리적이나 선형화하면 순서가 어긋난다 . </li></ul>3.3 콘텐츠의 논리성 겉보기 선형화해보면
  19. 19. 레이블 붙이기: 라디오 버튼 <ul><li><input name=“”> 은 버튼 공통으로 부여하고 각 버튼 고유의 <input id=“”> 와 <label for=“”> 를 넣어야 함에 주의한다 . </li></ul>3.4 입력 도움 <input type=&quot;radio&quot; name=&quot;show&quot; value=&quot;0&quot; id=&quot;show0&quot; checked=&quot;checked“ /> <label for=&quot;show0&quot; >Threads</label> <input type=&quot;radio&quot; name=&quot;show&quot; value=&quot;1&quot; id=&quot;show1&quot;  /> <label for=&quot;show1&quot; >Posts</label>
  20. 20. 서식을 표 안에서 쓸 때 <ul><li>부득이하게 표 안에서 서식을 쓸 때에는 반드시 각 서식 컨트롤마다 title 을 넣어준다 . </li></ul>3.4 입력 도움 <td> <input type=&quot;radio&quot; name=&quot;no2&quot; id=&quot;no2-2&quot; value=&quot;2&quot; title=&quot;2. 강사 실력 - 중립 &quot; > </td>
  21. 21. 실시간 오류 검사 <ul><li>자바스크립트를 이용한 실시간 오류 검사 </li></ul>3.4 입력 도움 실시간으로 호스트명이 적합한지 검사하는 예제
  22. 22. 오류 메시지는 서식보다 위에 3.4 입력 도움 오류로 바로 가는 링크와 함께 !
  23. 23. 1) 경고창으로 오류 확인 3.4 입력 도움
  24. 24. 2) 오류간 난 곳으로 초점 이동 3.4 입력 도움
  25. 25. 반드시 서버측 오류 검사를 병행 ! 3.4 입력 도움 <form action=&quot; javascript:validateform() &quot;> <form action=&quot; # &quot; onsubmit=&quot;validateform()&quot;> <form action=&quot; submit.php &quot; onsubmit=&quot; return validateform() &quot;> 잘못된 사례 바른 사례
  26. 26. 지나친 친절은 독이 된다! <ul><li>잘못된 사례 : </li></ul><ul><li>주민등록번호 입력 앞자리 입력 후 자동으로 뒷자리로 이동하므로 ( 키보드로는 ) 다시 앞자리로 돌아올 수 없다 . </li></ul>3.4 입력 도움
  27. 27. 처음부터 다시 하라고? <ul><li>잘못된 사례 : </li></ul><ul><li>서식 제출 후에 오류가 발생하면 아예 초기 화면으로 가고 , 서식은 처음부터 다시 입력해야 하는 경우 </li></ul>3.4 입력 도움
  28. 28. 최종 제출 전에 확인! <ul><li>좋은 사례 : </li></ul><ul><li>중요한 서식을 제출하기 전에 다시 돌아가거나 , 요약된 결과를 확인할 수 있는 기회를 줘야 한다 . </li></ul>3.4 입력 도움

×