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

장성민
Sungmin, Jang
jangkunblog@gmail.com
www.jangkunblog.com
웹접근성생활백서
한국형웹콘텐츠접근성지침2.0을통한

백서 白書
정부가각분야에대하여
현상을분석하고미래를전망하여
국민에게알리기위하여만든보고서

퀴즈
Quiz
선물따위는없는

도대체
왜이러는걸까요?

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=”jobkorea.gif” alt=”잡코리아” /></h1>
<ul class=”gnb”>
<li> --------
<body>
<div id=”accessibility”>
<p><a href=”#content”>Skip Navigation</a></p>
</div>
<div id=”header”>

ㅁ어랴마ㅓㄹ<p><img src=”step.png” alt=”제작순서도”
longdesc=”step.html”></p>

CAPTCHA에대한대체텍스트제공
CAPTCHA에대한대체텍스트는그용도를알려주는것으로충분하다.
또한,반드시대체수단을제공해야한다.
1)두가지이상의감각,예를들어시각적 CAPTCHA와청각적 CAPTCHA를동시에제공
2)사용자에게문제를텍스트콘텐츠로제시하고문제에대한답을입력하도록하는문제풀이방식
3)상담원을이용하여 CAPTCHA가제공하는역할을대신할수있는서비스제공

멀티미디어대체수단
지침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>
</div>

[검사항목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회주기로깜빡이거나번쩍이는콘텐츠를제공하지않아야한다.

그리고!
개발자여러분에게
하고싶은말이있습니다.

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

Recommended

Recommended

More Related Content

Featured

Featured (20)

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