[2012널리세미나] 네이버의 웹 접근성 개선 방향

39
네이버의 웹 접근성 개선 방향 조진주 (펄님/[email protected])

Upload: nts-nuli

Post on 10-Jun-2015

378 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: [2012널리세미나] 네이버의 웹 접근성 개선 방향

네이버의����������� ������������������  웹����������� ������������������  접근성����������� ������������������  개선����������� ������������������  방향����������� ������������������  조진주����������� ������������������  (펄님/[email protected])����������� ������������������  

Page 2: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  _����������� ������������������  여는����������� ������������������  말����������� ������������������  

네이버의����������� ������������������  웹����������� ������������������  접근성����������� ������������������  개선����������� ������������������  방향을����������� ������������������  

소개하는����������� ������������������  이유����������� ������������������  

Page 3: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  _����������� ������������������  여는����������� ������������������  말����������� ������������������  

네이버의����������� ������������������  웹����������� ������������������  접근성����������� ������������������  개선����������� ������������������  방향을����������� ������������������  소개하는����������� ������������������  이유,����������� ������������������  첫번째-����������� ������������������  

앞으로����������� ������������������  잘����������� ������������������  할께요����������� ������������������  ^^;����������� ������������������  

Page 4: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  _����������� ������������������  여는����������� ������������������  말����������� ������������������  

네이버의����������� ������������������  웹����������� ������������������  접근성����������� ������������������  개선����������� ������������������  방향을����������� ������������������  소개하는����������� ������������������  이유,����������� ������������������  두번째-����������� ������������������  

도움이����������� ������������������  되고����������� ������������������  싶어요~����������� ������������������  

Page 5: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  _����������� ������������������  여는����������� ������������������  말����������� ������������������  

다섯����������� ������������������  단계로����������� ������������������  살펴보는����������� ������������������  네이버의����������� ������������������  웹����������� ������������������  접근성����������� ������������������  개선����������� ������������������  방향����������� ������������������  

Page 6: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  ����������� ������������������  

Preparation����������� ������������������  _����������� ������������������  준비����������� ������������������  

Proposal����������� ������������������  

Education����������� ������������������  

Execution����������� ������������������  

Example����������� ������������������  

Page 7: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Preparation����������� ������������������  _����������� ������������������  준비����������� ������������������  

많은����������� ������������������  사람들의����������� ������������������  노력이����������� ������������������  빛을����������� ������������������  보지����������� ������������������  못했던����������� ������������������  지난����������� ������������������  세월들…⋯����������� ������������������  ����������� ������������������  

Page 8: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Preparation����������� ������������������  _����������� ������������������  준비����������� ������������������  

2011년����������� ������������������  8월,����������� ������������������  웹����������� ������������������  접근성����������� ������������������  TF����������� ������������������  구성����������� ������������������  

접근성����������� ������������������  다양한����������� ������������������  직무����������� ������������������  

업무����������� ������������������  프로세스����������� ������������������  

Page 9: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Preparation����������� ������������������  _����������� ������������������  준비����������� ������������������  

NWCAG����������� ������������������  ����������� ������������������  (NHN����������� ������������������  Web����������� ������������������  Contents����������� ������������������  Accessibility����������� ������������������  Guidelines)����������� ������������������  

ü  NHN에서����������� ������������������  제공하는����������� ������������������  웹����������� ������������������  콘텐츠의����������� ������������������  접근성을����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  보장하기����������� ������������������  위해����������� ������������������  제작된����������� ������������������  지침����������� ������������������  

ü  KWCAG����������� ������������������  2.0의����������� ������������������  모든����������� ������������������  내용����������� ������������������  포함����������� ������������������  ü  그����������� ������������������  외����������� ������������������  웹����������� ������������������  접근성����������� ������������������  개선에����������� ������������������  도움이����������� ������������������  되는����������� ������������������  지침����������� ������������������  추가����������� ������������������  ü  8개의����������� ������������������  Key����������� ������������������  point와����������� ������������������  27개의����������� ������������������  Guideline으로����������� ������������������  구성����������� ������������������  

Page 10: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Preparation����������� ������������������  _����������� ������������������  준비����������� ������������������  

체크리스트����������� ������������������  

ü  NWCAG에����������� ������������������  기반한����������� ������������������  33개의����������� ������������������  체크리스트����������� ������������������  ü  웹����������� ������������������  접근성����������� ������������������  품질마크����������� ������������������  인증을����������� ������������������  위해����������� ������������������  반드시����������� ������������������  준수해야����������� ������������������  하는����������� ������������������  필수����������� ������������������  항목과����������� ������������������  ����������� ������������������  

더����������� ������������������  나은����������� ������������������  접근성����������� ������������������  보장을����������� ������������������  위한����������� ������������������  권장����������� ������������������  항목으로����������� ������������������  구성����������� ������������������  

Page 11: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Preparation����������� ������������������  _����������� ������������������  준비����������� ������������������  

기술가이드����������� ������������������  

ü  일관된����������� ������������������  기준으로����������� ������������������  통과/오류����������� ������������������  유형을����������� ������������������  확인하기����������� ������������������  위한����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  다양한����������� ������������������  사례����������� ������������������  제시����������� ������������������  

ü  체크리스트별����������� ������������������  평가����������� ������������������  방법����������� ������������������  가이드����������� ������������������  

ü  http://html.nhncorp.com����������� ������������������  >����������� ������������������  A11Y����������� ������������������  메뉴����������� ������������������  클릭!

Page 12: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Preparation����������� ������������������  _����������� ������������������  준비����������� ������������������  

N-WAX����������� ������������������  (NHN����������� ������������������  Web����������� ������������������  Accessibility����������� ������������������  eXtension)����������� ������������������  

ü  체크리스트의����������� ������������������  통과����������� ������������������  여부를����������� ������������������  쉽고����������� ������������������  빠르게����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  진단할����������� ������������������  ����������� ������������������  수����������� ������������������  있는����������� ������������������  평가툴����������� ������������������  

ü  파이어폭스,����������� ������������������  크롬의����������� ������������������  확장����������� ������������������  도구로����������� ������������������  제공����������� ������������������  

Page 13: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  ����������� ������������������  

Preparation����������� ������������������  ����������� ������������������  

Proposal����������� ������������������  _����������� ������������������  제안����������� ������������������  

Education����������� ������������������  

Execution����������� ������������������  

Example����������� ������������������  

Page 14: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Proposal����������� ������������������  _����������� ������������������  제안����������� ������������������  

왜����������� ������������������  해야����������� ������������������  하는지����������� ������������������  

ü  2007년에����������� ������������������  제정된����������� ������������������  장애인����������� ������������������  차별금지법에����������� ������������������  따라����������� ������������������  ����������� ������������������  2008년부터����������� ������������������  웹����������� ������������������  접근성����������� ������������������  보장이����������� ������������������  단계적으로����������� ������������������  의무화����������� ������������������  됨����������� ������������������  ü  NHN은����������� ������������������  2013년����������� ������������������  4월����������� ������������������  11일부터����������� ������������������  장애인차별금지법의����������� ������������������  적용을����������� ������������������  받음����������� ������������������  ü  웹����������� ������������������  접근성����������� ������������������  관련����������� ������������������  소송사례를����������� ������������������  정리하여����������� ������������������  참고����������� ������������������  자료로����������� ������������������  제시����������� ������������������  

ü  장애인����������� ������������������  사용성����������� ������������������  테스트를����������� ������������������  통해����������� ������������������  고용����������� ������������������  기회����������� ������������������  확대����������� ������������������  ü  다양한����������� ������������������  장애����������� ������������������  환경의����������� ������������������  접근성을����������� ������������������  보장함으로써����������� ������������������  브랜드����������� ������������������  가치����������� ������������������  향상����������� ������������������  

Page 15: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Proposal����������� ������������������  _����������� ������������������  제안����������� ������������������  

얼마나����������� ������������������  심각한지����������� ������������������  

ü  NWCAG����������� ������������������  체크리스트를����������� ������������������  기반으로����������� ������������������  주요����������� ������������������  서비스들의����������� ������������������  웹����������� ������������������  접근성����������� ������������������  현황����������� ������������������  파악����������� ������������������  ü  대부분의����������� ������������������  서비스가����������� ������������������  웹����������� ������������������  접근성����������� ������������������  품질마크����������� ������������������  인증����������� ������������������  기준에����������� ������������������  미치지����������� ������������������  못하고����������� ������������������  있음����������� ������������������  

0����������� ������������������  

20����������� ������������������  

40����������� ������������������  

60����������� ������������������  

80����������� ������������������  

100����������� ������������������  

서비스����������� ������������������  전체����������� ������������������  평균����������� ������������������  

To����������� ������������������  Be:����������� ������������������  ����������� ������������������  100점����������� ������������������  

As����������� ������������������  is:����������� ������������������  ����������� ������������������  21점����������� ������������������  

Page 16: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Proposal����������� ������������������  _����������� ������������������  제안����������� ������������������  

무엇을,����������� ������������������  어떻게����������� ������������������  개선해야����������� ������������������  하는지����������� ������������������  

ü  네이버����������� ������������������  메인,����������� ������������������  회원가입����������� ������������������  일부����������� ������������������  페이지를����������� ������������������  대상으로����������� ������������������  프로토타입����������� ������������������  제작����������� ������������������  ü  개선����������� ������������������  전,����������� ������������������  후의����������� ������������������  차이가����������� ������������������  명확하도록����������� ������������������  제작하는����������� ������������������  것이����������� ������������������  포인트!����������� ������������������  

오류����������� ������������������  항목����������� ������������������   키보드로����������� ������������������  전체����������� ������������������  콘텐츠를����������� ������������������  탐색할����������� ������������������  수����������� ������������������  없음����������� ������������������  

관련����������� ������������������  장애����������� ������������������  마우스의����������� ������������������  사용이����������� ������������������  어려운����������� ������������������  시각����������� ������������������  장애,����������� ������������������  지체����������� ������������������  장애,����������� ������������������  ����������� ������������������  뇌병변����������� ������������������  장애인이����������� ������������������  일부����������� ������������������  콘텐츠에����������� ������������������  접근할����������� ������������������  수����������� ������������������  없음����������� ������������������  

해결����������� ������������������  방안����������� ������������������   모든����������� ������������������  콘텐츠가����������� ������������������  키보드로����������� ������������������  접근할����������� ������������������  수����������� ������������������  있도록����������� ������������������  함����������� ������������������  

Page 17: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  ����������� ������������������  

Preparation����������� ������������������  ����������� ������������������  

Proposal����������� ������������������  ����������� ������������������  

Education����������� ������������������  _����������� ������������������  교육����������� ������������������  

Execution����������� ������������������  

Example����������� ������������������  

Page 18: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Education����������� ������������������  _����������� ������������������  교육����������� ������������������  

Awareness����������� ������������������  

ü  조직장����������� ������������������  대상����������� ������������������  ü  웹����������� ������������������  접근성의����������� ������������������  개념과����������� ������������������  준수����������� ������������������  목적을����������� ������������������  설명����������� ������������������  ü  NHN����������� ������������������  웹����������� ������������������  접근성����������� ������������������  개선����������� ������������������  방향����������� ������������������  제시����������� ������������������  ü  개선����������� ������������������  프로젝트����������� ������������������  킥오프(Kick-off)����������� ������������������  

Page 19: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Education����������� ������������������  _����������� ������������������  교육����������� ������������������  

직군별����������� ������������������  교육����������� ������������������  

ü  서비스����������� ������������������  제작/유지보수����������� ������������������  업무를����������� ������������������  담당하는����������� ������������������  모든����������� ������������������  사람����������� ������������������  ����������� ������������������  ü  웹����������� ������������������  접근성의����������� ������������������  개념과����������� ������������������  NWCAG����������� ������������������  지침은����������� ������������������  공통적으로����������� ������������������  다룸����������� ������������������  ü  지침별����������� ������������������  구현����������� ������������������  방법은����������� ������������������  직군별(기획/디자인����������� ������������������  ,����������� ������������������  마크업����������� ������������������  개발,����������� ������������������  웹����������� ������������������  개발)로����������� ������������������  특화된����������� ������������������  내용을����������� ������������������  다룸����������� ������������������  

기획/디자인����������� ������������������  ����������� ������������������  그림,����������� ������������������  사진,����������� ������������������  정보전달을����������� ������������������  위한����������� ������������������  아이콘,����������� ������������������  차트,����������� ������������������  다이어그램����������� ������������������  등에����������� ������������������  대체����������� ������������������  텍스트를����������� ������������������  제공한다.����������� ������������������  

마크업����������� ������������������  개발����������� ������������������   대체����������� ������������������  텍스를����������� ������������������  제공하기����������� ������������������  위해서는����������� ������������������  alt����������� ������������������  속성을����������� ������������������  사용한다.����������� ������������������  

웹����������� ������������������  개발����������� ������������������  동적으로����������� ������������������  생성하는����������� ������������������  이미지에도����������� ������������������  대체����������� ������������������  텍스트를����������� ������������������  제공한다.����������� ������������������  img.setAttribute("alt",����������� ������������������  "");����������� ������������������  

Page 20: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  ����������� ������������������  

Preparation����������� ������������������  ����������� ������������������  

Proposal����������� ������������������  ����������� ������������������  

Education����������� ������������������  

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

Example����������� ������������������  

Page 21: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

우선순위����������� ������������������  선정����������� ������������������  

ü  서비스����������� ������������������  중요도에����������� ������������������  따라����������� ������������������  순차적으로����������� ������������������  진행����������� ������������������  

1차����������� ������������������   2차����������� ������������������   3차����������� ������������������   4차����������� ������������������  

Page 22: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

프로세스����������� ������������������  수립����������� ������������������  

개선����������� ������������������  제안서����������� ������������������  리뷰����������� ������������������  

개선����������� ������������������  일정����������� ������������������  협의����������� ������������������  

이슈����������� ������������������  등록����������� ������������������   이슈����������� ������������������  처리����������� ������������������  웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  

배포����������� ������������������  웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  

사용성����������� ������������������  ����������� ������������������  테스트����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  개선����������� ������������������  목적과����������� ������������������  방향,����������� ������������������  예상����������� ������������������  일정을����������� ������������������  서비스����������� ������������������  담당부서에����������� ������������������  공유����������� ������������������  

Page 23: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

프로세스����������� ������������������  수립����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  

개선����������� ������������������  일정����������� ������������������  협의����������� ������������������  

이슈����������� ������������������  등록����������� ������������������   이슈����������� ������������������  처리����������� ������������������  웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  

배포����������� ������������������  개선����������� ������������������  제안서����������� ������������������  리뷰����������� ������������������  

사용성����������� ������������������  ����������� ������������������  테스트����������� ������������������  

NWCAG����������� ������������������  체크리스트를����������� ������������������  기반으로����������� ������������������  오류����������� ������������������  항목����������� ������������������  정리����������� ������������������  

Page 24: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

프로세스����������� ������������������  수립����������� ������������������  

사용성����������� ������������������  테스트����������� ������������������  

개선����������� ������������������  일정����������� ������������������  협의����������� ������������������  

이슈����������� ������������������  등록����������� ������������������   이슈����������� ������������������  처리����������� ������������������  웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  

배포����������� ������������������  개선����������� ������������������  제안서����������� ������������������  리뷰����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  

시각����������� ������������������  장애인을����������� ������������������  대상으로����������� ������������������  주요����������� ������������������  과업의����������� ������������������  사용성����������� ������������������  테스트를����������� ������������������  진행����������� ������������������  

Page 25: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

프로세스����������� ������������������  수립����������� ������������������  

개선����������� ������������������  일정����������� ������������������  협의����������� ������������������  

사용성����������� ������������������  테스트����������� ������������������  

이슈����������� ������������������  등록����������� ������������������   이슈����������� ������������������  처리����������� ������������������  웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  

배포����������� ������������������  개선����������� ������������������  제안서����������� ������������������  리뷰����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  및����������� ������������������  사용성����������� ������������������  테스트에서����������� ������������������  나온����������� ������������������  개선����������� ������������������  사항을����������� ������������������  토대로����������� ������������������  진행����������� ������������������  일정����������� ������������������  협의����������� ������������������  

Page 26: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

프로세스����������� ������������������  수립����������� ������������������  

이슈����������� ������������������  등록����������� ������������������  사용성����������� ������������������  테스트����������� ������������������  

개선����������� ������������������  일정����������� ������������������  협의����������� ������������������  

이슈����������� ������������������  처리����������� ������������������  웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  

배포����������� ������������������  개선����������� ������������������  제안서����������� ������������������  리뷰����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  

개선����������� ������������������  이슈를����������� ������������������  개별적으로����������� ������������������  BTS(Bug����������� ������������������  Tracking����������� ������������������  System)에����������� ������������������  등록한����������� ������������������  뒤����������� ������������������  담당자에게����������� ������������������  할당����������� ������������������  

Page 27: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

프로세스����������� ������������������  수립����������� ������������������  

이슈����������� ������������������  처리����������� ������������������  사용성����������� ������������������  테스트����������� ������������������  

개선����������� ������������������  일정����������� ������������������  협의����������� ������������������  

이슈����������� ������������������  등록����������� ������������������  웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  

배포����������� ������������������  개선����������� ������������������  제안서����������� ������������������  리뷰����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  

담당자별로����������� ������������������  할당된����������� ������������������  개선����������� ������������������  이슈를����������� ������������������  가이드에����������� ������������������  맞게����������� ������������������  수정����������� ������������������  

Page 28: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

프로세스����������� ������������������  수립����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  

사용성����������� ������������������  테스트����������� ������������������  

개선����������� ������������������  일정����������� ������������������  협의����������� ������������������  

이슈����������� ������������������  등록����������� ������������������   이슈����������� ������������������  처리����������� ������������������   배포����������� ������������������  개선����������� ������������������  제안서����������� ������������������  리뷰����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  

개선이����������� ������������������  완료된����������� ������������������  이슈를����������� ������������������  전체적으로����������� ������������������  재검토����������� ������������������  

Page 29: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Execution����������� ������������������  _����������� ������������������  실행����������� ������������������  

프로세스����������� ������������������  수립����������� ������������������  

배포����������� ������������������  사용성����������� ������������������  테스트����������� ������������������  

개선����������� ������������������  일정����������� ������������������  협의����������� ������������������  

이슈����������� ������������������  등록����������� ������������������   이슈����������� ������������������  처리����������� ������������������  웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  

개선����������� ������������������  제안서����������� ������������������  리뷰����������� ������������������  

웹����������� ������������������  접근성����������� ������������������  평가����������� ������������������  

접근성이����������� ������������������  향상된����������� ������������������  웹����������� ������������������  서비스를����������� ������������������  사용자에게����������� ������������������  제공����������� ������������������  

Page 30: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Intro����������� ������������������  ����������� ������������������  

Preparation����������� ������������������  ����������� ������������������  

Proposal����������� ������������������  ����������� ������������������  

Education����������� ������������������  

Execution����������� ������������������  

Example����������� ������������������  _����������� ������������������  개선����������� ������������������  사례����������� ������������������  

메일����������� ������������������  Lite����������� ������������������  

Page 31: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Example����������� ������������������  _����������� ������������������  개선����������� ������������������  사례����������� ������������������  

배경����������� ������������������  날����������� ������������������  대신하려면����������� ������������������  적어도����������� ������������������  접근성은����������� ������������������  

보장해야����������� ������������������  하지����������� ������������������  않겠어?����������� ������������������  

메일SE����������� ������������������  

열악한����������� ������������������  환경����������� ������������������  고려����������� ������������������  

간편한����������� ������������������  화면����������� ������������������  구성,����������� ������������������  접근성����������� ������������������  보장����������� ������������������  

메일Lite����������� ������������������  

메일SE의����������� ������������������  업그레이드����������� ������������������  버전����������� ������������������  

기본����������� ������������������  메일과����������� ������������������  유사한����������� ������������������  화면����������� ������������������  구성����������� ������������������  

교체����������� ������������������  

Page 32: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Example����������� ������������������  _����������� ������������������  개선����������� ������������������  사례����������� ������������������  

평가����������� ������������������  

ü  전맹����������� ������������������  사용자의����������� ������������������  접근성에����������� ������������������  해당하는����������� ������������������  항목만����������� ������������������  평가����������� ������������������  ü  반드시����������� ������������������  지켜야����������� ������������������  하는����������� ������������������  필수����������� ������������������  항목만����������� ������������������  평가����������� ������������������  

Page 33: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Example����������� ������������������  _����������� ������������������  개선����������� ������������������  사례����������� ������������������  

통과����������� ������������������  가이드����������� ������������������  

ü  각각의����������� ������������������  오류����������� ������������������  항목을����������� ������������������  개선할����������� ������������������  수����������� ������������������  있는����������� ������������������  가이드����������� ������������������  ü  어디에서����������� ������������������  무엇이����������� ������������������  잘못되었는지,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  누가,����������� ������������������  어떻게����������� ������������������  개선해야����������� ������������������  하는지����������� ������������������  상세히����������� ������������������  기술����������� ������������������  

ü  통과����������� ������������������  가이드를����������� ������������������  기준으로����������� ������������������  개선����������� ������������������  일정을����������� ������������������  ����������� ������������������  잡고����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  BTS(Bug����������� ������������������  Tracking����������� ������������������  System)에����������� ������������������  이슈����������� ������������������  등록����������� ������������������  

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

Page 34: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Example����������� ������������������  _����������� ������������������  개선����������� ������������������  사례����������� ������������������  

개선된����������� ������������������  점����������� ������������������  1����������� ������������������  

ü  동적으로����������� ������������������  생성되는����������� ������������������  이미지까지����������� ������������������  속속들이����������� ������������������  찾아����������� ������������������  대체����������� ������������������  텍스트����������� ������������������  제공!����������� ������������������  ����������� ������������������  

개선 전 alt 속성이 선언되지 않았음. 스크린리더에서 이미지 파일명이 출력됨

개선 후 alt ="[email protected]"

Page 35: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Example����������� ������������������  _����������� ������������������  개선����������� ������������������  사례����������� ������������������  

개선된����������� ������������������  점����������� ������������������  2����������� ������������������  

ü  웹����������� ������������������  페이지����������� ������������������  제목만����������� ������������������  보고도����������� ������������������  어떤����������� ������������������  내용을����������� ������������������  담고����������� ������������������  있는지����������� ������������������  알����������� ������������������  수����������� ������������������  있도록!����������� ������������������  

개선 전

페이지가����������� ������������������  바뀌어도����������� ������������������  

환경설정����������� ������������������  ::����������� ������������������  네이버����������� ������������������  메일����������� ������������������  

Page 36: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Example����������� ������������������  _����������� ������������������  개선����������� ������������������  사례����������� ������������������  

개선된����������� ������������������  점����������� ������������������  2����������� ������������������  

ü  웹����������� ������������������  페이지����������� ������������������  제목만����������� ������������������  보고도����������� ������������������  어떤����������� ������������������  내용을����������� ������������������  담고����������� ������������������  있는지����������� ������������������  알����������� ������������������  수����������� ������������������  있도록!����������� ������������������  

개선 전 개선 후

주요����������� ������������������  콘텐츠의����������� ������������������  제목을����������� ������������������  웹����������� ������������������  페이지의����������� ������������������  제목에도����������� ������������������  반영!����������� ������������������  

Page 37: [2012널리세미나] 네이버의 웹 접근성 개선 방향

Example����������� ������������������  _����������� ������������������  개선����������� ������������������  사례����������� ������������������  

개선된����������� ������������������  점����������� ������������������  3����������� ������������������  

ü  폼����������� ������������������  요소의����������� ������������������  역할을����������� ������������������  명확하게����������� ������������������  알����������� ������������������  수����������� ������������������  있는����������� ������������������  레이블����������� ������������������  제공!����������� ������������������  

개선 전 체크박스가����������� ������������������  무엇을����������� ������������������  의미하는지����������� ������������������  레이블이나����������� ������������������  title����������� ������������������  속성이����������� ������������������  제공되지����������� ������������������  않았음.����������� ������������������  ����������� ������������������  스크린리더에서����������� ������������������  ‘해제����������� ������������������  체크상자’로만����������� ������������������  출력됨����������� ������������������  

개선 후 메일����������� ������������������  제목을����������� ������������������  레이블로����������� ������������������  제공����������� ������������������  ����������� ������������������  

Page 38: [2012널리세미나] 네이버의 웹 접근성 개선 방향

앞으로����������� ������������������  

기대해주세요!����������� ������������������  

조진주����������� ������������������  

me2day����������� ������������������  ID:����������� ������������������  펄님����������� ������������������  

E-mail:����������� ������������������  [email protected]����������� ������������������  

Page 39: [2012널리세미나] 네이버의 웹 접근성 개선 방향