DIK accessible technique

Speakeryamoo9

facebook.com/yamoo9

twitter.com/yamoo9

cafe.naver.com/webstandardproject

2012, 웹 접근성을 고려한 사이트 기획 스킬업

접근성을 고려한 웹 콘텐츠 제작

- 1 UI 디자인 사례로 알아보는 접근성을 준수한 콘텐츠 제작 방법

- 1.1 대체 텍스트 제공 (이미지/이미지 맵)

- 1.2 명도 대비 차에 따른 정보 구분 방법 제공

- 1.3 주요 콘텐츠 바로가기 버튼 제공

- 1.4 키보드 컨트롤 제공

- 1.5 내용 이해가 쉬운 테이블 제공

- 1.6 손쉬운 사용법을 제공하는 폼 제공

- 1.7 논리적인 문서 골격 작성

- 1.8 플래시 콘텐츠 접근성 향상

- 1.8 동영상 자막 제공

Agenda

인식의 용이성Perceivable

모든 콘텐츠는 사용자가 인식할 수 있어야 한다.



운용의 용이성Operable

사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

이해의 용이성Understandable

콘텐츠는 이해할 수 있어야 한다.

견고성Robust

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

사용자가 장애 유무 등에 관계 없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식 할 수 있도록 콘텐츠를 제공하는 것을 의미합니다. 인식의 용이성은 대체 텍스트, 멀티미디어 대체 수단, 명료성 세 가지의 지침과 그에 해당하는 여섯 개의 검사 항목으로 이루어져 있습니다.

인식의 용이성이란? KWCAG 2.0 가이드라인

지침 검사항목

텍스트가 아닌 콘텐츠는 대체 내용이 제공되어야 한다.

텍스트가 아닌 내용은 대체 내용이 제공되어야 한다.

멀티미디어 콘텐츠를 이해할 수 있는 대체 내용이 제공되어야 한다.

색상으로만 구분되도록 만들어서는 안된다.

콘텐츠는 명확하게 전달되어야 한다. 명확하게 내용이 이해되어야 한다.콘텐츠는 명확하게 전달되어야 한다.

명도 대비 차가 없어 내용 이해가 어려우면 안된다.

콘텐츠는 명확하게 전달되어야 한다.

자동으로 재생되는 배경음악을 사용해서는 안된다.









견고성Robust


이미지, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

<img> 요소 사용시 대체 내용(alt 속성)을 제공하지 않고 있다.

http://www.kt.com/

http://www.kt.com

http://www.kt.com









견고성Robust



개선 방안

1. <img> 요소 사용시 대체 내용(alt 속성)을 제공한다.









견고성Robust


정보 아이콘, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

<img> 요소에 타이틀(title) 속성만 제공하고, 대체 내용(alt)은 제공하고 있지 않다.

http://www.sk.co.kr/investment/info/info.php











견고성Robust


정보 아이콘, 대체 텍스트 인식의 용이성 | 지침 1

개선 방안










견고성Robust


블릿 아이콘, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

블릿 아이콘의 경우, 특별한 의미가 없으므로 불필요한 대체 텍스트를 제공할 필요가 없다.

http://is.gd/TKuar4

http://is.gd/TKuar4

http://is.gd/TKuar4









견고성Robust


블릿 아이콘, 대체 텍스트 인식의 용이성 | 지침 1

개선 방안

1. 불필요한 내용이기에 대체 내용(alt 속성)을 비운채 제공한다.









견고성Robust


이미지맵, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

이미지맵 내부의 영역 요소에 대채 내용 및 타이틀이 제공되고 있지 않다.

http://www.11st.co.kr











견고성Robust


이미지맵, 대체 텍스트 인식의 용이성 | 지침 1

개선 방안

1. <area> 요소 사용시 대체 내용(alt 속성)과 타이틀(title) 내용을 제공한다.









견고성Robust


관계구성도, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

관계구성도에 대한 개별 접근성은 고려하지 않고 하나의 이미지만 제공하고 있다.

http://is.gd/xT2pLQ

http://is.gd/xT2pLQ

http://is.gd/xT2pLQ









견고성Robust


관계구성도, 대체 텍스트 인식의 용이성 | 지침 1

개선 방안

1. 목록(ul, ol) 요소로 관계구성도를 구조화한 후, 이미지 사용시 대체 내용을 제공한다.

2. CSS 이미지 대체기법(IR)을 사용한다.

3. 웹 폰트를 사용한다. (저작권, 성능 주의!)









견고성Robust



잘못된 사례

<img> 요소 사용시 대체 내용(alt 속성)을 제공하지 않고 있으며,자바스크립트에 의존하는 코드를 사용하고 있다.

http://www.kthcorp.com











견고성Robust



개선 방안












견고성Robust


반복이미지, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

품평을 위한 내용(별)을 반복적인 이미지로 사용하고 있다.뿐만 아니라, 대체 내용 또한 제공되고 있지 않다.

http://www.yes24.com/24/Goods/6388695











견고성Robust


반복이미지, 대체 텍스트 인식의 용이성 | 지침 1

개선 방안

1. 별 하나를 개별 이미지로 만들지 않고 묶어서 하나의 이미지로 만든다.

2. 대체 내용을 제공한다. 예) 매우만족, 만족, 보통, 불만족, 매우불만족









견고성Robust


배너, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

트랜지션 기능 구현에만 급급하고, 내용 전달의 목적을 상실했다.

http://www.kt.com/

http://www.kt.com/

http://www.kt.com/









견고성Robust



개선 방안

1. <div> 내부에 텍스트를 대체 내용을 기입한다.


3. 보다 올바른 구조를 작성한 후, 이미지 대체 기법을 사용한다.









견고성Robust


주소, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

주소 및 관련 내용을 개별 구성하지 않고, 하나의 이미지에 모두 몰아서 제공하고 있다.

http://www.kt.com/

http://www.kt.com/

http://www.kt.com/









견고성Robust


주소, 대체 텍스트 인식의 용이성 | 지침 1

개선 방안

1. <address> 요소 내부에 주소 정보를 담아 구조화한다.











견고성Robust


제목, 대체 텍스트 인식의 용이성 | 지침 1

잘못된 사례

제목/더보기 기능은 각각 구분되어야 하나, 이를 하나의 이미지로 처리하고 있다.

http://www.kt.com/

http://www.kt.com/

http://www.kt.com/









견고성Robust


제목, 대체 텍스트 인식의 용이성 | 지침 1

개선 방안

1. 제목과 더보기 링크를 개별 구성 마크업한다.









견고성Robust


캡챠, 음성지원 인식의 용이성 | 지침 1

잘된 사례

계정 생성시 자동 생성되는 스펨을 방지하기 위해 제공되는 캡챠 기능의 경우,시각적 장애를 지닌 사용자에게 이를 대체하는 음성을 지원해야 한다.

http://is.gd/WK7ZV1

http://is.gd/WK7ZV1

http://is.gd/WK7ZV1









견고성Robust


필수입력사항, 색상 구분 인식의 용이성 | 지침 1

잘못된 사례

색상으로만 구분되기 때문에 색을 인지하지 못하는 사용자의 경우,대상을 구별하는데 어려움을 겪는다.

http://is.gd/hyaClq

http://is.gd/hyaClq

http://is.gd/hyaClq









견고성Robust


인식의 용이성 | 지침 1

개선 방안

1. 색상뿐만 아니라, 형태(모양)적으로 구분될 수 있도록 조치한다.

필수입력사항, 색상 구분









견고성Robust


그래프 차트, 색상 구분 인식의 용이성 | 지침 1

잘못된 사례

색상으로만 구분되기 때문에 색을 인지하지 못하는 사용자의 경우,대상을 구별하는데 어려움을 겪는다.

http://is.gd/K8Gk3o

http://is.gd/K8Gk3o

http://is.gd/K8Gk3o









견고성Robust


인식의 용이성 | 지침 1

개선 방안

1. 색상뿐만 아니라, 형태(모양)적으로 구분될 수 있도록 조치한다.

그래프 차트, 색상 구분









견고성Robust


프레임, 제목 인식의 용이성 | 지침 1

잘못된 사례

프레임은 가급적 사용하지 않는 것이 좋으나 부득이 이를 사용해야 할 경우,name 속성과 title 속성을 반드시 제공해야 하는데 title 내용을 제대로 제공하고 있지 않다.

http://www.kt.com/

http://www.kt.com/

http://www.kt.com/

개선 방안

1. 프레임 별로 name, title 속성을 제공한다.

2. name 속성은 식별하기 쉬운 영문을 붙여쓴다.

3. title 속성은 한글로 이해하기 쉬운 내용을 작성한다.









견고성Robust


프레임, 제목 인식의 용이성 | 지침 1

잘못된 사례

아이프레임 사용시, 스크린리더나 점자정보단말기가 해당 아이프레임을 읽을 수 있도록 타이틀을제공해야 하지만, 해당 페이지에서는 이를 제공하고 있지 않아 전맹, 저시력 장애자의 경우 정보에대한 접근이 어렵다.









견고성Robust


아이프레임, 타이틀 인식의 용이성 | 지침 1

http://is.gd/12dv6w

http://is.gd/12dv6w

http://is.gd/12dv6w









견고성Robust


아이프레임, 타이틀 인식의 용이성 | 지침 1

개선 방안

1. 아이프레임 요소에 타이틀(title) 속성을 명시한다.









견고성Robust


동영상, 자막제공 인식의 용이성 | 지침 1

잘된 사례

TED 동영상의 경우, 인지적 장애(언어, 청각)를 해소하기 위해 동영상의 내용과 동일한 내용을 제공하고 있다.

http://is.gd/muHwnZ

http://is.gd/muHwnZ

http://is.gd/muHwnZ









견고성Robust


동영상, 대본제공 인식의 용이성 | 지침 1

잘된 사례

뿐만 아니라, 동영상의 대본을 제공하고 있으며 해당 텍스트를 클릭시 이동하는 기능까지제공하여 서비스의 품격을 높였다.

http://is.gd/muHwnZ

http://is.gd/muHwnZ

http://is.gd/muHwnZ





견고성Robust


사용자가 장애 유무 등에 관계 없이 웹 사이트에서 제공하는 모든 기능을 운용할 수 있게 제공하는 것을 의미합니다. 운용의 용이성은 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션의 네 가지의 지침과 그에 해당하는 여덟 개의 검사 항목으로 이루어져 있습니다.

운용의 용이성이란? KWCAG 2.0 가이드라인

지침 검사항목

마우스가 아닌, 키보드로도 사용할 수있어야 한다.

키보드 사용이 보장되어야 한다.마우스가 아닌, 키보드로도 사용할 수있어야 한다.

키보드에 의한 포커스 이동은 논리적이어야 하며, 시각적 구분이 가능해야 한다.

내용을 이해할 수 있는 충분한 시간을제공해야 한다.

시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있는기능을 제공해야 한다.

내용을 이해할 수 있는 충분한 시간을제공해야 한다.

자동으로 움직이는 콘텐츠는 정지할 수 있는 기능을제공한다.

광 과민성 발작을 일으킬 수 있는 내용은제공하지 않는다.

깜박이거나, 번쩍 번쩍하는 콘텐츠는 제공하지 않는다.

내용 간 이동이 수월하도록 내비게이션 사용이 쉬워야 한다.

콘텐츠의 반복되는 영역은 건너 뛸 수 있는 기능을 제공한다.

내용 간 이동이 수월하도록 내비게이션 사용이 쉬워야 한다.

각 섹션영역에는 적절한 제목을 제공한다.내용 간 이동이 수월하도록 내비게이션 사용이 쉬워야 한다.

링크 기능이 있는 콘텐츠의 용도를 이해할 수 있도록 제공한다.






접근성을 고려한 웹 콘텐츠 제작플래시 내비게이션, 키보드 사용성 운용의 용이성 | 지침 2

잘못된 사례

플래시로 제작된 내비게이션의 경우, 마우스 인터랙션만 적용한 경우가 많아 키보드로 접근하는데문제를 발생시킨다. 대체 방법 또한 제공하고 있지 않다.

http://www.greenart.co.kr/



견고성Robust









접근성을 고려한 웹 콘텐츠 제작운용의 용이성 | 지침 2



견고성Robust






개선 방안

1. 내비게이션의 경우, 플래시가 아닌 순수 웹 기술을 사용하여 제작한다.

2. 플래시를 불가피하게 활용해야 할 경우, MSAA를 적용하여 제작한다. (제한적)

플래시 내비게이션, 키보드 사용성


접근성을 고려한 웹 콘텐츠 제작강제 블러링, 포커스 이동 운용의 용이성 | 지침 2

잘못된 사례

키보드 포커싱을 강제로 블러링하기 위한 코드를 사용하고 있다.이유는 링크가 적용된 콘텐츠의 테두리를 없애기 위해서...이 때문에 키보드 접근이 전혀 되지 않는다.

http://www.tjoeun.co.kr/front/home/main.asp



견고성Robust









접근성을 고려한 웹 콘텐츠 제작운용의 용이성 | 지침 2



견고성Robust






개선 방안

1. onfocus=“blur()” 구문을 제거한다.

2. 테두리를 보이지 않게 설정할 필요가 있다면 CSS의 outline 속성을 사용한다.

강제 블러링, 포커스 이동


접근성을 고려한 웹 콘텐츠 제작스킵 내비게이션, 건너띄기 운용의 용이성 | 지침 2

잘못된 사례

다수의 콘텐츠 링크를 제공하는 내비게이션은 개별 페이지마다 포함되어 있지만,매 페이지 방문시마다 내비게이션을 다시 읽어야 하는 불편함이 있다.

http://www.samsung.com/sec/



견고성Robust









접근성을 고려한 웹 콘텐츠 제작스킵 내비게이션, 건너띄기 운용의 용이성 | 지침 2



견고성Robust






개선 방안

1. 본문으로 건너 띌 수 있는 링크 기능을 내비게이션 바로 위에 추가한다.


접근성을 고려한 웹 콘텐츠 제작자동 재생 콘텐츠, 제어 운용의 용이성 | 지침 2

잘못된 사례

자동으로 재생되는 기능 구현만 있을 뿐, 이를 정지할 수 있는 기능은 제공되고 있지 않으며접근 순서 또한 논리적이지 않게 구성되어 있다.

http://www.inews24.com/



견고성Robust









접근성을 고려한 웹 콘텐츠 제작자동 재생 콘텐츠, 제어

개선 방안

1. 자동 재생 기능이 있을 경우, 정지 기능도 제공한다.

2. 키보드 포커스 이동 시, 조작 컨트롤러에 우선 접근할 수 있도록 논리적 구조 마크업을 한다.



견고성Robust






운용의 용이성 | 지침 2


접근성을 고려한 웹 콘텐츠 제작새 창, 링크 이동 운용의 용이성 | 지침 2

잘못된 사례

메일 내용 중 페이스북 Update 버튼의 경우, 외부링크임에도 불구하고 사용자에게 외부로 이동이 된다는 안내를 제공하고 있지 않다.

http://mail.naver.com/read/43661



견고성Robust









접근성을 고려한 웹 콘텐츠 제작새 창, 링크 이동 운용의 용이성 | 지침 2



견고성Robust






개선 방안

1. 타이틀(title), 대체 내용(alt) 속성을 통해 외부로 이동됨을 알릴 필요가 있다.



견고성Robust


사용자가 장애의 유무와 관계 없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미합니다. 이해의 용이성은 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움의 네 가지의 지침과 그에 해당하는 여섯 가지의 검사 항목으로 이루어져 있습니다.

이해의 용이성이란? KWCAG 2.0 가이드라인

지침 검사항목

콘텐츠는 읽고 이해하기 쉬워야 한다. 주 언어를 명시해야 한다.

콘텐츠의 기능과 실행 결과는 예측할 수있어야 한다.

사용자가 의도하지 않은 기능(새 창, 강제 포커싱)이 구현되어서는 안된다.

콘텐츠는 논리적으로 구성되어야 한다. 논리적으로 접근/이동 가능한 순서를 제공해야 한다.

표는 이해하기 쉽도록 구성해야 한다.

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

폼 입력서식에는 각 입력에 연결되는 레이블을 제공한다.

입력 오류는 정정할 수 있도록 제공한다.








접근성을 고려한 웹 콘텐츠 제작한국어 사이트, 주 언어 명시 이해의 용이성 | 지침 3

잘못된 사례

주언어가 지정된 내용의 경우, 저시력 사용자에게 정해진 적절한 언어로 내용을 구성하여이해를 돕는데 많은 역할을 하지만... 주언어가 명시되어 있지 않아 사용에 어려움이 따를 수 있다.


견고성Robust











접근성을 고려한 웹 콘텐츠 제작한국어 사이트, 주 언어 명시 이해의 용이성 | 지침 3

견고성Robust








개선 방안

1. 주언어 속성인 lang을 설정한다.


접근성을 고려한 웹 콘텐츠 제작타이틀, 논리적 구성 이해의 용이성 | 지침 3

잘못된 사례

사이트 내부의 다수 페이지에서 모두 동일한 문서 타이틀을 제공하고 있어시각 장애를 지닌 경우, 내용 파익이 쉽지 않다.

http://is.gd/78kyIJ

견고성Robust








http://is.gd/78kyIJ

http://is.gd/78kyIJ



개선 방안

1. 각 페이지마다 담고 있는 내용에 적합한 적절한 제목을 작성한다.

2. 서버 스크립트를 사용하여 각각의 페이지 제목을 구성한다. (워드프레스의 경우 참고)

견고성Robust








이해의 용이성 | 지침 3타이틀, 논리적 구성


접근성을 고려한 웹 콘텐츠 제작레이아웃 테이블, 논리적 구성 이해의 용이성 | 지침 3

잘못된 사례

논리적인 구조로 작성된 문서를 스타일시트로 레이아웃 잡은 것이 아니라,레이아웃 테이블에 의지해 무의미적 나열로 시각적 장애를 지닌 사용자의 경우,콘텐츠를 접근/이동하는데 많은 어려움이 있다.

http://monod.co.kr/

견고성Robust








http://monod.co.kr/

http://monod.co.kr/


접근성을 고려한 웹 콘텐츠 제작이해의 용이성 | 지침 3

견고성Robust








개선 방안

1. 레이아웃 테이블이 아닌, CSS 레이아웃으로 사이트를 재구성한다.

2. 서버 스크립트를 사용하여 각각의 페이지 제목을 구성한다. (워드프레스의 경우 참고)

레이아웃 테이블, 논리적 구성


접근성을 고려한 웹 콘텐츠 제작데이터 테이블 제목, 논리적 구성 이해의 용이성 | 지침 3

잘못된 사례

테이블 작성 시, 테이블의 제목에 해당하는 캡션(caption) 요소가 제공되고 있지 않아시각 장애자의 경우, 테이블 내용에 대한 접근 파악이 어렵다.

http://is.gd/CcZSR2

견고성Robust








http://is.gd/CcZSR2

http://is.gd/CcZSR2


접근성을 고려한 웹 콘텐츠 제작데이터 표 제목, 논리적 구성 이해의 용이성 | 지침 3

견고성Robust








개선 방안

1. 테이블 캡션의 경우, 테이블의 제목을 입력한다.

2. 테이블 서머리의 경우, 테이블의 내용을 요약하여 제공한다. (선택적)


접근성을 고려한 웹 콘텐츠 제작데이터 테이블 구조화, 논리적 구성 이해의 용이성 | 지침 3

잘못된 사례

제목에 해당하는 테이블 요소임에도 불구하고 <th>가 아닌, <td>로 구조화 되어있어사용자에게 정확한 의미 전달이 어렵다.

http://is.gd/12dv6w

견고성Robust








http://is.gd/12dv6w

http://is.gd/12dv6w


접근성을 고려한 웹 콘텐츠 제작데이터 테이블 구조화, 논리적 구성 이해의 용이성 | 지침 3

견고성Robust








개선 방안

1. 테이블 제목의 경우, <th> 요소를 사용하여 구조화한다.


접근성을 고려한 웹 콘텐츠 제작폼 레이블, 논리적 구성 이해의 용이성 | 지침 3

잘못된 사례

레이블은 폼 콘트롤 요소와 연결됨으로 내용을 스크린리더기, 점자정보단말기가 읽을 수 있는데이를 적용하지 않아 사용자는 인식하는데 어려움을 겪는다.

http://is.gd/TWr6h8

견고성Robust








http://is.gd/TWr6h8

http://is.gd/TWr6h8



견고성Robust








개선 방안

1. 이미지 요소를 레이블로 감싼 후, for 속성을 통해 인풋 요소와 연결한다.


접근성을 고려한 웹 콘텐츠 제작폼 타이틀, 논리적 구성 이해의 용이성 | 지침 3

잘못된 사례

UI 구현상 공간이 협소하여 레이블을 적용하지 못할 경우, 타이틀을 제공하는 것으로도 접근성 향상을 꾀할 수 있다. 하지만 이 역시 구현되지 않으면 비 시각적 접근은 어려워진다.

http://is.gd/TWr6h8

견고성Robust








http://is.gd/TWr6h8

http://is.gd/TWr6h8



견고성Robust








개선 방안

1. 레이블을 적용하지 않은 폼 요소에 적절한 타이틀을 제공한다.


접근성을 고려한 웹 콘텐츠 제작폼 옵션 그룹, 논리적 구성 이해의 용이성 | 지침 3

잘못된 사례

셀렉트 박스의 구성 옵션이 많을 경우, 사용자가 이를 구분하기 쉽게옵션 그룹을 사용하여 이를 묶어줄 필요가 있다.

http://www.adobe.com/kr/downloads/

견고성Robust











접근성을 고려한 웹 콘텐츠 제작폼 옵션 그룹, 논리적 구성 이해의 용이성 | 지침 3

견고성Robust








개선 방안

1. 각 영문 이니셜 별로 옵션 그룹을 사용하고 레이블로 주기한다.



사용자가 기술에 관계 없이 웹 사이트에서 제공하는 콘텐츠를 이용할 수 있도록 제공하는 것을 의미합니다. 견고성은 문법 준수, 웹 애플리케이션 접근성의 두 가지 지침과 그에 해당하는 두 가지의 검사 항목으로 이루어져 있습니다.

견고성이란? KWCAG 2.0 가이드라인

지침 검사항목

콘텐츠는 올바른 문법의 마크업으로 작성되어야 한다.

열고, 닫음. 중첩 관계 및 속성 선언에 오류가 없어야 한다.

어플리케이션은 접근성을 제공해야 한다.







견고성Robust










견고성Robust


문법 오류, 유효성검사

유효성 검사도구

문법적으로 문서 구조화가 잘 이루어졌는지 수시로 확인하는 것이 좋다.W3C 마크업 검증 서비스를 통해 잘 지켜졌는지 테스트할 수 있다.

견고성 | 지침 4

http://validator.kldp.org/











견고성Robust


문법 오류, 유효성검사 견고성 | 지침 4


브라우저 플러그인을 설치한다면 매번 사이트에 접근하여 테스트할 필요가 없어 손쉽게 처리할 수 있다.

http://is.gd/v01Lpk

http://is.gd/v01Lpk

http://is.gd/v01Lpk









견고성Robust


문법 오류, 유효성검사 견고성 | 지침 4


드림위버의 Validate 서비스를 이용하면 작업 중인 도구에서도 손쉽게 마크업 검증을 진행할 수 있다.


접근성을 고려한 웹 콘텐츠 제작href, 자바스크립트 접근성

잘못된 사례

자바스크립트에 의존하여 href 속성 내부에 JS 함수 방법을 사용하면 스크립트 미지원 환경에서 접근성이 떨어진다.

http://www.kthcorp.com/html/002svc_mobile.jsp

견고성Robust













견고성Robust








개선 방안

1. href 내부에는 접근 가능한 주소를 기입한다.

2. 스크립트 코드 단에서 해당 href에 속한 주소에 접근 사용하는 코드를 작성한다.

href, 자바스크립트 접근성 견고성 | 지침 4


접근성을 고려한 웹 콘텐츠 제작charset, 자바스크립트 문자 인코딩 방식 명시

잘못된 사례

자바스크립트 내부에 사용된 문자 인코딩 방식과 연결된 HTML 문자 인코딩 방식을 동일하게 처리/명시하여야 문자가 깨지거나, 코드 오류가 발생하지 않는다.

http://www.kthcorp.com/

견고성Robust












접근성을 고려한 웹 콘텐츠 제작charset, 자바스크립트 문자 인코딩 방식 명시

견고성Robust








개선 방안

1. type, charset 속성에 적합한 정보를 명시한다.



접근성을 고려한 웹 콘텐츠 제작잘못된 대체 방법, 플래시 대체 콘텐츠

잘못된 사례

플러그인 기술이 제대로 보이지 않는 환경에서 이를 보기 위한 플러그인 설치를 요구하는 문구는 적절한 대체 내용이라고 보기 어렵다.

http://ejungle.co.kr/

견고성Robust












접근성을 고려한 웹 콘텐츠 제작잘못된 대체 방법, 플래시 대체 콘텐츠

견고성Robust









개선 방안

1. 완벽한 대체가 어렵다면 핵심기능 (링크, 내용 등)에 대한 대체 내용은 제공하여야 함.

- 2 접근성 검사도구 및 플러그인

- 2.1 N-WAX

- 2.2 K-WAH 3.0

Tools



http://is.gd/CfcnVt

http://a11y.nhncorp.com/guide/tool.html





http://www.wah.or.kr/Achive/kadowah.asp





http://is.gd/CfcnVt

http://is.gd/CfcnVt

http://is.gd/CfcnVt

Education

DIK accessible technique