[C2]deview2012 웹접근성

54
웹접근성 어떻게 해야 하나요? Wednesday, September 19, 12

Transcript of [C2]deview2012 웹접근성

Page 1: [C2]deview2012 웹접근성

웹접근성����������� ������������������  어떻게����������� ������������������  해야����������� ������������������  하나요?

Wednesday, September 19, 12

Page 2: [C2]deview2012 웹접근성

웹접근성을����������� ������������������  해야만(?)����������� ������������������  하는����������� ������������������  분들을����������� ������������������  위한

NHN����������� ������������������  웹접근성����������� ������������������  Project����������� ������������������  경험담

시행착오

Wednesday, September 19, 12

Page 3: [C2]deview2012 웹접근성

1.웹접근성이����������� ������������������  뭔가요?

2.꼭����������� ������������������  해야����������� ������������������  하나요?

3.사용성이����������� ������������������  떨어지진����������� ������������������  않을까요?

4.얼마나����������� ������������������  적용해야����������� ������������������  하나요?

5.뭘����������� ������������������  해야����������� ������������������  하나요?

6.잘����������� ������������������  모르겠어요..

7.하긴����������� ������������������  했는데����������� ������������������  맞게����������� ������������������  했나요?

7Wednesday, September 19, 12

Page 4: [C2]deview2012 웹접근성

웹접근성이����������� ������������������  뭔가요?

Wednesday, September 19, 12

Page 5: [C2]deview2012 웹접근성

1.웹접근성이����������� ������������������  뭔가요?

웹����������� ������������������  접근성����������� ������������������  및����������� ������������������  정보통신����������� ������������������  접근성에����������� ������������������  대한����������� ������������������  주요����������� ������������������  정의

장애인·・노인����������� ������������������  등의����������� ������������������  정보통신����������� ������������������  접근성����������� ������������������  향상을����������� ������������������  위한����������� ������������������  권장지침

정보통신����������� ������������������  제품과����������� ������������������  서비스를����������� ������������������  활용하고자����������� ������������������  하는����������� ������������������  사람에게����������� ������������������  이의����������� ������������������  활용����������� ������������������  가능성이����������� ������������������  제공되는����������� ������������������  것

웹����������� ������������������  접근성����������� ������������������  이니셔티브����������� ������������������  (WAI:����������� ������������������  Web����������� ������������������  Accessibility����������� ������������������  Initiative)

장애를����������� ������������������  가진����������� ������������������  사람들도����������� ������������������  웹을����������� ������������������  이용할����������� ������������������  수����������� ������������������  있도록����������� ������������������  보장하는����������� ������������������  것으로,����������� ������������������  장애를����������� ������������������  가진����������� ������������������  사람들이����������� ������������������  웹����������� ������������������  콘텐츠를����������� ������������������  인지하고

(Perceivable),����������� ������������������  운영하고(Operable),����������� ������������������  이해하고(Understandable),����������� ������������������  기술에����������� ������������������  상관없이����������� ������������������  이용할����������� ������������������  수����������� ������������������  있도록����������� ������������������  견고한

(Robust)하게����������� ������������������  웹콘텐츠를����������� ������������������  만드는����������� ������������������  것

Wikipedia����������� ������������������  

표준����������� ������������������  브라우저����������� ������������������  뿐만����������� ������������������  아니라����������� ������������������  다양한����������� ������������������  사용자����������� ������������������  에이전트(User����������� ������������������  Agent)를����������� ������������������  사용하는����������� ������������������  사람들이����������� ������������������  웹����������� ������������������  페이지에����������� ������������������  접근하기����������� ������������������  

쉽게����������� ������������������  만드는����������� ������������������  것으로,����������� ������������������  이를����������� ������������������  통해����������� ������������������  장애인들도����������� ������������������  웹을����������� ������������������  사용할����������� ������������������  수����������� ������������������  있도록����������� ������������������  보장하는����������� ������������������  것

한국정보화진흥원

어떠한����������� ������������������  사용자(장애인,����������� ������������������  노인����������� ������������������  등),����������� ������������������  어떠한����������� ������������������  기술환경에서도����������� ������������������  사용자가����������� ������������������  전문적인����������� ������������������  능력����������� ������������������  없이����������� ������������������  웹����������� ������������������  사이트에서����������� ������������������  제공하

는����������� ������������������  모든����������� ������������������  정보에����������� ������������������  접근할����������� ������������������  수����������� ������������������  있도록����������� ������������������  보장하는����������� ������������������  것

월드����������� ������������������  와이드����������� ������������������  웹����������� ������������������  (World����������� ������������������  Wide����������� ������������������  Web)을����������� ������������������  창시한����������� ������������������  팀����������� ������������������  버너스����������� ������������������  리(Tim����������� ������������������  Berners-Lee)는����������� ������������������  웹이란

'장애에����������� ������������������  구애����������� ������������������  없이����������� ������������������  모든����������� ������������������  사람들이����������� ������������������  손쉽게����������� ������������������  정보를����������� ������������������  공유할����������� ������������������  수����������� ������������������  있는����������� ������������������  공간'이라고����������� ������������������  정의

웹����������� ������������������  접근성����������� ������������������  연구소(wah.or.kr)����������� ������������������  참고

Wednesday, September 19, 12

Page 6: [C2]deview2012 웹접근성

1.웹접근성이����������� ������������������  뭔가요?

접근성이란����������� ������������������  장애인뿐만����������� ������������������  아니라����������� ������������������  모든����������� ������������������  사람이����������� ������������������  정보통신����������� ������������������  기기나����������� ������������������  서비스를����������� ������������������  

손쉽게����������� ������������������  활용할����������� ������������������  수����������� ������������������  있도록����������� ������������������  만드는����������� ������������������  것을����������� ������������������  말하는����������� ������������������  것이다.����������� ������������������  

예를����������� ������������������  들자면����������� ������������������  장애인과����������� ������������������  노인들을����������� ������������������  위해����������� ������������������  개발된����������� ������������������  리모콘,����������� ������������������  전화,����������� ������������������  자동문����������� ������������������  등의����������� ������������������  제품들이����������� ������������������  

널리����������� ������������������  보급되면서����������� ������������������  궁극적으로는����������� ������������������  모든����������� ������������������  사람들이����������� ������������������  편리하게����������� ������������������  활용하게����������� ������������������  된����������� ������������������  것을����������� ������������������  들����������� ������������������  수����������� ������������������  있다.����������� ������������������  

이러한����������� ������������������  접근성����������� ������������������  개념은����������� ������������������  정보통신����������� ������������������  분야에서����������� ������������������  다양한����������� ������������������  제품����������� ������������������  및����������� ������������������  서비스����������� ������������������  간의����������� ������������������  호환성����������� ������������������  문제,����������� ������������������  

이동����������� ������������������  정보통신����������� ������������������  기기����������� ������������������  등으로����������� ������������������  그����������� ������������������  필요성����������� ������������������  및����������� ������������������  중요성이����������� ������������������  더욱����������� ������������������  증대되고����������� ������������������  있다.

웹����������� ������������������  접근성����������� ������������������  연구소(wah.or.kr)����������� ������������������  참고

Wednesday, September 19, 12

Page 7: [C2]deview2012 웹접근성

1.웹접근성이����������� ������������������  뭔가요?

접근성이란����������� ������������������  장애인뿐만����������� ������������������  아니라����������� ������������������  모든����������� ������������������  사람이����������� ������������������  정보통신����������� ������������������  기기나����������� ������������������  서비스를����������� ������������������  

손쉽게����������� ������������������  활용할����������� ������������������  수����������� ������������������  있도록����������� ������������������  만드는����������� ������������������  것을����������� ������������������  말하는����������� ������������������  것이다.����������� ������������������  

예를����������� ������������������  들자면����������� ������������������  장애인과����������� ������������������  노인들을����������� ������������������  위해����������� ������������������  개발된����������� ������������������  리모콘,����������� ������������������  전화,����������� ������������������  자동문����������� ������������������  등의����������� ������������������  제품들이����������� ������������������  

널리����������� ������������������  보급되면서����������� ������������������  궁극적으로는����������� ������������������  모든����������� ������������������  사람들이����������� ������������������  편리하게����������� ������������������  활용하게����������� ������������������  된����������� ������������������  것을����������� ������������������  들����������� ������������������  수����������� ������������������  있다.����������� ������������������  

이러한����������� ������������������  접근성����������� ������������������  개념은����������� ������������������  정보통신����������� ������������������  분야에서����������� ������������������  다양한����������� ������������������  제품����������� ������������������  및����������� ������������������  서비스����������� ������������������  간의����������� ������������������  호환성����������� ������������������  문제,����������� ������������������  

이동����������� ������������������  정보통신����������� ������������������  기기����������� ������������������  등으로����������� ������������������  그����������� ������������������  필요성����������� ������������������  및����������� ������������������  중요성이����������� ������������������  더욱����������� ������������������  증대되고����������� ������������������  있다.

웹����������� ������������������  접근성����������� ������������������  연구소(wah.or.kr)����������� ������������������  참고

Wednesday, September 19, 12

Page 8: [C2]deview2012 웹접근성

꼭����������� ������������������  해야����������� ������������������  하나요?

사전적����������� ������������������  의미는����������� ������������������  알겠어요.����������� ������������������  하지만

Wednesday, September 19, 12

Page 9: [C2]deview2012 웹접근성

2.꼭����������� ������������������  해야����������� ������������������  하나요?

Wednesday, September 19, 12

Page 10: [C2]deview2012 웹접근성

2.꼭����������� ������������������  해야����������� ������������������  하나요?

도의적����������� ������������������  책임(Moral Responsibility)

규제대응(Compliance)

장차법

법적분쟁����������� ������������������  최소화

장애����������� ������������������  접근성����������� ������������������  향상

사용성����������� ������������������  증가

못해도����������� ������������������  본전 잘해도����������� ������������������  본전

Wednesday, September 19, 12

Page 11: [C2]deview2012 웹접근성

2.꼭����������� ������������������  해야����������� ������������������  하나요?

無자발적����������� ������������������  참여

관여,����������� ������������������  관찰,����������� ������������������  관심

Awareness느낄수����������� ������������������  있도록내재화

온오프라인����������� ������������������  교육

Wednesday, September 19, 12

Page 12: [C2]deview2012 웹접근성

사용성이����������� ������������������  떨어지진����������� ������������������  않을까요?

Wednesday, September 19, 12

Page 13: [C2]deview2012 웹접근성

3.사용성이����������� ������������������  떨어지진����������� ������������������  않을까요?

대부분은����������� ������������������  오히려����������� ������������������  좋아����������� ������������������  집니다.

Wednesday, September 19, 12

Page 14: [C2]deview2012 웹접근성

3.사용성이����������� ������������������  떨어지진����������� ������������������  않을까요?

Wednesday, September 19, 12

Page 15: [C2]deview2012 웹접근성

3.사용성이����������� ������������������  떨어지진����������� ������������������  않을까요?

Wednesday, September 19, 12

Page 16: [C2]deview2012 웹접근성

3.사용성이����������� ������������������  떨어지진����������� ������������������  않을까요?

Wednesday, September 19, 12

Page 17: [C2]deview2012 웹접근성

고민되는����������� ������������������  부분도����������� ������������������  있습니다.

3.사용성이����������� ������������������  떨어지진����������� ������������������  않을까요?

Wednesday, September 19, 12

Page 18: [C2]deview2012 웹접근성

웹툰����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  베트남어사전

지식백과

N ?

N

?

일반����������� ������������������  사용성����������� ������������������  VS����������� ������������������  장애����������� ������������������  접근성

지식백과 N

<span class=”hidden”>새글</span> 지식백과 <img alt=””>

<span class=”hidden”>새글</span> 지식백과

<div class=padding;>

</div>N

background

3.사용성이����������� ������������������  떨어지진����������� ������������������  않을까요?

[새글]

Wednesday, September 19, 12

Page 19: [C2]deview2012 웹접근성

얼마나����������� ������������������  적용해야����������� ������������������  할까요?

Wednesday, September 19, 12

Page 20: [C2]deview2012 웹접근성

Q.����������� ������������������  어느����������� ������������������  서비스의����������� ������������������  어떤����������� ������������������  페이지를����������� ������������������  어느수준으로����������� ������������������  적용해야����������� ������������������  되나요?

4.얼마나����������� ������������������  적용해야����������� ������������������  하나요?

A.����������� ������������������  모든����������� ������������������  서비스의����������� ������������������  모든����������� ������������������  페이지를����������� ������������������  전부다����������� ������������������  적용해야����������� ������������������  합니다����������� ������������������  

우선순위에����������� ������������������  의한����������� ������������������  점진적����������� ������������������  적용

Wednesday, September 19, 12

Page 21: [C2]deview2012 웹접근성

4.얼마나����������� ������������������  적용해야����������� ������������������  하나요?

접근성에����������� ������������������  대한����������� ������������������  효율적����������� ������������������  접근����������� ������������������  또는����������� ������������������  전략

시각����������� ������������������  장애

http://html.nhncorp.com/blog/42598

Wednesday, September 19, 12

Page 22: [C2]deview2012 웹접근성

뭘����������� ������������������  해야����������� ������������������  하나요?

Wednesday, September 19, 12

Page 23: [C2]deview2012 웹접근성

5.뭘����������� ������������������  해야����������� ������������������  하나요?

두����������� ������������������  가지는����������� ������������������  꼭����������� ������������������  기억����������� ������������������  해주세요!

Linearization

AlternativeText대체����������� ������������������  텍스트

선형화

Wednesday, September 19, 12

Page 24: [C2]deview2012 웹접근성

5.뭘����������� ������������������  해야����������� ������������������  하나요?

LinearizationMake sense when linearized

x

y

y

Disabled Style

Wednesday, September 19, 12

Page 25: [C2]deview2012 웹접근성

5.뭘����������� ������������������  해야����������� ������������������  하나요?

LinearizationMake sense when linearized

Wednesday, September 19, 12

Page 26: [C2]deview2012 웹접근성

5.뭘����������� ������������������  해야����������� ������������������  하나요?

Alternative TextThe use of alternative-text is fundamental to accessibility

1.정보성����������� ������������������  이미지는����������� ������������������  대체����������� ������������������  컨텐츠(텍스트)를����������� ������������������  제공

2.동적����������� ������������������  페이지의����������� ������������������  경우����������� ������������������  (운영����������� ������������������  툴로����������� ������������������  업로드)����������� ������������������  오브젝트들을����������� ������������������  

업로드하면서����������� ������������������  대체����������� ������������������  텍스트가����������� ������������������  선언될����������� ������������������  수����������� ������������������  있도록����������� ������������������  정의

3. 유의사항)����������� ������������������  대체����������� ������������������  텍스트가����������� ������������������  영문일����������� ������������������  경우,

정확한����������� ������������������  의미전달을����������� ������������������  위해����������� ������������������  국문으로����������� ������������������  입력

1. HYUNDAI����������� ������������������  (현다이)����������� ������������������  alt=”현대”

2. UX����������� ������������������  (억스)����������� ������������������  alt=”유엑스”����������� ������������������  or����������� ������������������  “U����������� ������������������  .����������� ������������������  X”

4. 적용범위

1. 서비스����������� ������������������  공급자가����������� ������������������  제공하는����������� ������������������  모든����������� ������������������  정보성����������� ������������������  이미지

2. 사용자����������� ������������������  생성����������� ������������������  컨텐츠(UCC)는����������� ������������������  우선����������� ������������������  제외1. 단,����������� ������������������  대체����������� ������������������  텍스트를����������� ������������������  입력할����������� ������������������  수����������� ������������������  있는����������� ������������������  필드를����������� ������������������  제공2. 다양한����������� ������������������  방법으로����������� ������������������  대체����������� ������������������  텍스트����������� ������������������  입력����������� ������������������  유도

Wednesday, September 19, 12

Page 27: [C2]deview2012 웹접근성

5.뭘����������� ������������������  해야����������� ������������������  하나요?

NWCAG1.0

http://a11y.nhncorp.com

NWCAG의����������� ������������������  목적

NHN����������� ������������������  Web����������� ������������������  Content����������� ������������������  Accessibility����������� ������������������  Guidelines(이하����������� ������������������  NWCAG)����������� ������������������  1.0은����������� ������������������  NHN

에서����������� ������������������  제공하는����������� ������������������  웹����������� ������������������  콘텐츠의����������� ������������������  접근성을����������� ������������������  보장하기����������� ������������������  위한����������� ������������������  목적으로����������� ������������������  만들어졌다.

NWCAG는����������� ������������������  한국정보화진흥원에서����������� ������������������  제정한����������� ������������������  KWCAG����������� ������������������  2.0의����������� ������������������  모든����������� ������������������  내용을����������� ������������������  포

함하고����������� ������������������  있어,����������� ������������������  NWCAG를����������� ������������������  모두����������� ������������������  준수했을����������� ������������������  경우����������� ������������������  한국정보화진흥원의����������� ������������������  웹����������� ������������������  접근

성����������� ������������������  품질����������� ������������������  인증을����������� ������������������  받을����������� ������������������  수����������� ������������������  있다.����������� ������������������  또한����������� ������������������  KWCAG에는����������� ������������������  포함되지����������� ������������������  않았지만����������� ������������������  웹����������� ������������������  접근

성����������� ������������������  개선에����������� ������������������  도움이����������� ������������������  되는����������� ������������������  지침을����������� ������������������  추가하였다.

NWCAG의����������� ������������������  구조

핵심����������� ������������������  지침(Key����������� ������������������  Points,����������� ������������������  8개)

웹����������� ������������������  접근성����������� ������������������  준수를����������� ������������������  위해����������� ������������������  꼭����������� ������������������  알아야����������� ������������������  할����������� ������������������  핵심����������� ������������������  지침����������� ������������������  8가지를����������� ������������������  의미한다.����������� ������������������  핵

심����������� ������������������  지침은����������� ������������������  '1'과����������� ������������������  같이����������� ������������������  1단계����������� ������������������  숫자로����������� ������������������  표현하였다.

지침(Guidelines,����������� ������������������  27개)

핵심����������� ������������������  지침을����������� ������������������  만족할����������� ������������������  수����������� ������������������  있는����������� ������������������  구체적인����������� ������������������  항목이다.����������� ������������������  지침에����������� ������������������  대응되는����������� ������������������  장애����������� ������������������  

환경과����������� ������������������  담당자가����������� ������������������  명시되어����������� ������������������  있으며,����������� ������������������  상세한����������� ������������������  설명과����������� ������������������  기대효과를����������� ������������������  함께����������� ������������������  제

시하고����������� ������������������  있다.����������� ������������������  지침은����������� ������������������  '1.1'과����������� ������������������  같이����������� ������������������  2단계����������� ������������������  숫자로����������� ������������������  표현하였다.

Wednesday, September 19, 12

Page 28: [C2]deview2012 웹접근성

5.뭘����������� ������������������  해야����������� ������������������  하나요?

체크리스트

http://a11y.nhncorp.com

직독직해(?)

전체����������� ������������������  25개

직군별����������� ������������������  필수����������� ������������������  가이드����������� ������������������  구분

UX����������� ������������������  9개����������� ������������������  -����������� ������������������  내재화����������� ������������������  필요

마크업개발����������� ������������������  11개

체크리스트 적용순서

1.����������� ������������������  장애상황����������� ������������������  이해

2.����������� ������������������  해당사례����������� ������������������  확인

3.����������� ������������������  서비스별����������� ������������������  이슈����������� ������������������  점검

4.����������� ������������������  내재화

Wednesday, September 19, 12

Page 29: [C2]deview2012 웹접근성

잘����������� ������������������  모르겠어요..

Wednesday, September 19, 12

Page 30: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

뭘����������� ������������������  해야����������� ������������������  하는����������� ������������������  지는����������� ������������������  알겠는데,����������� ������������������  

어떻게����������� ������������������  구현해야����������� ������������������  할지����������� ������������������  모르겠어요..

Wednesday, September 19, 12

Page 31: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

Ajax Application

Fallback

Wednesday, September 19, 12

Page 32: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

Ajax Application Fallback

Wednesday, September 19, 12

Page 33: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

Ajax Application Fallback TEXT

Wednesday, September 19, 12

Page 34: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

.flv Player

Keyboard

wmode

Wednesday, September 19, 12

Page 35: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

.flv Player

Flash&Video&

기존&구조&

키보드&접근이&가능한&HTML&기반&대체&컨트롤러&별도&제공&

Inner&Component&

Flash&Video&

Inner&Component&

Accessible&Outer&Component&

HTML5로&동영상&및&컨트롤러를&모두&구현&

������� �����

Inner&Component&

��������

������

��

Wednesday, September 19, 12

Page 36: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

.flv Player

TAB$ TAB$ TAB$ TAB$

�$�$

�$

�$

�$ �$�$

�$

Acorn Media Player http://ghinda.net/acornmediaplayer/

Wednesday, September 19, 12

Page 37: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

.flv Player

SAMSUNG Website Video

키보드$접근시$숨겨진$메뉴$노출함$(html$$+$javascript$컴포넌트)$

TAB$ TAB$ TAB$ TAB$ TAB$ TAB$

http://www.samsung.com/sec/consumer/tv-video/tv

Wednesday, September 19, 12

Page 38: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

동영상����������� ������������������  자막(원고)

동영상을����������� ������������������  운영툴로����������� ������������������  업로드����������� ������������������  할����������� ������������������  경우����������� ������������������  동영상에����������� ������������������  대한����������� ������������������  대본이나����������� ������������������  원고를����������� ������������������  업로드����������� ������������������  할����������� ������������������  수����������� ������������������  있도록����������� ������������������  설계해야����������� ������������������  하며

프런트����������� ������������������  화면����������� ������������������  설계����������� ������������������  시에도����������� ������������������  영상을����������� ������������������  보는����������� ������������������  중간에����������� ������������������  원고를����������� ������������������  화면����������� ������������������  밖으로����������� ������������������  스크롤����������� ������������������  하지����������� ������������������  않도록����������� ������������������  브라우저의����������� ������������������  한����������� ������������������  화면에����������� ������������������  전부����������� ������������������  노출이����������� ������������������  

될����������� ������������������  수����������� ������������������  있도록����������� ������������������  설계한다.

Wednesday, September 19, 12

Page 39: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

그래프(차트)의����������� ������������������  대체����������� ������������������  텍스트

차트나����������� ������������������  그래프에����������� ������������������  복잡한����������� ������������������  정보를����������� ������������������  담고����������� ������������������  있는����������� ������������������  경우����������� ������������������  모든����������� ������������������  정보를����������� ������������������  전달할����������� ������������������  수����������� ������������������  없기����������� ������������������  때문에����������� ������������������  정보를����������� ������������������  요약하여����������� ������������������  선언����������� ������������������  한다.

<img src="g.png" alt="일상생활의 소모 칼로리 빨리걷기110kcal 자전거타기90kcal 청소70kcal 요리하기70kcal 잠자기25kcal 춤추기150kcal 목욕85kcal ">

Wednesday, September 19, 12

Page 40: [C2]deview2012 웹접근성

6.잘����������� ������������������  모르겠어요

그래프(차트)의����������� ������������������  대체����������� ������������������  텍스트

차트나����������� ������������������  그래프에����������� ������������������  복잡한����������� ������������������  정보를����������� ������������������  담고����������� ������������������  있는����������� ������������������  경우����������� ������������������  모든����������� ������������������  정보를����������� ������������������  전달할����������� ������������������  수����������� ������������������  없기����������� ������������������  때문에����������� ������������������  정보를����������� ������������������  요약하여����������� ������������������  선언����������� ������������������  한다.

Summary of Stock Price and Volume Day by Day Price and Volume Information

Wednesday, September 19, 12

Page 41: [C2]deview2012 웹접근성

하긴����������� ������������������  했는데����������� ������������������  맞게����������� ������������������  했나요?

Wednesday, September 19, 12

Page 42: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

누가����������� ������������������  맞나요?

되긴����������� ������������������  하는데����������� ������������������  서비스별로����������� ������������������  다른데요

통일되지����������� ������������������  않은����������� ������������������  사용자����������� ������������������  경험

Wednesday, September 19, 12

Page 43: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드

지침����������� ������������������  내용에����������� ������������������  따른����������� ������������������  적용방법����������� ������������������  중,����������� ������������������  효율적인����������� ������������������  내용을����������� ������������������  정하여����������� ������������������  적용����������� ������������������  방식을����������� ������������������  통일한다.

1.스킵����������� ������������������  네비게이션

1.����������� ������������������  항목선정����������� ������������������  방법

2.노출����������� ������������������  인터랙션

2.자동재생����������� ������������������  컨텐츠

1.����������� ������������������  페이지����������� ������������������  리프레시,����������� ������������������  리다이렉트

2.롤링����������� ������������������  컨텐츠

3.페이지����������� ������������������  로딩����������� ������������������  시����������� ������������������  자동����������� ������������������  재생

4.제어기능의����������� ������������������  위치

Wednesday, September 19, 12

Page 44: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드����������� ������������������  -����������� ������������������  스킵����������� ������������������  네비게이션

반복영역(동일한����������� ������������������  컨텐츠가����������� ������������������  동일한����������� ������������������  위치에����������� ������������������  걸쳐있는����������� ������������������  영역)을����������� ������������������  매번����������� ������������������  탐색하지����������� ������������������  않고����������� ������������������  건너뛸����������� ������������������  수����������� ������������������  있도록����������� ������������������  도와주는����������� ������������������  링크의����������� ������������������  모음

스킵����������� ������������������  네비게이션����������� ������������������  기본����������� ������������������  규칙

문서의����������� ������������������  최상위에����������� ������������������  위치해야����������� ������������������  하며,����������� ������������������  Tab키를����������� ������������������  누르면����������� ������������������  노출되어야����������� ������������������  함.

건너띄기����������� ������������������  요소는����������� ������������������  메인����������� ������������������  메뉴����������� ������������������  바로가기/하위����������� ������������������  메뉴����������� ������������������  바로가기/본문����������� ������������������  바로가기를����������� ������������������  설정할����������� ������������������  수����������� ������������������  있으며,����������� ������������������  하위����������� ������������������  메뉴가����������� ������������������  없는����������� ������������������  경우에는����������� ������������������  해당����������� ������������������  건너띄기를����������� ������������������  생략할����������� ������������������  수����������� ������������������  있다.����������� ������������������  ����������� ������������������  

메뉴가����������� ������������������  없는����������� ������������������  단����������� ������������������  페이지거나,����������� ������������������  지도����������� ������������������  서비스와����������� ������������������  같은����������� ������������������  경우,����������� ������������������  스킵네비게이션을����������� ������������������  생략할����������� ������������������  수����������� ������������������  있다

본문����������� ������������������  영역을����������� ������������������  제외하여����������� ������������������  중요한����������� ������������������  컨텐츠����������� ������������������  영역이����������� ������������������  없는����������� ������������������  경우����������� ������������������  불필요하게����������� ������������������  제공하지����������� ������������������  않는다.

Wednesday, September 19, 12

Page 45: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드����������� ������������������  -����������� ������������������  스킵����������� ������������������  네비게이션����������� ������������������  >����������� ������������������  항목선정

해당메뉴����������� ������������������  영역이����������� ������������������  없는����������� ������������������  경우를����������� ������������������  제외하고����������� ������������������  “메인����������� ������������������  메뉴”����������� ������������������  바로가기����������� ������������������  /����������� ������������������  “하위����������� ������������������  메뉴”����������� ������������������  바로가기����������� ������������������  /����������� ������������������  “본문영역”����������� ������������������  바로가기를����������� ������������������  모두����������� ������������������  제공

1.����������� ������������������  메인����������� ������������������  메뉴����������� ������������������  바로����������� ������������������  가기����������� ������������������  Skip����������� ������������������  to����������� ������������������  main����������� ������������������  menu

시작����������� ������������������  영역부터����������� ������������������  GNB,����������� ������������������  검색����������� ������������������  등����������� ������������������  요소를����������� ������������������  반복����������� ������������������  영역을����������� ������������������  건너뛰고,����������� ������������������  메인����������� ������������������  메뉴로����������� ������������������  바로����������� ������������������  이동할����������� ������������������  수����������� ������������������  있는����������� ������������������  링크-����������� ������������������  메인����������� ������������������  메뉴����������� ������������������  상단의����������� ������������������  불필요한����������� ������������������  반복요소를����������� ������������������  건너띄고,����������� ������������������  바로����������� ������������������  메인����������� ������������������  메뉴로����������� ������������������  접근����������� ������������������  할����������� ������������������  수����������� ������������������  있도록����������� ������������������  한다.

GNB

Main Menu

SUB Menu Main Contents

Wednesday, September 19, 12

Page 46: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드����������� ������������������  -����������� ������������������  스킵����������� ������������������  네비게이션����������� ������������������  >����������� ������������������  항목선정

해당메뉴����������� ������������������  영역이����������� ������������������  없는����������� ������������������  경우를����������� ������������������  제외하고����������� ������������������  “메인����������� ������������������  메뉴”����������� ������������������  바로가기����������� ������������������  /����������� ������������������  “하위����������� ������������������  메뉴”����������� ������������������  바로가기����������� ������������������  /����������� ������������������  “본문영역”����������� ������������������  바로가기를����������� ������������������  모두����������� ������������������  제공

1.����������� ������������������  메인����������� ������������������  메뉴����������� ������������������  바로����������� ������������������  가기����������� ������������������  Skip����������� ������������������  to����������� ������������������  sub����������� ������������������  menu

상단����������� ������������������  공통영역과����������� ������������������  메인메뉴����������� ������������������  영역까지의����������� ������������������  반복����������� ������������������  영역을����������� ������������������  건너뛰고,����������� ������������������  서브����������� ������������������  메뉴����������� ������������������  영역으로����������� ������������������  이동할����������� ������������������  수����������� ������������������  있는����������� ������������������  링크-����������� ������������������  특정����������� ������������������  페이지로����������� ������������������  이동한����������� ������������������  다음,����������� ������������������  같은����������� ������������������  메인����������� ������������������  메뉴����������� ������������������  카테고리����������� ������������������  내에서����������� ������������������  다른����������� ������������������  하위����������� ������������������  메뉴를����������� ������������������  선택하고자����������� ������������������  할����������� ������������������  경우����������� ������������������  사용-����������� ������������������  하위����������� ������������������  메뉴영역이����������� ������������������  페이지����������� ������������������  좌측이나����������� ������������������  메인메뉴����������� ������������������  하단에����������� ������������������  별도����������� ������������������  영역으로����������� ������������������  존재하는����������� ������������������  경우,����������� ������������������  사용-����������� ������������������  페이지����������� ������������������  내����������� ������������������  하위����������� ������������������  메뉴����������� ������������������  영역이����������� ������������������  없는����������� ������������������  경우,����������� ������������������  스킵네비게이션에서����������� ������������������  생략(ex.����������� ������������������  서비스����������� ������������������  메인����������� ������������������  페이지)

Wednesday, September 19, 12

Page 47: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드����������� ������������������  -����������� ������������������  스킵����������� ������������������  네비게이션����������� ������������������  >����������� ������������������  항목선정

해당메뉴����������� ������������������  영역이����������� ������������������  없는����������� ������������������  경우를����������� ������������������  제외하고����������� ������������������  “메인����������� ������������������  메뉴”����������� ������������������  바로가기����������� ������������������  /����������� ������������������  “하위����������� ������������������  메뉴”����������� ������������������  바로가기����������� ������������������  /����������� ������������������  “본문영역”����������� ������������������  바로가기를����������� ������������������  모두����������� ������������������  제공

1.����������� ������������������  메인����������� ������������������  메뉴����������� ������������������  바로����������� ������������������  가기����������� ������������������  Skip����������� ������������������  to����������� ������������������  Content

반복����������� ������������������  영역을����������� ������������������  건너뛰고,����������� ������������������  해당����������� ������������������  페이지의����������� ������������������  핵심����������� ������������������  컨텐츠로����������� ������������������  바로����������� ������������������  이동할����������� ������������������  수����������� ������������������  있는����������� ������������������  링크-����������� ������������������  뉴스����������� ������������������  페이지의����������� ������������������  경우����������� ������������������  메인메뉴����������� ������������������  영영역과����������� ������������������  좌측����������� ������������������  하위메뉴����������� ������������������  영역을����������� ������������������  제외하고,����������� ������������������  뉴스����������� ������������������  본문����������� ������������������  영역으로����������� ������������������  이동-����������� ������������������  좌측����������� ������������������  frame이����������� ������������������  나누어진����������� ������������������  경우,����������� ������������������  GNB����������� ������������������  등����������� ������������������  매����������� ������������������  페이지에서����������� ������������������  반복되는����������� ������������������  요소의����������� ������������������  경우에는����������� ������������������  skip����������� ������������������  영역으로����������� ������������������  설정

Wednesday, September 19, 12

Page 48: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드����������� ������������������  -����������� ������������������  자동재생����������� ������������������  컨텐츠

1.����������� ������������������  커텐츠����������� ������������������  자동����������� ������������������  갱신����������� ������������������  시����������� ������������������  문제점

페이지����������� ������������������  탐색����������� ������������������  중����������� ������������������  리프레시,����������� ������������������  리다이렉트가����������� ������������������  발생하게����������� ������������������  되면����������� ������������������  페이지를����������� ������������������  새로����������� ������������������  읽어오기����������� ������������������  때문에����������� ������������������  키보드����������� ������������������  포커스를����������� ������������������  잃고����������� ������������������  다시����������� ������������������  문서의����������� ������������������  처음으로����������� ������������������  이동하게����������� ������������������  된다.����������� ������������������  이런����������� ������������������  경우����������� ������������������  시각����������� ������������������  장애인은����������� ������������������  스크린리더를����������� ������������������  통해����������� ������������������  컨텐츠를����������� ������������������  탐색하다가����������� ������������������  다시����������� ������������������  처음부터����������� ������������������  컨텐츠를����������� ������������������  읽어야����������� ������������������  하며,����������� ������������������  지적����������� ������������������  장애인의����������� ������������������  경우����������� ������������������  컨텐츠를����������� ������������������  채����������� ������������������  읽기도����������� ������������������  전에����������� ������������������  컨텐츠가����������� ������������������  변경되어����������� ������������������  정보를����������� ������������������  인지할����������� ������������������  수����������� ������������������  없다.����������� ������������������  

롤링����������� ������������������  컨텐츠(롤링����������� ������������������  배너,����������� ������������������  실시간����������� ������������������  뉴스,����������� ������������������  짧은����������� ������������������  시간����������� ������������������  동안����������� ������������������  나타났다����������� ������������������  사라지는����������� ������������������  알림����������� ������������������  레이어����������� ������������������  등등)의����������� ������������������  경우에는����������� ������������������  컨텐츠를����������� ������������������  채����������� ������������������  읽기도����������� ������������������  전에����������� ������������������  컨텐츠가����������� ������������������  화면����������� ������������������  안에서����������� ������������������  사라져서����������� ������������������  컨텐츠를����������� ������������������  인지할����������� ������������������  수����������� ������������������  없거나����������� ������������������  특정����������� ������������������  부분이����������� ������������������  계속����������� ������������������  업데이트����������� ������������������  되어����������� ������������������  포커스를����������� ������������������  잃어버리는����������� ������������������  경우가����������� ������������������  발생할����������� ������������������  수����������� ������������������  있다.����������� ������������������  또한,����������� ������������������  롤링����������� ������������������  된����������� ������������������  이전����������� ������������������  컨텐츠를����������� ������������������  다시����������� ������������������  확인하기����������� ������������������  위해서는����������� ������������������  원하는����������� ������������������  컨텐츠가����������� ������������������  다시����������� ������������������  롤링될����������� ������������������  때까지����������� ������������������  기다려야����������� ������������������  하는����������� ������������������  문제점이����������� ������������������  있다.

2.����������� ������������������  사용자����������� ������������������  제어����������� ������������������  기능����������� ������������������  제공����������� ������������������  방법

서비스����������� ������������������  구조����������� ������������������  상����������� ������������������  페이지����������� ������������������  자동����������� ������������������  갱신����������� ������������������  혹은����������� ������������������  컨텐츠����������� ������������������  자동����������� ������������������  갱신,����������� ������������������  롤링����������� ������������������  컨텐츠����������� ������������������  기능이����������� ������������������  필요한����������� ������������������  경우에����������� ������������������  사용자가����������� ������������������  이를����������� ������������������  제어할����������� ������������������  수����������� ������������������  있도록����������� ������������������  한다.����������� ������������������  단,����������� ������������������  페이지����������� ������������������  전체가����������� ������������������  일정����������� ������������������  시간����������� ������������������  후에����������� ������������������  리프레시����������� ������������������  혹은����������� ������������������  리다이렉트����������� ������������������  되는����������� ������������������  경우에는����������� ������������������  제어할����������� ������������������  수����������� ������������������  있는����������� ������������������  기능을����������� ������������������  페이지의����������� ������������������  가장����������� ������������������  상단에����������� ������������������  두어����������� ������������������  컨텐츠의����������� ������������������  변화����������� ������������������  이전에����������� ������������������  제어할����������� ������������������  수����������� ������������������  있게����������� ������������������  한다.

[자동재생����������� ������������������  음성컨텐츠����������� ������������������  기본����������� ������������������  규칙]

-����������� ������������������  페이지����������� ������������������  리프레시,����������� ������������������  리다이렉트����������� ������������������  :����������� ������������������  최상단에����������� ������������������  리프레쉬����������� ������������������  제어����������� ������������������  기능����������� ������������������  제공.-����������� ������������������  롤링����������� ������������������  컨텐츠����������� ������������������  :����������� ������������������  영역����������� ������������������  내����������� ������������������  이전/다음,����������� ������������������  정기����������� ������������������  기능을����������� ������������������  반드시����������� ������������������  제공함.-����������� ������������������  페이지����������� ������������������  로딩����������� ������������������  시����������� ������������������  자동����������� ������������������  재생����������� ������������������  :����������� ������������������  가급적����������� ������������������  정지상태를����������� ������������������  기본값으로����������� ������������������  제공하되,����������� ������������������  어려운����������� ������������������  경우����������� ������������������  정기����������� ������������������  기능을����������� ������������������  최상단에����������� ������������������  제공함.

Wednesday, September 19, 12

Page 49: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드����������� ������������������  -����������� ������������������  자동재생����������� ������������������  컨텐츠����������� ������������������  >����������� ������������������  페이지����������� ������������������  리프레시,����������� ������������������  리다이렉트

리다이렉트����������� ������������������  제어기능은����������� ������������������  UI상����������� ������������������  

화면����������� ������������������  안에����������� ������������������  보이기만����������� ������������������  하면����������� ������������������  사용자의����������� ������������������  인터랙션으로����������� ������������������  

제어가����������� ������������������  가능하지만����������� ������������������  시각장애인의����������� ������������������  경우에,

페이지의����������� ������������������  가장����������� ������������������  처음에서����������� ������������������  읽어주지����������� ������������������  않으면����������� ������������������  

제어가����������� ������������������  어렵기����������� ������������������  때문에����������� ������������������  시각적으로

하단에����������� ������������������  위치하더라도,

HTML����������� ������������������  코드상에서는����������� ������������������  반드시����������� ������������������  상단에����������� ������������������  두도록����������� ������������������  한다.

Wednesday, September 19, 12

Page 50: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드����������� ������������������  -����������� ������������������  자동재생����������� ������������������  컨텐츠����������� ������������������  >����������� ������������������  롤링컨텐츠

롤링����������� ������������������  컨텐츠는����������� ������������������  페이지����������� ������������������  전체가����������� ������������������  변경되는����������� ������������������  것이����������� ������������������  아니기����������� ������������������  때문에����������� ������������������  해당����������� ������������������  컨텐츠를����������� ������������������  만났을����������� ������������������  때����������� ������������������  사용자가����������� ������������������  제어할����������� ������������������  수����������� ������������������  있도록����������� ������������������  한다.

일반적인����������� ������������������  방법 UI구현����������� ������������������  공간이����������� ������������������  없을����������� ������������������  경우

Wednesday, September 19, 12

Page 51: [C2]deview2012 웹접근성

7.맞게����������� ������������������  했나요?

UX가이드����������� ������������������  -����������� ������������������  제어기능의����������� ������������������  위치

①����������� ������������������  자동����������� ������������������  재생����������� ������������������  음성����������� ������������������  컨텐츠����������� ������������������  순서,����������� ������������������  ②����������� ������������������  페이지����������� ������������������  자동갱신����������� ������������������  제어����������� ������������������  기능,����������� ������������������  ③����������� ������������������  스킵����������� ������������������  네비게이션

페이지가����������� ������������������  로딩����������� ������������������  되었을����������� ������������������  때����������� ������������������  무엇보다����������� ������������������  먼저����������� ������������������  정의해야����������� ������������������  하는����������� ������������������  기능은����������� ������������������  다음과����������� ������������������  같으며,����������� ������������������  페이지����������� ������������������  컨텐츠에����������� ������������������  따라����������� ������������������  정의����������� ������������������  항목은����������� ������������������  다르더라도����������� ������������������  아래����������� ������������������  순서를����������� ������������������  반드시����������� ������������������  지키도록����������� ������������������  한다.

Wednesday, September 19, 12

Page 52: [C2]deview2012 웹접근성

어떤 장님이 수십 명의 사람들과 같이 금강산에 갔다가 돌아왔다. 어떤 사람이 유점사의 기둥과 지붕 형태를 물으니 대답하는사람이 없었다. 그런데 장님이 말하기를, "불전의 기왓골이 120이다."라고 하였다. 그 까닭을 물으니 장님이 다시 말하기를,"처음 갔을 때 갑자기 소나기가 내려 기왓골에서 떨어진 물이 땅을 파서 오목하게 되었다. 내가 그것을 더듬어 세어보아 알게 되었다."하였다.

(권별, 『해동잡록(海東雜錄)』, 『대동야승』 5, 민족문화추진회, 1973 -P. 57)  [출처] 조선시대 장애인들은 어떻게 살았을까? |작성자 love한화

장애에����������� ������������������  대한����������� ������������������  인식과����������� ������������������  장애판정에����������� ������������������  대한����������� ������������������  기준

“그들에게����������� ������������������  장애는����������� ������������������  없었다“

편견

웹접근성에����������� ������������������  대한����������� ������������������  공감

Wednesday, September 19, 12

Page 53: [C2]deview2012 웹접근성

[email protected]

html.nhncorp.com

Wednesday, September 19, 12

Page 54: [C2]deview2012 웹접근성

웹접근성이����������� ������������������  상식이����������� ������������������  되길����������� ������������������  기대해����������� ������������������  봅니다.

감사합니다.

Wednesday, September 19, 12