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

2. Speaker
yamoo9
facebook.com/yamoo9
twitter.com/yamoo9
cafe.naver.com/webstandardproject

3. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
접근성을 고려한 웹 콘텐츠 제작

4. Agenda
- 1 UI 디자인 사례로 알아보는 접근성을 준수한 콘텐츠 제작 방법
- 1.1 대체 텍스트 제공 (이미지/이미지 맵)
- 1.2 명도 대비 차에 따른 정보 구분 방법 제공
- 1.3 주요 콘텐츠 바로가기 버튼 제공
- 1.4 키보드 컨트롤 제공
- 1.5 내용 이해가 쉬운 테이블 제공
- 1.6 손쉬운 사용법을 제공하는 폼 제공
- 1.7 논리적인 문서 골격 작성
- 1.8 플래시 콘텐츠 접근성 향상
- 1.8 동영상 자막 제공

5. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
인식의 용이성이란? KWCAG 2.0 가이드라인
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 사용자가 장애 유무 등에 관계 없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식
Perceivable
할 수 있도록 콘텐츠를 제공하는 것을 의미합니다. 인식의 용이성은 대체 텍스트, 멀티미디
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 어 대체 수단, 명료성 세 가지의 지침과 그에 해당하는 여섯 개의 검사 항목으로 이루어져
있습니다.
운용의 용이성
Operable 지침 검사항목
사용자 인터페이스 구성 요소는 조작 가능하고 텍스트가 아닌 콘텐츠는 대체 내용이 텍스트가 아닌 내용은 대체 내용이 제공되어야 한다.
내비게이션 할 수 있어야 한다. 제공되어야 한다.
멀티미디어 콘텐츠를 이해할 수 있는 색상으로만 구분되도록 만들어서는 안된다.
이해의 용이성 대체 내용이 제공되어야 한다.
Understandable
콘텐츠는 명확하게 전달되어야 한다. 명확하게 내용이 이해되어야 한다.
콘텐츠는 이해할 수 있어야 한다.
명도 대비 차가 없어 내용 이해가 어려우면 안된다.
견고성
Robust 자동으로 재생되는 배경음악을 사용해서는 안된다.
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

6. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
이미지, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.kt.com/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. <img> 요소 사용시 대체 내용(alt 속성)을 제공하지 않고 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

7. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
이미지, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <img> 요소 사용시 대체 내용(alt 속성)을 제공한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

8. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
정보 아이콘, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.sk.co.kr/investment/info/info.php
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. <img> 요소에 타이틀(title) 속성만 제공하고, 대체 내용(alt)은 제공하고 있지 않다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

9. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
정보 아이콘, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <img> 요소 사용시 대체 내용(alt 속성)을 제공한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

10. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
블릿 아이콘, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/TKuar4
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 블릿 아이콘의 경우, 특별한 의미가 없으므로 불필요한 대체 텍스트를 제공할 필요가 없다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

11. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
블릿 아이콘, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 불필요한 내용이기에 대체 내용(alt 속성)을 비운채 제공한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

12. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
이미지맵, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.11st.co.kr
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 이미지맵 내부의 영역 요소에 대채 내용 및 타이틀이 제공되고 있지 않다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

13. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
이미지맵, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <area> 요소 사용시 대체 내용(alt 속성)과 타이틀(title) 내용을 제공한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

14. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
관계구성도, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/xT2pLQ
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 관계구성도에 대한 개별 접근성은 고려하지 않고 하나의 이미지만 제공하고 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

15. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
관계구성도, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 목록(ul, ol) 요소로 관계구성도를 구조화한 후, 이미지 사용시 대체 내용을 제공한다.
2. CSS 이미지 대체기법(IR)을 사용한다.
운용의 용이성 3. 웹 폰트를 사용한다. (저작권, 성능 주의!)
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

16. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
이미지, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.kthcorp.com
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. <img> 요소 사용시 대체 내용(alt 속성)을 제공하지 않고 있으며,
자바스크립트에 의존하는 코드를 사용하고 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

17. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
이미지, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <img> 요소 사용시 대체 내용(alt 속성)을 제공한다.
2. CSS 이미지 대체기법(IR)을 사용한다.
운용의 용이성 3. 웹 폰트를 사용한다. (저작권, 성능 주의!)
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

18. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
반복이미지, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.yes24.com/24/Goods/6388695
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 품평을 위한 내용(별)을 반복적인 이미지로 사용하고 있다.
뿐만 아니라, 대체 내용 또한 제공되고 있지 않다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

19. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
반복이미지, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 별 하나를 개별 이미지로 만들지 않고 묶어서 하나의 이미지로 만든다.
2. 대체 내용을 제공한다. 예) 매우만족, 만족, 보통, 불만족, 매우불만족
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

20. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
배너, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.kt.com/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 트랜지션 기능 구현에만 급급하고, 내용 전달의 목적을 상실했다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

21. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
이미지, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <div> 내부에 텍스트를 대체 내용을 기입한다.
2. CSS 이미지 대체기법(IR)을 사용한다.
운용의 용이성 3. 보다 올바른 구조를 작성한 후, 이미지 대체 기법을 사용한다.
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

22. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
주소, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.kt.com/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 주소 및 관련 내용을 개별 구성하지 않고, 하나의 이미지에 모두 몰아서 제공하고 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

23. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
주소, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. <address> 요소 내부에 주소 정보를 담아 구조화한다.
2. CSS 이미지 대체기법(IR)을 사용한다.
운용의 용이성 3. 웹 폰트를 사용한다. (저작권, 성능 주의!)
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

24. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
제목, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.kt.com/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 제목/더보기 기능은 각각 구분되어야 하나, 이를 하나의 이미지로 처리하고 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

25. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
제목, 대체 텍스트 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 제목과 더보기 링크를 개별 구성 마크업한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

26. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
캡챠, 음성지원 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘된 사례 http://is.gd/WK7ZV1
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 계정 생성시 자동 생성되는 스펨을 방지하기 위해 제공되는 캡챠 기능의 경우,
시각적 장애를 지닌 사용자에게 이를 대체하는 음성을 지원해야 한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

27. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
필수입력사항, 색상 구분 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/hyaClq
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 색상으로만 구분되기 때문에 색을 인지하지 못하는 사용자의 경우,
대상을 구별하는데 어려움을 겪는다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

28. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
필수입력사항, 색상 구분 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 색상뿐만 아니라, 형태(모양)적으로 구분될 수 있도록 조치한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

29. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
그래프 차트, 색상 구분 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/K8Gk3o
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 색상으로만 구분되기 때문에 색을 인지하지 못하는 사용자의 경우,
대상을 구별하는데 어려움을 겪는다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

30. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
그래프 차트, 색상 구분 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 색상뿐만 아니라, 형태(모양)적으로 구분될 수 있도록 조치한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

31. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
프레임, 제목 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.kt.com/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 프레임은 가급적 사용하지 않는 것이 좋으나 부득이 이를 사용해야 할 경우,
name 속성과 title 속성을 반드시 제공해야 하는데 title 내용을 제대로 제공하고 있지 않다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

32. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
프레임, 제목 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 프레임 별로 name, title 속성을 제공한다.
2. name 속성은 식별하기 쉬운 영문을 붙여쓴다.
운용의 용이성 3. title 속성은 한글로 이해하기 쉬운 내용을 작성한다.
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

33. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
아이프레임, 타이틀 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/12dv6w
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 아이프레임 사용시, 스크린리더나 점자정보단말기가 해당 아이프레임을 읽을 수 있도록 타이틀을
제공해야 하지만, 해당 페이지에서는 이를 제공하고 있지 않아 전맹, 저시력 장애자의 경우 정보에
대한 접근이 어렵다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

34. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
아이프레임, 타이틀 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 아이프레임 요소에 타이틀(title) 속성을 명시한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

35. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
동영상, 자막제공 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘된 사례 http://is.gd/muHwnZ
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. TED 동영상의 경우, 인지적 장애(언어, 청각)를 해소하기 위해
동영상의 내용과 동일한 내용을 제공하고 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

36. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
동영상, 대본제공 인식의 용이성 | 지침 1
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘된 사례 http://is.gd/muHwnZ
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 뿐만 아니라, 동영상의 대본을 제공하고 있으며 해당 텍스트를 클릭시 이동하는 기능까지
제공하여 서비스의 품격을 높였다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

37. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
운용의 용이성이란? KWCAG 2.0 가이드라인
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 사용자가 장애 유무 등에 관계 없이 웹 사이트에서 제공하는 모든 기능을 운용할 수 있게
Perceivable
제공하는 것을 의미합니다. 운용의 용이성은 키보드 접근성, 충분한 시간 제공, 광과민성
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 발작 예방, 쉬운 내비게이션의 네 가지의 지침과 그에 해당하는 여덟 개의 검사 항목으로
이루어져 있습니다.
운용의 용이성
Operable 지침 검사항목
사용자 인터페이스 구성 요소는 조작 가능하고 마우스가 아닌, 키보드로도 사용할 수 키보드 사용이 보장되어야 한다.
내비게이션 할 수 있어야 한다. 있어야 한다.
키보드에 의한 포커스 이동은 논리적이어야 하며,
이해의 용이성 시각적 구분이 가능해야 한다.
Understandable
내용을 이해할 수 있는 충분한 시간을 시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있는
제공해야 한다. 기능을 제공해야 한다.
콘텐츠는 이해할 수 있어야 한다.
자동으로 움직이는 콘텐츠는 정지할 수 있는 기능을
제공한다.
견고성 광 과민성 발작을 일으킬 수 있는 내용은 깜박이거나, 번쩍 번쩍하는 콘텐츠는 제공하지 않는다.
Robust 제공하지 않는다.
콘텐츠의 반복되는 영역은 건너 뛸 수 있는 기능을 제공한다.
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.
내용 간 이동이 수월하도록 내비게이션 각 섹션영역에는 적절한 제목을 제공한다.
사용이 쉬워야 한다.
링크 기능이 있는 콘텐츠의 용도를 이해할 수 있도록 제공한다.

38. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
플래시 내비게이션, 키보드 사용성 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.greenart.co.kr/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 플래시로 제작된 내비게이션의 경우, 마우스 인터랙션만 적용한 경우가 많아 키보드로 접근하는데
문제를 발생시킨다. 대체 방법 또한 제공하고 있지 않다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

39. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
플래시 내비게이션, 키보드 사용성 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 내비게이션의 경우, 플래시가 아닌 순수 웹 기술을 사용하여 제작한다.
2. 플래시를 불가피하게 활용해야 할 경우, MSAA를 적용하여 제작한다. (제한적)
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

40. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
강제 블러링, 포커스 이동 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.tjoeun.co.kr/front/home/main.asp
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 키보드 포커싱을 강제로 블러링하기 위한 코드를 사용하고 있다.
이유는 링크가 적용된 콘텐츠의 테두리를 없애기 위해서...
이 때문에 키보드 접근이 전혀 되지 않는다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

41. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
강제 블러링, 포커스 이동 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. onfocus=“blur()” 구문을 제거한다.
2. 테두리를 보이지 않게 설정할 필요가 있다면 CSS의 outline 속성을 사용한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

42. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
스킵 내비게이션, 건너띄기 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.samsung.com/sec/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 다수의 콘텐츠 링크를 제공하는 내비게이션은 개별 페이지마다 포함되어 있지만,
매 페이지 방문시마다 내비게이션을 다시 읽어야 하는 불편함이 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

43. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
스킵 내비게이션, 건너띄기 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 본문으로 건너 띌 수 있는 링크 기능을 내비게이션 바로 위에 추가한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

44. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
자동 재생 콘텐츠, 제어 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.inews24.com/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 자동으로 재생되는 기능 구현만 있을 뿐, 이를 정지할 수 있는 기능은 제공되고 있지 않으며
접근 순서 또한 논리적이지 않게 구성되어 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

45. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
자동 재생 콘텐츠, 제어 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 자동 재생 기능이 있을 경우, 정지 기능도 제공한다.
2. 키보드 포커스 이동 시, 조작 컨트롤러에 우선 접근할 수 있도록 논리적 구조 마크업을 한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

46. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
새 창, 링크 이동 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://mail.naver.com/read/43661
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 메일 내용 중 페이스북 Update 버튼의 경우, 외부링크임에도 불구하고
사용자에게 외부로 이동이 된다는 안내를 제공하고 있지 않다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

47. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
새 창, 링크 이동 운용의 용이성 | 지침 2
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 타이틀(title), 대체 내용(alt) 속성을 통해 외부로 이동됨을 알릴 필요가 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

48. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
이해의 용이성이란? KWCAG 2.0 가이드라인
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 사용자가 장애의 유무와 관계 없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록
Perceivable
제공하는 것을 의미합니다. 이해의 용이성은 가독성, 예측 가능성, 콘텐츠의 논리성, 입력
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 도움의 네 가지의 지침과 그에 해당하는 여섯 가지의 검사 항목으로 이루어져 있습니다.
운용의 용이성
Operable 지침 검사항목
사용자 인터페이스 구성 요소는 조작 가능하고 콘텐츠는 읽고 이해하기 쉬워야 한다. 주 언어를 명시해야 한다.
내비게이션 할 수 있어야 한다.
콘텐츠의 기능과 실행 결과는 예측할 수 사용자가 의도하지 않은 기능(새 창, 강제 포커싱)이
이해의 용이성 있어야 한다. 구현되어서는 안된다.
Understandable
콘텐츠는 논리적으로 구성되어야 한다. 논리적으로 접근/이동 가능한 순서를 제공해야 한다.
콘텐츠는 이해할 수 있어야 한다.
표는 이해하기 쉽도록 구성해야 한다.
견고성
Robust 입력 오류를 방지하거나, 정정할 수 폼 입력서식에는 각 입력에 연결되는 레이블을 제공한다.
있어야 한다.
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.
입력 오류는 정정할 수 있도록 제공한다.

49. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
한국어 사이트, 주 언어 명시 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.greenart.co.kr/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 주언어가 지정된 내용의 경우, 저시력 사용자에게 정해진 적절한 언어로 내용을 구성하여
이해를 돕는데 많은 역할을 하지만... 주언어가 명시되어 있지 않아 사용에 어려움이 따를 수 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

50. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
한국어 사이트, 주 언어 명시 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 주언어 속성인 lang을 설정한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

51. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
타이틀, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/78kyIJ
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 사이트 내부의 다수 페이지에서 모두 동일한 문서 타이틀을 제공하고 있어
시각 장애를 지닌 경우, 내용 파익이 쉽지 않다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

52. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
타이틀, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 각 페이지마다 담고 있는 내용에 적합한 적절한 제목을 작성한다.
2. 서버 스크립트를 사용하여 각각의 페이지 제목을 구성한다. (워드프레스의 경우 참고)
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

53. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
레이아웃 테이블, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://monod.co.kr/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 논리적인 구조로 작성된 문서를 스타일시트로 레이아웃 잡은 것이 아니라,
레이아웃 테이블에 의지해 무의미적 나열로 시각적 장애를 지닌 사용자의 경우,
콘텐츠를 접근/이동하는데 많은 어려움이 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

54. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
레이아웃 테이블, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 레이아웃 테이블이 아닌, CSS 레이아웃으로 사이트를 재구성한다.
2. 서버 스크립트를 사용하여 각각의 페이지 제목을 구성한다. (워드프레스의 경우 참고)
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

55. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
데이터 테이블 제목, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/CcZSR2
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 테이블 작성 시, 테이블의 제목에 해당하는 캡션(caption) 요소가 제공되고 있지 않아
시각 장애자의 경우, 테이블 내용에 대한 접근 파악이 어렵다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

56. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
데이터 표 제목, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 테이블 캡션의 경우, 테이블의 제목을 입력한다.
2. 테이블 서머리의 경우, 테이블의 내용을 요약하여 제공한다. (선택적)
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

57. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
데이터 테이블 구조화, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/12dv6w
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 제목에 해당하는 테이블 요소임에도 불구하고 <th>가 아닌, <td>로 구조화 되어있어
사용자에게 정확한 의미 전달이 어렵다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

58. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
데이터 테이블 구조화, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 테이블 제목의 경우, <th> 요소를 사용하여 구조화한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

59. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
폼 레이블, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/TWr6h8
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 레이블은 폼 콘트롤 요소와 연결됨으로 내용을 스크린리더기, 점자정보단말기가 읽을 수 있는데
이를 적용하지 않아 사용자는 인식하는데 어려움을 겪는다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

60. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
폼 레이블, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 이미지 요소를 레이블로 감싼 후, for 속성을 통해 인풋 요소와 연결한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

61. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
폼 타이틀, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://is.gd/TWr6h8
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. UI 구현상 공간이 협소하여 레이블을 적용하지 못할 경우, 타이틀을 제공하는 것으로도
접근성 향상을 꾀할 수 있다. 하지만 이 역시 구현되지 않으면 비 시각적 접근은 어려워진다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

62. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
폼 레이블, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 레이블을 적용하지 않은 폼 요소에 적절한 타이틀을 제공한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

63. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
폼 옵션 그룹, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.adobe.com/kr/downloads/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 셀렉트 박스의 구성 옵션이 많을 경우, 사용자가 이를 구분하기 쉽게
옵션 그룹을 사용하여 이를 묶어줄 필요가 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

64. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
폼 옵션 그룹, 논리적 구성 이해의 용이성 | 지침 3
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 각 영문 이니셜 별로 옵션 그룹을 사용하고 레이블로 주기한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

65. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
견고성이란? KWCAG 2.0 가이드라인
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 사용자가 기술에 관계 없이 웹 사이트에서 제공하는 콘텐츠를 이용할 수 있도록 제공하는
Perceivable
것을 의미합니다. 견고성은 문법 준수, 웹 애플리케이션 접근성의 두 가지 지침과 그에 해
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 당하는 두 가지의 검사 항목으로 이루어져 있습니다.
운용의 용이성
Operable 지침 검사항목
사용자 인터페이스 구성 요소는 조작 가능하고 콘텐츠는 올바른 문법의 마크업으로 열고, 닫음. 중첩 관계 및 속성 선언에 오류가 없어야 한다.
내비게이션 할 수 있어야 한다. 작성되어야 한다.
어플리케이션은 접근성을 제공해야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

66. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
문법 오류, 유효성검사 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 유효성 검사도구 http://validator.kldp.org/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 문법적으로 문서 구조화가 잘 이루어졌는지 수시로 확인하는 것이 좋다.
W3C 마크업 검증 서비스를 통해 잘 지켜졌는지 테스트할 수 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

67. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
문법 오류, 유효성검사 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 유효성 검사도구 http://is.gd/v01Lpk
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 브라우저 플러그인을 설치한다면 매번 사이트에 접근하여
테스트할 필요가 없어 손쉽게 처리할 수 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

68. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
문법 오류, 유효성검사 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 유효성 검사도구
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 드림위버의 Validate 서비스를 이용하면 작업 중인 도구에서도 손쉽게 마크업 검증을 진행할 수 있다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

69. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
href, 자바스크립트 접근성 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.kthcorp.com/html/002svc_mobile.jsp
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 자바스크립트에 의존하여 href 속성 내부에 JS 함수 방법을 사용하면
스크립트 미지원 환경에서 접근성이 떨어진다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

70. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
href, 자바스크립트 접근성 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. href 내부에는 접근 가능한 주소를 기입한다.
2. 스크립트 코드 단에서 해당 href에 속한 주소에 접근 사용하는 코드를 작성한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

71. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
charset, 자바스크립트 문자 인코딩 방식 명시 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://www.kthcorp.com/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 자바스크립트 내부에 사용된 문자 인코딩 방식과 연결된 HTML 문자 인코딩 방식을
동일하게 처리/명시하여야 문자가 깨지거나, 코드 오류가 발생하지 않는다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

72. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
charset, 자바스크립트 문자 인코딩 방식 명시 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. type, charset 속성에 적합한 정보를 명시한다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

73. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
잘못된 대체 방법, 플래시 대체 콘텐츠 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 잘못된 사례 http://ejungle.co.kr/
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 플러그인 기술이 제대로 보이지 않는 환경에서 이를 보기 위한
플러그인 설치를 요구하는 문구는 적절한 대체 내용이라고 보기 어렵다.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

74. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
잘못된 대체 방법, 플래시 대체 콘텐츠 견고성 | 지침 4
접근성을 고려한 웹 콘텐츠 제작
인식의 용이성 개선 방안
Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 완벽한 대체가 어렵다면 핵심기능 (링크, 내용 등)에 대한 대체 내용은 제공하여야 함.
운용의 용이성
Operable
사용자 인터페이스 구성 요소는 조작 가능하고
내비게이션 할 수 있어야 한다.
이해의 용이성
Understandable
콘텐츠는 이해할 수 있어야 한다.
견고성
Robust
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다.

75. Tools
- 2 접근성 검사도구 및 플러그인
- 2.1 N-WAX
- 2.2 K-WAH 3.0

76. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
접근성을 고려한 웹 콘텐츠 제작
http://is.gd/CfcnVt
http://a11y.nhncorp.com/guide/tool.html

77. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
접근성을 고려한 웹 콘텐츠 제작
http://www.wah.or.kr/Achive/kadowah.asp

78. 2012, 웹 접근성을 고려한 사이트 기획 스킬업
접근성을 고려한 웹 콘텐츠 제작
http://is.gd/CfcnVt