웹 접근성 프로젝트

현장에서 발생하는 문제점과 해결

방안

㈜에스앤씨랩 공동대표 장선영 / cs.snclab@gmail.com

133-831 서울 성동구 성수2가 277-43 아크밸리 성수IT센터 805호 ｜02-2201-9928｜www.snclab.kr

2013.06.27(Thu)

프로젝트 개선 시 고려 사항

분야별 해결 사례

지속 가능한 웹 접근성

01.

02.

03.

목차

개선대상범위파악부터

어디서부터 시작할까?

1. 웹접근성개선프로젝트고려사항

• XHTML, CSS 같은 웹 표준을 준수하여 개발되었나?

• 콘텐츠 유형 체크 (내부개발, 외부개발)

• 사이트의 규모와 복잡성 체크 / 개선 대상 URL 목록 체크

• 개발 도구(언어) 및 개발 환경 체크

• 사이트는 템플릿 또는 콘텐츠 관리 시스템(CMS) 이용하여 만들어 졌는가?

• 사용자가 참여하는 메뉴가 있는가?

• E-book 과 같은 카탈로그 메뉴가 있는가?

• PDF 와 같은 전자문서가 있는가? 별도의 뷰어로만 읽기를 제공하는가?

•로 그인을 해야만 사용할 수 있는 메뉴가 있는가?

함께 시작하자!

웹접근성 : 진단 > 개선 > 진단

웹접근성 : 진단 > 개선 > 진단

웹접근성 : 진단 > 개선 > 진단

웹접근성 : 진단 > 개선 > 진단

웹접근성 분석 및 전략

기획

디자인

퍼블리싱

개발

우선순위를 정하고 수정하라!

1. 웹접근성개선프로젝트고려사항

우선순위결정 시 가장중요한 것은웹 사이트에대한 사용자경험에 가장크게 영향을미치는 영역을먼저 진단하고수

정한다. 접근성장애 요소가전체 사이트에산재하고있는지또는 특정부분에 제한적으로나타나는지여부를파악하여

개선 계획을세운다.

전수검사 : 사이트내모든페이지를진단하여모든장애요소를분석한다.

전문가에의한수동검사로시간이많이소요됨.

패턴검사 : 대표적이며주요한영역에초점을맞춰선별된페이지들을진단한다.

반복적요소를골라내어한번만진단함.

1. 메인페이지

장애에 미치는 영향력이 높고수정이 쉬운 것 부터 수정

장애에 미치는 영향력이 적고수정이 어려운 것을 나중에 수정

우선순위 범위 선정 대상 페이지

2. 거래를마치기위한경로

3. 사이트의목적에기초한페이지와기능

5. 다른시작점으로가기위한경로

4. 경고를포함한빈번히사용되는페이지

패턴 진단 시 주의 사항

1. 웹접근성개선프로젝트고려사항

사이트의목적에따른페이지선정이달라야한다. 주목적위주로선정.

일반적인사이트

메인페이지1depth 메뉴* 온라인서식(폼) 포함메뉴* 게시판메뉴 (읽기, 쓰기, 목록)* 그래프포함메뉴* 테이블표포함메뉴* 멀티미디어콘텐츠포함메뉴* 탭메뉴포함메뉴* 웹애플리케이션포함메뉴* 팝업, 레이어포함메뉴* 전자문서포함메뉴

자동 평가 : 웹 접근성 평가를 위해 사용하는 자동평가 도구는 매우 편리하며, 시간과 노력을 줄일 수 있다. 그러나접근성준수여부에대한결정은 전문가에의한수동진단을통해가능하다.

무료툴 : K-Wah, N-WAX, PAJET, OpenWAX, 등

인터넷뱅킹

메인페이지1depth 메뉴공인인증로그인메뉴계좌조회메뉴계좌이체메뉴* 공통메뉴

쇼핑몰

메인페이지1depth 메뉴로그인/회원가입메뉴상품상세페이지구매프로세스전체메뉴결제메뉴* 공통메뉴

스크린리더단축키 :

장애인 테스트 꼭 필요한가?

1. 웹접근성개선프로젝트고려사항

웹 접근성은 시각, 청각, 지체, 언어, 인지, 신경 장애를 포함해 다양한 장애인이 함께이용할 수 있도록 최소한의 기준을 마련한 것이다. 그중 시각장애인은신체적인 제약으로 웹을 이용하는데 가장 어려움을 겪고 있는 계층의 하나이므로 스크린리더를 통한 실제 시각장애인 전맹 테스트를 하는 것이 접근성에 관한 한 좀 더 효과적인 해결책을 찾아내고 실행하는데 도움이 된다. 비장애인 디자이너나 개발자가 스크린리더 테스트를 하는 경우가 있는데 스크린리더를 사용하려면 복잡한 프로그램 설정에 대한 이해와 적절한 훈련이 필요하다. 시각장애인이 실제로 스크린리더를 어떻게 사용하는지에 대한 이해가 없다면 테스트 과정에서 잘못된 결론을 내릴 수 있다. 비장애인 테스트 만으로 접근성 결과를 내리려 하지말고 참조만 하는 것이 바람직하다.

설명 입력 키

프로그램 실행 Ctrl + Alt + S

프로그램 종료 Insert + F4

문서 제목 읽기 Ctrl + Shift + T

문서 처음으로 Ctrl + Home

문서 끝으로 Ctrl + End

설명 입력 키

이전 줄로 ↑

다음 줄로 ↓

이전 단어로 Ctrl + ←

다음 단어로 Ctrl + →

연속 읽기 Ctrl + F11

설명 입력 키

다음 헤딩 Ctrl + F6

이전 헤딩 Ctrl + Shift + F6

다음 목록 Ctrl + I

다음 테이블 Ctrl + F3

링크만 따로 보기 Ctrl + L

참고 백남중 센스리더 핫키 : http://njpaiks.egloos.com/2828268

2.1 민간 기업 프로젝트 개선 사례

2. 분야별해결사례

차트 및 이미지의 대체텍스트

숨은 텍스트 제공 방법.selector { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }

텍스트를 display:none일 경우 보조기기 및 사용자 설정에 따라 읽지 않을 수 도 있으므로 visibility, width, height 속성들을

이용하여 화면에 안나오게 하는 방법입니다.

예를 들면 너비와 높이를 1px 으로 설정한 다음 overflow:hidden 처리하면 화면낭독기도 접근할 수 있습니다.

Q

2.1 민간 기업 프로젝트 개선 사례

2. 분야별해결사례

시각장애인이 읽을 수 없는 특수문자 ‘o’ 은?

웹 페이지에서 가능 여부를 전달하는 내용을 숫자 ‘0’으로 표기하면 스크린리더로 접근 시 의미 전달이 어려우므로 ‘가능’

텍스트 표기 또는 특수문자의 ○로 표기해야 함. (센스리더에서 특수문자 읽어주기 설정 ‘활성화’하면 특수문자를 읽을 수

있음.)

Q

‘o’, ‘O’, ‘0’, ‘○’

2.1 민간 기업 프로젝트 개선 사례

2. 분야별해결사례

콘텐츠 명도 대비에서 텍스트 평가 방법은?

인증마크 평가 시 명도 대비는 글자 주위 가장 진한 영역을 기준으로 한다. 그라데이션의 경우 가장 진한 부분을 배경색으로

한다.

Q전경색

배경색

명도대비는 디자인의 제약이다?

2.1 민간 기업 프로젝트 개선 사례

2. 분야별해결사례

외부 오픈 API 지도 사용 시 대체 텍스트 처리 방법은?

외부 API 지도의 접근성이 떨어진다면 해당 콘텐츠 바로 직전에 콘텐츠를 건너뛸 수 있는 링크를 추가하거나 스크린리더가

접근하지 않도록 처리하고 대체 콘텐츠를 통해 동일한 정보를 제공한다. 웹 사이트 내 접근성가이드 또는 정책안내에 외부

오픈 API는 접근성이 떨어지니 건너뛰기 링크를 통한 대체 텍스트를 참고하라는 안내를 포함한다.

Q

12

2.1 금융권 프로젝트 개선 사례

2. 분야별해결사례

금융 웹사이트에서 가상 키보드의 접근성은?

보안성이 없지만 직접 입력 방식을 제공하여 마우스에만 의존하는 방식으로 구현하지 않으면 장애인도 사용이 가능하여

접근성이 보장됨.

Q

직접 입력 사용자의 보안성은?

2.1 금융권 프로젝트 개선 사례

2. 분야별해결사례

서식제어요소의 웹접근성

CSS/Javascript 를 이용하여 서식제어요소의 디자인을 바꾸는 사례가 많으나 위와 같이 스타일 변경이 제한된 서식 제어

요소들의 디자인을 변경하면 키보드 또는 스크린리더기가 접근할 수 없어 시각장애인이 사용할 수 없게 된다.

Q

(가능)

2.1 금융권 프로젝트 개선 사례

2. 분야별해결사례

마우스 스크롤 인터페이스 제공 시 대체안을 반드시 제공하자

O 마우스의 스크롤 또는 초점의 변화만으로 콘텐츠 내용이 변경되거나 다음단계로 실행되지 않도록 [적용버튼]과 같이

대체안을 제공한다.

Q

웹접근성준수는인증마크를획득하면모든것이해결된다?

웹페이지확대또는음성서비스기능은제공할필요없다?

웹접근성업데이트후자동평가도구로만준수여부를체크해도된다?

사용자가올린동영상이나콘텐츠는접근성을준수할 필요가없다?

이메일로발송되는콘텐츠는접근성을준수할필요가없다?

지속 가능한 웹 접근성을 방해 하는 것들?

3. 지속가능한웹접근성

전직원의접근성지향교육

검사도구와방식교육및배포

접근성강화가이드제작

장애관련전문가고용또는제휴

접근성전문가에의한평가

분기별주기적인품질검토

지속 가능한 웹 접근성 만들기

3. 지속가능한웹접근성

내부 외부

1. 게시판공지사항업데이트시체크사항

2. 이벤트업데이트시체크사항

3. 첨부파일(PDF) 업로드시체크사항

4. 외부콘텐츠업데이트(CP) 시체크사항

유지보수 담당부서 주의 사항

3. 지속가능한웹접근성

웹 접근성 품질 인증 매년 유지 해야 하는가?

정부는 2013년 5월 14일 청와대에서 박근혜 대통령이 참가한 가운데 국무회의를 열고 이 같은 내용을 담은 `국가정보화기본법 일부 개정법률 공포안` 등 법률 공포안 57건을 의결했다. 이번에 통과한 `국가정보화 기본법 개정 공포안`은 6개월 후 시행될 예정이다. 장애인과 고령자의 정보접근 및 이용 편의를 위해 미래부 장관은 인증기관을 지정해 웹 접근성 품질인증을 실시할 수 있다. 웹 접근성 품질 인증을 받은 곳은 대통령령에정한 바에 따라 해당 서비스 제공시 웹접근성 품질인증 내용을 표시하거나 홍보할 수 있다.

출처 : 전자신문 2013. 05. 14

타자기는 맹인 여성을 위해 만들어졌다고 한다.

출처 : http://wordisseur.com/

장애인을 위한 디자인이다수를 위한 혁신으로!

감사합니다

㈜에스앤씨랩 공동대표 장선영 / cs.snclab@gmail.com

133-831 서울 성동구 성수2가 277-43 아크밸리 성수IT센터 805호 ｜02-2201-9928｜www.snclab.kr