장성민
Sungmin, Jang
jangkunblog@gmail.com
www.jangkunblog.com
웹접근성생활백서
한국형웹콘텐츠접근성지침2.0을통한
백서 白書
정부가각분야에대하여
현상을분석하고미래를전망하여
국민에게알리기위하여만든보고서
Web Accessibility
경사로인터넷의
퀴즈
Quiz
선물따위는없는
<h2>보건소 조직도</h2>
<p><img src=”org.gif” alt=”조직도” /></p>
<div class=”skip”>
</div>
도대체
왜이러는걸까요?
KWCAG 2.0
Korea Web Content Accessibility Guidelines
한국형웹콘텐츠접근성지침2.0
첫번째이유!
웹접근성생활백서
한국형웹콘텐츠접근성지침2.0을통한
대체텍스트
지침1.1
텍스트아닌콘텐츠에는대체텍스트를제공해야한다.
<body>
<div id=”accessibility”>
<p><a href=”#content”>Skip Navigation</a></p>
</div>
<div id=”header”>
<h1><img src=”jobko...
ㅁ어랴마ㅓㄹ<p><img src=”step.png” alt=”제작순서도”
longdesc=”step.html”></p>
CAPTCHA에대한대체텍스트제공
CAPTCHA에대한대체텍스트는그용도를알려주는것으로충분하다.
또한,반드시대체수단을제공해야한다.
1)두가지이상의감각,예를들어시각적 CAPTCHA와청각적 CAPTCHA를동시에제공
2)사용자에게...
멀티미디어대체수단
지침1.2
동영상,음성등멀티미디어콘텐츠를이해할수있도록
대체수단을제공해야한다.
자....막....없....냐.....?웅...왜?
[검사항목1.2.1]
자막제공
멀티미디어콘텐츠에는자막,원고또는수화를제공해야한다.
명료성
지침1.3
콘텐츠는명확하게전달되어야한다.
[검사항목1.3.1]
색에무관한콘텐츠인식
콘텐츠는색에관계없이인식될수있어야한다.
[검사항목1.3.2]
명확한지시사항제공
지시사항은모양,크기,위치,방향,색,소리등에관계없이인식될수있어야한다.
실화로배워볼까요?
사랑하는아들~
아빠일한거저장하고게임해~
거기오른쪽파란버튼눌러~웅~
Click
[검사항목1.3.3]
텍스트콘텐츠의명도대비
텍스트콘텐츠와배경간의명도대비는4.5대1이상이어야한다.
키보드접근성
지침2.1
콘텐츠는키보드로접근할수있어야한다.
[검사항목2.1.1]
키보드사용보장
모든기능은키보드만으로도사용할수있어야한다.
[검사항목2.1.1]
키보드사용보장
모든기능은키보드만으로도사용할수있어야한다.
키보드와마우스이벤트핸들러제공
키보드와마우스에함께적용되는이벤트핸들러(onclick)를이용
그렇지않으면두가지방식의이벤트핸들러를함께제공
[검사항목2.1.1]
키보드사용보장
모든기능은키보드만으로도사용할수있어야한다.
플래시콘텐츠접근(wmode)
transparent / opaque
MSAA를사용할수없어
화면낭독기로인식이불가
window
링크없이단순디자인
용...
[검사항목2.1.2]
초점이동
키보드에의한초점은논리적으로이동해야하며시각적으로구별할수있어야한다.
충분한시간제공
지침2.2
콘텐츠를읽고사용하는데충분한시간을제공해야한다.
[검사항목2.2.1]
응답시간조절
시간제한이있는콘텐츠는응답시간을조절할수있어야한다.
광과민성발작예방
지침2.3
광과민성발작을일으킬수있는콘텐츠를제공하지않아야한다.
[검사항목2.3.1]
깜빡임과번쩍임사용제한
초당3~50회주기로깜빡이거나번쩍이는콘텐츠를 제공하지않아야한다.
포켓몬쇼크
(폴리곤쇼크)
제38화'전뇌전사폴리곤'
[검사항목2.3.1]
깜빡임과번쩍임사용제한
초당3~50회주기로깜빡이거나번쩍이는콘텐츠를 제공하지않아야한다.
경고페이지제공
쉬운내비게이션
지침2.4
콘텐츠는쉽게내비게이션할수있어야한다.
[검사항목2.4.1]
반복영역건너뛰기
콘텐츠의반복되는영역은건너뛸수있어야한다.
<body>  
<div id="skip-navigation">  
    <p><a href="#content">메뉴건너뛰기</a></p> ...
[검사항목2.4.2]
제목제공
페이지,프레임,콘텐츠블록에는적절한제목을제공해야한다.
어느탭을누르면
약도페이지일까?두근두근
[검사항목2.4.2]
제목제공
페이지,프레임,콘텐츠블록에는적절한제목을제공해야한다.
CSSNiteinSeoul행사위치를알고싶으시면여기를클릭하세요.
[검사항목2.4.3]
적절한링크텍스트
링크텍스트는용도나목적을이해할수있도록제공해야한다.
상상
가독성
지침3.1
콘텐츠는읽고이해하기쉬워야한다.
[검사항목3.1.1]
기본언어표시
주로사용하는언어를명시해야한다.
<html lang="en">
<html xml:lang="ko”
lang=”ko”>
콘텐츠의논리성
지침3.3
콘텐츠는논리적으로구성해야한다.
[검사항목3.3.1]
콘텐츠의선형화
콘텐츠는논리적인순서로제공해야한다.
1
2
3
지침은더있지만!
여기까지~
두번째이유!
장애인은어떤방법으로웹을이용하냐고?
이렇게이렇게이렇게사용할거야!
아마..아마..아마..아마..
상상
장애환경을이해하면
웹접근성이쉽다!
지체장애
뇌병변장애
시각장애
청각장애
언어장애
지적장애
자폐성장애
정신장애
신장장애
심장장애
호흡기장애
간장애 안면장애
장루.요루장애
간질장애
시각장애
전맹 약시 색각장애
Blindness LowVision Color Blindness
<img----longdesc=”org.html”/>
1.1.1(적절한대체텍스트제공)
텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다.
바로가기가스킵네비게이션?
2.4.1(반복영역건너뛰기)
콘텐츠의반복되는영역은건너뛸수있어야한다.
메뉴건너뛰기만필요!
청각장애
농아 난청
Deafness Hard of hearing
KWCAG 2.0 한국형웹콘텐츠접근성지침2.0
요약된원고
1.2.1(자막제공)
멀티미디어콘텐츠에는자막,원고또는수화를제공해야한다.
지체장애
운동장애(상지,하지장애)
Motor impairments
논리적인순서로탭이이동하지않는서식
2.1.2(초점이동)
키보드에의한초점은논리적으로이동해야하며
시각적으로구별할수있어야한다.
1
2
3
인지,신경장애
지적장애 발작장애
Intellectual Disabilities Seizure Disorders
지나치게깜빡이는콘텐츠
2.3.1(깜빡임과번쩍임사용제한)
초당3~50회주기로깜빡이거나번쩍이는콘텐츠를제공하지않아야한다.
그리고!
개발자여러분에게
하고싶은말이있습니다.
HTML5
CSS3
Mobile
JQuery
...
고맙습니다
웹 접근성 생활백서__CSS Nite in Seoul vol.3
웹 접근성 생활백서__CSS Nite in Seoul vol.3
웹 접근성 생활백서__CSS Nite in Seoul vol.3
웹 접근성 생활백서__CSS Nite in Seoul vol.3
웹 접근성 생활백서__CSS Nite in Seoul vol.3
웹 접근성 생활백서__CSS Nite in Seoul vol.3
웹 접근성 생활백서__CSS Nite in Seoul vol.3
Upcoming SlideShare
Loading in...5
×

웹 접근성 생활백서__CSS Nite in Seoul vol.3

4,175

Published on

2012년 3월 24일 서울에서 열린
CSS Nite in Seoul vol3에서 발표한 자료.

웹 접근성 생활백서라고 이름은 지었지만, 뭐 그냥 지침 설명임.

KWCAG 2.0을 중심으로 사례로 설명...

기존 자료에서 가카의 사진을 뺐더니 연결이 애매한 부분도 있네요~ ㅎㅎㅎㅎㅎㅎㅎㅎ


http://www.jangkunblog.com/wp/css-nite-in-seoul-vol-3/

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,175
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "웹 접근성 생활백서__CSS Nite in Seoul vol.3"

  1. 1. 장성민 Sungmin, Jang jangkunblog@gmail.com www.jangkunblog.com 웹접근성생활백서 한국형웹콘텐츠접근성지침2.0을통한
  2. 2. 백서 白書 정부가각분야에대하여 현상을분석하고미래를전망하여 국민에게알리기위하여만든보고서
  3. 3. Web Accessibility
  4. 4. 경사로인터넷의
  5. 5. 퀴즈 Quiz 선물따위는없는
  6. 6. <h2>보건소 조직도</h2> <p><img src=”org.gif” alt=”조직도” /></p> <div class=”skip”> </div>
  7. 7. 도대체 왜이러는걸까요?
  8. 8. KWCAG 2.0 Korea Web Content Accessibility Guidelines 한국형웹콘텐츠접근성지침2.0 첫번째이유!
  9. 9. 웹접근성생활백서 한국형웹콘텐츠접근성지침2.0을통한
  10. 10. 대체텍스트 지침1.1 텍스트아닌콘텐츠에는대체텍스트를제공해야한다.
  11. 11. <body> <div id=”accessibility”> <p><a href=”#content”>Skip Navigation</a></p> </div> <div id=”header”> <h1><img src=”jobkorea.gif” alt=”잡코리아” /></h1> <ul class=”gnb”> <li> -------- <body> <div id=”accessibility”> <p><a href=”#content”>Skip Navigation</a></p> </div> <div id=”header”>
  12. 12. ㅁ어랴마ㅓㄹ<p><img src=”step.png” alt=”제작순서도” longdesc=”step.html”></p>
  13. 13. CAPTCHA에대한대체텍스트제공 CAPTCHA에대한대체텍스트는그용도를알려주는것으로충분하다. 또한,반드시대체수단을제공해야한다. 1)두가지이상의감각,예를들어시각적 CAPTCHA와청각적 CAPTCHA를동시에제공 2)사용자에게문제를텍스트콘텐츠로제시하고문제에대한답을입력하도록하는문제풀이방식 3)상담원을이용하여 CAPTCHA가제공하는역할을대신할수있는서비스제공
  14. 14. 멀티미디어대체수단 지침1.2 동영상,음성등멀티미디어콘텐츠를이해할수있도록 대체수단을제공해야한다.
  15. 15. 자....막....없....냐.....?웅...왜?
  16. 16. [검사항목1.2.1] 자막제공 멀티미디어콘텐츠에는자막,원고또는수화를제공해야한다.
  17. 17. 명료성 지침1.3 콘텐츠는명확하게전달되어야한다.
  18. 18. [검사항목1.3.1] 색에무관한콘텐츠인식 콘텐츠는색에관계없이인식될수있어야한다.
  19. 19. [검사항목1.3.2] 명확한지시사항제공 지시사항은모양,크기,위치,방향,색,소리등에관계없이인식될수있어야한다. 실화로배워볼까요?
  20. 20. 사랑하는아들~ 아빠일한거저장하고게임해~ 거기오른쪽파란버튼눌러~웅~ Click
  21. 21. [검사항목1.3.3] 텍스트콘텐츠의명도대비 텍스트콘텐츠와배경간의명도대비는4.5대1이상이어야한다.
  22. 22. 키보드접근성 지침2.1 콘텐츠는키보드로접근할수있어야한다.
  23. 23. [검사항목2.1.1] 키보드사용보장 모든기능은키보드만으로도사용할수있어야한다.
  24. 24. [검사항목2.1.1] 키보드사용보장 모든기능은키보드만으로도사용할수있어야한다. 키보드와마우스이벤트핸들러제공 키보드와마우스에함께적용되는이벤트핸들러(onclick)를이용 그렇지않으면두가지방식의이벤트핸들러를함께제공
  25. 25. [검사항목2.1.1] 키보드사용보장 모든기능은키보드만으로도사용할수있어야한다. 플래시콘텐츠접근(wmode) transparent / opaque MSAA를사용할수없어 화면낭독기로인식이불가 window 링크없이단순디자인 용도일경우포커스갇힘 링크등키보드포커스가필요하다!링크없는비쥬얼용도이다! 단,의미가있다면대체콘텐츠제공!
  26. 26. [검사항목2.1.2] 초점이동 키보드에의한초점은논리적으로이동해야하며시각적으로구별할수있어야한다.
  27. 27. 충분한시간제공 지침2.2 콘텐츠를읽고사용하는데충분한시간을제공해야한다.
  28. 28. [검사항목2.2.1] 응답시간조절 시간제한이있는콘텐츠는응답시간을조절할수있어야한다.
  29. 29. 광과민성발작예방 지침2.3 광과민성발작을일으킬수있는콘텐츠를제공하지않아야한다.
  30. 30. [검사항목2.3.1] 깜빡임과번쩍임사용제한 초당3~50회주기로깜빡이거나번쩍이는콘텐츠를 제공하지않아야한다. 포켓몬쇼크 (폴리곤쇼크) 제38화'전뇌전사폴리곤'
  31. 31. [검사항목2.3.1] 깜빡임과번쩍임사용제한 초당3~50회주기로깜빡이거나번쩍이는콘텐츠를 제공하지않아야한다. 경고페이지제공
  32. 32. 쉬운내비게이션 지침2.4 콘텐츠는쉽게내비게이션할수있어야한다.
  33. 33. [검사항목2.4.1] 반복영역건너뛰기 콘텐츠의반복되는영역은건너뛸수있어야한다. <body>   <div id="skip-navigation">       <p><a href="#content">메뉴건너뛰기</a></p>   </div>
  34. 34. [검사항목2.4.2] 제목제공 페이지,프레임,콘텐츠블록에는적절한제목을제공해야한다. 어느탭을누르면 약도페이지일까?두근두근
  35. 35. [검사항목2.4.2] 제목제공 페이지,프레임,콘텐츠블록에는적절한제목을제공해야한다.
  36. 36. CSSNiteinSeoul행사위치를알고싶으시면여기를클릭하세요. [검사항목2.4.3] 적절한링크텍스트 링크텍스트는용도나목적을이해할수있도록제공해야한다. 상상
  37. 37. 가독성 지침3.1 콘텐츠는읽고이해하기쉬워야한다.
  38. 38. [검사항목3.1.1] 기본언어표시 주로사용하는언어를명시해야한다. <html lang="en"> <html xml:lang="ko” lang=”ko”>
  39. 39. 콘텐츠의논리성 지침3.3 콘텐츠는논리적으로구성해야한다.
  40. 40. [검사항목3.3.1] 콘텐츠의선형화 콘텐츠는논리적인순서로제공해야한다. 1 2 3
  41. 41. 지침은더있지만! 여기까지~
  42. 42. 두번째이유! 장애인은어떤방법으로웹을이용하냐고? 이렇게이렇게이렇게사용할거야! 아마..아마..아마..아마.. 상상
  43. 43. 장애환경을이해하면 웹접근성이쉽다!
  44. 44. 지체장애 뇌병변장애 시각장애 청각장애 언어장애 지적장애 자폐성장애 정신장애 신장장애 심장장애 호흡기장애 간장애 안면장애 장루.요루장애 간질장애
  45. 45. 시각장애 전맹 약시 색각장애 Blindness LowVision Color Blindness
  46. 46. <img----longdesc=”org.html”/> 1.1.1(적절한대체텍스트제공) 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다.
  47. 47. 바로가기가스킵네비게이션? 2.4.1(반복영역건너뛰기) 콘텐츠의반복되는영역은건너뛸수있어야한다. 메뉴건너뛰기만필요!
  48. 48. 청각장애 농아 난청 Deafness Hard of hearing
  49. 49. KWCAG 2.0 한국형웹콘텐츠접근성지침2.0 요약된원고 1.2.1(자막제공) 멀티미디어콘텐츠에는자막,원고또는수화를제공해야한다.
  50. 50. 지체장애 운동장애(상지,하지장애) Motor impairments
  51. 51. 논리적인순서로탭이이동하지않는서식 2.1.2(초점이동) 키보드에의한초점은논리적으로이동해야하며 시각적으로구별할수있어야한다. 1 2 3
  52. 52. 인지,신경장애 지적장애 발작장애 Intellectual Disabilities Seizure Disorders
  53. 53. 지나치게깜빡이는콘텐츠 2.3.1(깜빡임과번쩍임사용제한) 초당3~50회주기로깜빡이거나번쩍이는콘텐츠를제공하지않아야한다.
  54. 54. 그리고! 개발자여러분에게 하고싶은말이있습니다.
  55. 55. HTML5 CSS3 Mobile JQuery ...
  56. 56. 고맙습니다

×