DIK accessible technique

899 views

Published on

웹 사이트 제작과 관련한 접근성 프레젠테이션

Published in: Education
  • Be the first to comment

DIK accessible technique

  1. 1. Speaker yamoo9 facebook.com/yamoo9 twitter.com/yamoo9 cafe.naver.com/webstandardproject
  2. 2. 2012, 웹 접근성을 고려한 사이트 기획 스킬업접근성을 고려한 웹 콘텐츠 제작
  3. 3. Agenda- 1 UI 디자인 사례로 알아보는 접근성을 준수한 콘텐츠 제작 방법 - 1.1 대체 텍스트 제공 (이미지/이미지 맵) - 1.2 명도 대비 차에 따른 정보 구분 방법 제공 - 1.3 주요 콘텐츠 바로가기 버튼 제공 - 1.4 키보드 컨트롤 제공 - 1.5 내용 이해가 쉬운 테이블 제공 - 1.6 손쉬운 사용법을 제공하는 폼 제공 - 1.7 논리적인 문서 골격 작성 - 1.8 플래시 콘텐츠 접근성 향상 - 1.8 동영상 자막 제공 
  4. 4. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 인식의 용이성이란? KWCAG 2.0 가이드라인접근성을 고려한 웹 콘텐츠 제작인식의 용이성 사용자가 장애 유무 등에 관계 없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식Perceivable 할 수 있도록 콘텐츠를 제공하는 것을 의미합니다. 인식의 용이성은 대체 텍스트, 멀티미디모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 어 대체 수단, 명료성 세 가지의 지침과 그에 해당하는 여섯 개의 검사 항목으로 이루어져 있습니다.운용의 용이성Operable 지침 검사항목사용자 인터페이스 구성 요소는 조작 가능하고 텍스트가 아닌 콘텐츠는 대체 내용이 텍스트가 아닌 내용은 대체 내용이 제공되어야 한다.내비게이션 할 수 있어야 한다. 제공되어야 한다. 멀티미디어 콘텐츠를 이해할 수 있는 색상으로만 구분되도록 만들어서는 안된다.이해의 용이성 대체 내용이 제공되어야 한다.Understandable 콘텐츠는 명확하게 전달되어야 한다. 명확하게 내용이 이해되어야 한다.콘텐츠는 이해할 수 있어야 한다. 명도 대비 차가 없어 내용 이해가 어려우면 안된다.견고성Robust 자동으로 재생되는 배경음악을 사용해서는 안된다.웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  5. 5. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 이미지, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.kt.com/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. <img> 요소 사용시 대체 내용(alt 속성)을 제공하지 않고 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  6. 6. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 이미지, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <img> 요소 사용시 대체 내용(alt 속성)을 제공한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  7. 7. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 정보 아이콘, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.sk.co.kr/investment/info/info.phpPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. <img> 요소에 타이틀(title) 속성만 제공하고, 대체 내용(alt)은 제공하고 있지 않다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  8. 8. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 정보 아이콘, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <img> 요소 사용시 대체 내용(alt 속성)을 제공한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  9. 9. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 블릿 아이콘, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/TKuar4Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 블릿 아이콘의 경우, 특별한 의미가 없으므로 불필요한 대체 텍스트를 제공할 필요가 없다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  10. 10. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 블릿 아이콘, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 불필요한 내용이기에 대체 내용(alt 속성)을 비운채 제공한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  11. 11. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 이미지맵, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.11st.co.krPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 이미지맵 내부의 영역 요소에 대채 내용 및 타이틀이 제공되고 있지 않다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  12. 12. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 이미지맵, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <area> 요소 사용시 대체 내용(alt 속성)과 타이틀(title) 내용을 제공한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  13. 13. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 관계구성도, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/xT2pLQPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 관계구성도에 대한 개별 접근성은 고려하지 않고 하나의 이미지만 제공하고 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  14. 14. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 관계구성도, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 목록(ul, ol) 요소로 관계구성도를 구조화한 후, 이미지 사용시 대체 내용을 제공한다. 2. CSS 이미지 대체기법(IR)을 사용한다.운용의 용이성 3. 웹 폰트를 사용한다. (저작권, 성능 주의!)Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  15. 15. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 이미지, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.kthcorp.comPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. <img> 요소 사용시 대체 내용(alt 속성)을 제공하지 않고 있으며, 자바스크립트에 의존하는 코드를 사용하고 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  16. 16. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 이미지, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <img> 요소 사용시 대체 내용(alt 속성)을 제공한다. 2. CSS 이미지 대체기법(IR)을 사용한다.운용의 용이성 3. 웹 폰트를 사용한다. (저작권, 성능 주의!)Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  17. 17. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 반복이미지, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.yes24.com/24/Goods/6388695Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 품평을 위한 내용(별)을 반복적인 이미지로 사용하고 있다. 뿐만 아니라, 대체 내용 또한 제공되고 있지 않다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  18. 18. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 반복이미지, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 별 하나를 개별 이미지로 만들지 않고 묶어서 하나의 이미지로 만든다. 2. 대체 내용을 제공한다. 예) 매우만족, 만족, 보통, 불만족, 매우불만족운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  19. 19. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 배너, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.kt.com/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 트랜지션 기능 구현에만 급급하고, 내용 전달의 목적을 상실했다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  20. 20. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 이미지, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <div> 내부에 텍스트를 대체 내용을 기입한다. 2. CSS 이미지 대체기법(IR)을 사용한다.운용의 용이성 3. 보다 올바른 구조를 작성한 후, 이미지 대체 기법을 사용한다.Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  21. 21. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 주소, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.kt.com/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 주소 및 관련 내용을 개별 구성하지 않고, 하나의 이미지에 모두 몰아서 제공하고 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  22. 22. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 주소, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <address> 요소 내부에 주소 정보를 담아 구조화한다. 2. CSS 이미지 대체기법(IR)을 사용한다.운용의 용이성 3. 웹 폰트를 사용한다. (저작권, 성능 주의!)Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  23. 23. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 제목, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.kt.com/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 제목/더보기 기능은 각각 구분되어야 하나, 이를 하나의 이미지로 처리하고 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  24. 24. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 제목, 대체 텍스트 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 제목과 더보기 링크를 개별 구성 마크업한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  25. 25. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 캡챠, 음성지원 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘된 사례 http://is.gd/WK7ZV1Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 계정 생성시 자동 생성되는 스펨을 방지하기 위해 제공되는 캡챠 기능의 경우, 시각적 장애를 지닌 사용자에게 이를 대체하는 음성을 지원해야 한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  26. 26. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 필수입력사항, 색상 구분 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/hyaClqPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 색상으로만 구분되기 때문에 색을 인지하지 못하는 사용자의 경우, 대상을 구별하는데 어려움을 겪는다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  27. 27. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 필수입력사항, 색상 구분 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 색상뿐만 아니라, 형태(모양)적으로 구분될 수 있도록 조치한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  28. 28. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 그래프 차트, 색상 구분 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/K8Gk3oPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 색상으로만 구분되기 때문에 색을 인지하지 못하는 사용자의 경우, 대상을 구별하는데 어려움을 겪는다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  29. 29. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 그래프 차트, 색상 구분 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 색상뿐만 아니라, 형태(모양)적으로 구분될 수 있도록 조치한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  30. 30. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 프레임, 제목 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.kt.com/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 프레임은 가급적 사용하지 않는 것이 좋으나 부득이 이를 사용해야 할 경우, name 속성과 title 속성을 반드시 제공해야 하는데 title 내용을 제대로 제공하고 있지 않다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  31. 31. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 프레임, 제목 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 프레임 별로 name, title 속성을 제공한다. 2. name 속성은 식별하기 쉬운 영문을 붙여쓴다.운용의 용이성 3. title 속성은 한글로 이해하기 쉬운 내용을 작성한다.Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  32. 32. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 아이프레임, 타이틀 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/12dv6wPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 아이프레임 사용시, 스크린리더나 점자정보단말기가 해당 아이프레임을 읽을 수 있도록 타이틀을 제공해야 하지만, 해당 페이지에서는 이를 제공하고 있지 않아 전맹, 저시력 장애자의 경우 정보에 대한 접근이 어렵다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  33. 33. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 아이프레임, 타이틀 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 아이프레임 요소에 타이틀(title) 속성을 명시한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  34. 34. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 동영상, 자막제공 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘된 사례 http://is.gd/muHwnZPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. TED 동영상의 경우, 인지적 장애(언어, 청각)를 해소하기 위해 동영상의 내용과 동일한 내용을 제공하고 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  35. 35. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 동영상, 대본제공 인식의 용이성 | 지침 1접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘된 사례 http://is.gd/muHwnZPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 뿐만 아니라, 동영상의 대본을 제공하고 있으며 해당 텍스트를 클릭시 이동하는 기능까지 제공하여 서비스의 품격을 높였다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  36. 36. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 운용의 용이성이란? KWCAG 2.0 가이드라인접근성을 고려한 웹 콘텐츠 제작인식의 용이성 사용자가 장애 유무 등에 관계 없이 웹 사이트에서 제공하는 모든 기능을 운용할 수 있게Perceivable 제공하는 것을 의미합니다. 운용의 용이성은 키보드 접근성, 충분한 시간 제공, 광과민성모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 발작 예방, 쉬운 내비게이션의 네 가지의 지침과 그에 해당하는 여덟 개의 검사 항목으로 이루어져 있습니다.운용의 용이성Operable 지침 검사항목사용자 인터페이스 구성 요소는 조작 가능하고 마우스가 아닌, 키보드로도 사용할 수 키보드 사용이 보장되어야 한다.내비게이션 할 수 있어야 한다. 있어야 한다. 키보드에 의한 포커스 이동은 논리적이어야 하며,이해의 용이성 시각적 구분이 가능해야 한다.Understandable 내용을 이해할 수 있는 충분한 시간을 시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있는 제공해야 한다. 기능을 제공해야 한다.콘텐츠는 이해할 수 있어야 한다. 자동으로 움직이는 콘텐츠는 정지할 수 있는 기능을 제공한다.견고성 광 과민성 발작을 일으킬 수 있는 내용은 깜박이거나, 번쩍 번쩍하는 콘텐츠는 제공하지 않는다.Robust 제공하지 않는다. 콘텐츠의 반복되는 영역은 건너 뛸 수 있는 기능을 제공한다.웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다. 내용 간 이동이 수월하도록 내비게이션 각 섹션영역에는 적절한 제목을 제공한다. 사용이 쉬워야 한다. 링크 기능이 있는 콘텐츠의 용도를 이해할 수 있도록 제공한다.
  37. 37. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 플래시 내비게이션, 키보드 사용성 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.greenart.co.kr/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 플래시로 제작된 내비게이션의 경우, 마우스 인터랙션만 적용한 경우가 많아 키보드로 접근하는데 문제를 발생시킨다. 대체 방법 또한 제공하고 있지 않다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  38. 38. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 플래시 내비게이션, 키보드 사용성 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 내비게이션의 경우, 플래시가 아닌 순수 웹 기술을 사용하여 제작한다. 2. 플래시를 불가피하게 활용해야 할 경우, MSAA를 적용하여 제작한다. (제한적)운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  39. 39. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 강제 블러링, 포커스 이동 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.tjoeun.co.kr/front/home/main.aspPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 키보드 포커싱을 강제로 블러링하기 위한 코드를 사용하고 있다. 이유는 링크가 적용된 콘텐츠의 테두리를 없애기 위해서... 이 때문에 키보드 접근이 전혀 되지 않는다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  40. 40. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 강제 블러링, 포커스 이동 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. onfocus=“blur()” 구문을 제거한다. 2. 테두리를 보이지 않게 설정할 필요가 있다면 CSS의 outline 속성을 사용한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  41. 41. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 스킵 내비게이션, 건너띄기 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.samsung.com/sec/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 다수의 콘텐츠 링크를 제공하는 내비게이션은 개별 페이지마다 포함되어 있지만, 매 페이지 방문시마다 내비게이션을 다시 읽어야 하는 불편함이 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  42. 42. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 스킵 내비게이션, 건너띄기 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 본문으로 건너 띌 수 있는 링크 기능을 내비게이션 바로 위에 추가한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  43. 43. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 자동 재생 콘텐츠, 제어 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.inews24.com/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 자동으로 재생되는 기능 구현만 있을 뿐, 이를 정지할 수 있는 기능은 제공되고 있지 않으며 접근 순서 또한 논리적이지 않게 구성되어 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  44. 44. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 자동 재생 콘텐츠, 제어 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 자동 재생 기능이 있을 경우, 정지 기능도 제공한다. 2. 키보드 포커스 이동 시, 조작 컨트롤러에 우선 접근할 수 있도록 논리적 구조 마크업을 한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  45. 45. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 새 창, 링크 이동 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://mail.naver.com/read/43661Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 메일 내용 중 페이스북 Update 버튼의 경우, 외부링크임에도 불구하고 사용자에게 외부로 이동이 된다는 안내를 제공하고 있지 않다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  46. 46. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 새 창, 링크 이동 운용의 용이성 | 지침 2접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 타이틀(title), 대체 내용(alt) 속성을 통해 외부로 이동됨을 알릴 필요가 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  47. 47. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 이해의 용이성이란? KWCAG 2.0 가이드라인접근성을 고려한 웹 콘텐츠 제작인식의 용이성 사용자가 장애의 유무와 관계 없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록Perceivable 제공하는 것을 의미합니다. 이해의 용이성은 가독성, 예측 가능성, 콘텐츠의 논리성, 입력모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 도움의 네 가지의 지침과 그에 해당하는 여섯 가지의 검사 항목으로 이루어져 있습니다.운용의 용이성Operable 지침 검사항목사용자 인터페이스 구성 요소는 조작 가능하고 콘텐츠는 읽고 이해하기 쉬워야 한다. 주 언어를 명시해야 한다.내비게이션 할 수 있어야 한다. 콘텐츠의 기능과 실행 결과는 예측할 수 사용자가 의도하지 않은 기능(새 창, 강제 포커싱)이이해의 용이성 있어야 한다. 구현되어서는 안된다.Understandable 콘텐츠는 논리적으로 구성되어야 한다. 논리적으로 접근/이동 가능한 순서를 제공해야 한다.콘텐츠는 이해할 수 있어야 한다. 표는 이해하기 쉽도록 구성해야 한다.견고성Robust 입력 오류를 방지하거나, 정정할 수 폼 입력서식에는 각 입력에 연결되는 레이블을 제공한다. 있어야 한다.웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다. 입력 오류는 정정할 수 있도록 제공한다.
  48. 48. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 한국어 사이트, 주 언어 명시 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.greenart.co.kr/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 주언어가 지정된 내용의 경우, 저시력 사용자에게 정해진 적절한 언어로 내용을 구성하여 이해를 돕는데 많은 역할을 하지만... 주언어가 명시되어 있지 않아 사용에 어려움이 따를 수 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  49. 49. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 한국어 사이트, 주 언어 명시 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 주언어 속성인 lang을 설정한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  50. 50. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 타이틀, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/78kyIJPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 사이트 내부의 다수 페이지에서 모두 동일한 문서 타이틀을 제공하고 있어 시각 장애를 지닌 경우, 내용 파익이 쉽지 않다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  51. 51. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 타이틀, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 각 페이지마다 담고 있는 내용에 적합한 적절한 제목을 작성한다. 2. 서버 스크립트를 사용하여 각각의 페이지 제목을 구성한다. (워드프레스의 경우 참고)운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  52. 52. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 레이아웃 테이블, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://monod.co.kr/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 논리적인 구조로 작성된 문서를 스타일시트로 레이아웃 잡은 것이 아니라, 레이아웃 테이블에 의지해 무의미적 나열로 시각적 장애를 지닌 사용자의 경우, 콘텐츠를 접근/이동하는데 많은 어려움이 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  53. 53. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 레이아웃 테이블, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 레이아웃 테이블이 아닌, CSS 레이아웃으로 사이트를 재구성한다. 2. 서버 스크립트를 사용하여 각각의 페이지 제목을 구성한다. (워드프레스의 경우 참고)운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  54. 54. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 데이터 테이블 제목, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/CcZSR2Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 테이블 작성 시, 테이블의 제목에 해당하는 캡션(caption) 요소가 제공되고 있지 않아 시각 장애자의 경우, 테이블 내용에 대한 접근 파악이 어렵다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  55. 55. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 데이터 표 제목, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 테이블 캡션의 경우, 테이블의 제목을 입력한다. 2. 테이블 서머리의 경우, 테이블의 내용을 요약하여 제공한다. (선택적)운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  56. 56. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 데이터 테이블 구조화, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/12dv6wPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 제목에 해당하는 테이블 요소임에도 불구하고 <th>가 아닌, <td>로 구조화 되어있어 사용자에게 정확한 의미 전달이 어렵다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  57. 57. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 데이터 테이블 구조화, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 테이블 제목의 경우, <th> 요소를 사용하여 구조화한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  58. 58. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 폼 레이블, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/TWr6h8Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 레이블은 폼 콘트롤 요소와 연결됨으로 내용을 스크린리더기, 점자정보단말기가 읽을 수 있는데 이를 적용하지 않아 사용자는 인식하는데 어려움을 겪는다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  59. 59. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 폼 레이블, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 이미지 요소를 레이블로 감싼 후, for 속성을 통해 인풋 요소와 연결한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  60. 60. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 폼 타이틀, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://is.gd/TWr6h8Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. UI 구현상 공간이 협소하여 레이블을 적용하지 못할 경우, 타이틀을 제공하는 것으로도 접근성 향상을 꾀할 수 있다. 하지만 이 역시 구현되지 않으면 비 시각적 접근은 어려워진다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  61. 61. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 폼 레이블, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 레이블을 적용하지 않은 폼 요소에 적절한 타이틀을 제공한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  62. 62. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 폼 옵션 그룹, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.adobe.com/kr/downloads/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 셀렉트 박스의 구성 옵션이 많을 경우, 사용자가 이를 구분하기 쉽게 옵션 그룹을 사용하여 이를 묶어줄 필요가 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  63. 63. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 폼 옵션 그룹, 논리적 구성 이해의 용이성 | 지침 3접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 각 영문 이니셜 별로 옵션 그룹을 사용하고 레이블로 주기한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  64. 64. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 견고성이란? KWCAG 2.0 가이드라인접근성을 고려한 웹 콘텐츠 제작인식의 용이성 사용자가 기술에 관계 없이 웹 사이트에서 제공하는 콘텐츠를 이용할 수 있도록 제공하는Perceivable 것을 의미합니다. 견고성은 문법 준수, 웹 애플리케이션 접근성의 두 가지 지침과 그에 해모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 당하는 두 가지의 검사 항목으로 이루어져 있습니다.운용의 용이성Operable 지침 검사항목사용자 인터페이스 구성 요소는 조작 가능하고 콘텐츠는 올바른 문법의 마크업으로 열고, 닫음. 중첩 관계 및 속성 선언에 오류가 없어야 한다.내비게이션 할 수 있어야 한다. 작성되어야 한다. 어플리케이션은 접근성을 제공해야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  65. 65. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 문법 오류, 유효성검사 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 유효성 검사도구 http://validator.kldp.org/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 문법적으로 문서 구조화가 잘 이루어졌는지 수시로 확인하는 것이 좋다. W3C 마크업 검증 서비스를 통해 잘 지켜졌는지 테스트할 수 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  66. 66. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 문법 오류, 유효성검사 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 유효성 검사도구 http://is.gd/v01LpkPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 브라우저 플러그인을 설치한다면 매번 사이트에 접근하여 테스트할 필요가 없어 손쉽게 처리할 수 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  67. 67. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 문법 오류, 유효성검사 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 유효성 검사도구Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 드림위버의 Validate 서비스를 이용하면 작업 중인 도구에서도 손쉽게 마크업 검증을 진행할 수 있다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  68. 68. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 href, 자바스크립트 접근성 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.kthcorp.com/html/002svc_mobile.jspPerceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 자바스크립트에 의존하여 href 속성 내부에 JS 함수 방법을 사용하면 스크립트 미지원 환경에서 접근성이 떨어진다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  69. 69. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 href, 자바스크립트 접근성 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. href 내부에는 접근 가능한 주소를 기입한다. 2. 스크립트 코드 단에서 해당 href에 속한 주소에 접근 사용하는 코드를 작성한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  70. 70. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 charset, 자바스크립트 문자 인코딩 방식 명시 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://www.kthcorp.com/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 자바스크립트 내부에 사용된 문자 인코딩 방식과 연결된 HTML 문자 인코딩 방식을 동일하게 처리/명시하여야 문자가 깨지거나, 코드 오류가 발생하지 않는다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  71. 71. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 charset, 자바스크립트 문자 인코딩 방식 명시 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. type, charset 속성에 적합한 정보를 명시한다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  72. 72. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 잘못된 대체 방법, 플래시 대체 콘텐츠 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 잘못된 사례 http://ejungle.co.kr/Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 플러그인 기술이 제대로 보이지 않는 환경에서 이를 보기 위한 플러그인 설치를 요구하는 문구는 적절한 대체 내용이라고 보기 어렵다.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  73. 73. 2012, 웹 접근성을 고려한 사이트 기획 스킬업 잘못된 대체 방법, 플래시 대체 콘텐츠 견고성 | 지침 4접근성을 고려한 웹 콘텐츠 제작인식의 용이성 개선 방안Perceivable모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 완벽한 대체가 어렵다면 핵심기능 (링크, 내용 등)에 대한 대체 내용은 제공하여야 함.운용의 용이성Operable사용자 인터페이스 구성 요소는 조작 가능하고내비게이션 할 수 있어야 한다.이해의 용이성Understandable콘텐츠는 이해할 수 있어야 한다.견고성Robust웹 콘텐츠는 미래의 기술로도 접근할 수 있도록견고하게 만들어야 한다.
  74. 74. Tools- 2 접근성 검사도구 및 플러그인 - 2.1 N-WAX - 2.2 K-WAH 3.0 
  75. 75. 2012, 웹 접근성을 고려한 사이트 기획 스킬업접근성을 고려한 웹 콘텐츠 제작 http://is.gd/CfcnVt http://a11y.nhncorp.com/guide/tool.html
  76. 76. 2012, 웹 접근성을 고려한 사이트 기획 스킬업접근성을 고려한 웹 콘텐츠 제작 http://www.wah.or.kr/Achive/kadowah.asp
  77. 77. 2012, 웹 접근성을 고려한 사이트 기획 스킬업접근성을 고려한 웹 콘텐츠 제작 http://is.gd/CfcnVt

×