Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
웹 접근성 프로젝트
현장에서 발생하는 문제점과 해결
방안
㈜에스앤씨랩 공동대표 장선영 / cs.snclab@gmail.com
133-831 서울 성동구 성수2가 277-43 아크밸리 성수IT센터 805호 |02-2201...
프로젝트 개선 시 고려 사항
분야별 해결 사례
지속 가능한 웹 접근성
01.
02.
03.
목차
개선 대상 범위 파악부터
어디서부터 시작할까?
1. 웹 접근성 개선 프로젝트 고려 사항
• XHTML, CSS 같은 웹 표준을 준수하여 개발되었나?
• 콘텐츠 유형 체크 (내부개발, 외부개발)
• 사이트의 규모와 복잡성...
우선순위를 정하고 수정하라!
1. 웹 접근성 개선 프로젝트 고려 사항
우선순위 결정 시 가장 중요한 것은 웹 사이트에 대한 사용자 경험에 가장 크게 영향을 미치는 영역을 먼저 진단하고 수
정한다. 접근성 장애 요소가 전...
패턴 진단 시 주의 사항
1. 웹 접근성 개선 프로젝트 고려 사항
사이트의 목적에 따른 페이지 선정이 달라야 한다. 주목적 위주로 선정.
일반적인 사이트
메인 페이지
1depth 메뉴
* 온라인 서식(폼) 포함 메뉴
*...
스크린리더 단축키 :
장애인 테스트 꼭 필요한가?
1. 웹 접근성 개선 프로젝트 고려 사항
웹 접근성은 시각, 청각, 지체, 언어, 인지, 신경 장애를 포함해 다양한 장애인이 함께
이용할 수 있도록 최소한의 기준을 마련...
2.1 민간 기업 프로젝트 개선 사례
2. 분야 별 해결 사례
차트 및 이미지의 대체텍스트
숨은 텍스트 제공 방법
.selector
{ position:absolute;
width:0; height:0; font-
si...
2.1 민간 기업 프로젝트 개선 사례
2. 분야 별 해결 사례
시각장애인이 읽을 수 없는 특수문자 ‘o’ 은?
웹 페이지에서 가능 여부를 전달하는 내용을 숫자 ‘0’으로 표기하면 스크린리더로 접근 시 의미 전달이 어려우...
2.1 민간 기업 프로젝트 개선 사례
2. 분야 별 해결 사례
콘텐츠 명도 대비에서 텍스트 평가 방법은?
인증마크 평가 시 명도 대비는 글자 주위 가장 진한 영역을 기준으로 한다. 그라데이션의 경우 가장 진한 부분을 배...
2.1 민간 기업 프로젝트 개선 사례
2. 분야 별 해결 사례
외부 오픈 API 지도 사용 시 대체 텍스트 처리 방법은?
외부 API 지도의 접근성이 떨어진다면 해당 콘텐츠 바로 직전에 콘텐츠를 건너뛸 수 있는 링크를 ...
2.1 금융권 프로젝트 개선 사례
2. 분야 별 해결 사례
금융 웹사이트에서 가상 키보드의 접근성은?
보안성이 없지만 직접 입력 방식을 제공하여 마우스에만 의존하는 방식으로 구현하지 않으면 장애인도 사용이 가능하여
접근...
2.1 금융권 프로젝트 개선 사례
2. 분야 별 해결 사례
서식제어요소의 웹접근성
CSS/Javascript 를 이용하여 서식제어요소의 디자인을 바꾸는 사례가 많으나 위와 같이 스타일 변경이 제한된 서식 제어
요소들의 ...
2.1 금융권 프로젝트 개선 사례
2. 분야 별 해결 사례
마우스 스크롤 인터페이스 제공 시 대체안을 반드시 제공하자
O 마우스의 스크롤 또는 초점의 변화만으로 콘텐츠 내용이 변경되거나 다음단계로 실행되지 않도록 [적용...
웹접근성준수는인증마크를획득하면모든것이해결된다?
웹페이지확대또는음성서비스기능은제공할필요없다?
웹접근성업데이트후자동평가도구로만준수여부를체크해도된다?
사용자가올린동영상이나콘텐츠는접근성을준수할 필요가없다?
이메일로발송되는콘텐츠...
전 직원의 접근성 지향 교육
검사 도구와 방식 교육 및 배포
접근성 강화 가이드 제작
장애 관련 전문가 고용 또는 제휴
접근성 전문가에 의한 평가
분기별 주기적인 품질 검토
지속 가능한 웹 접근성 만들기
3. 지속 가능...
3. 지속 가능한 웹 접근성
웹 접근성 품질 인증 매년 유지 해야 하는가?
정부는 2013년 5월 14일 청와대에서 박근혜 대통령이 참가한 가운데 국
무회의를 열고 이 같은 내용을 담은 `국가정보화기본법 일부 개정법률 ...
타자기는 맹인 여성을 위해 만들어졌다고 한다.
출처 : http://wordisseur.com/
장애인을 위한 디자인이
다수를 위한 혁신으로!
감사합니다
㈜에스앤씨랩 공동대표 장선영 / cs.snclab@gmail.com
133-831 서울 성동구 성수2가 277-43 아크밸리 성수IT센터 805호 |02-2201-9928|www.snclab.kr
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Sexual Harassment By School Employees
Next
Download to read offline and view in fullscreen.

4

Share

Download to read offline

웹접근성캠프강의 장선영 20130627_v1.0

Download to read offline

Related Audiobooks

Free with a 30 day trial from Scribd

See all

웹접근성캠프강의 장선영 20130627_v1.0

  1. 1. 웹 접근성 프로젝트 현장에서 발생하는 문제점과 해결 방안 ㈜에스앤씨랩 공동대표 장선영 / cs.snclab@gmail.com 133-831 서울 성동구 성수2가 277-43 아크밸리 성수IT센터 805호 |02-2201-9928|www.snclab.kr 2013.06.27(Thu)
  2. 2. 프로젝트 개선 시 고려 사항 분야별 해결 사례 지속 가능한 웹 접근성 01. 02. 03. 목차
  3. 3. 개선 대상 범위 파악부터 어디서부터 시작할까? 1. 웹 접근성 개선 프로젝트 고려 사항 • XHTML, CSS 같은 웹 표준을 준수하여 개발되었나? • 콘텐츠 유형 체크 (내부개발, 외부개발) • 사이트의 규모와 복잡성 체크 / 개선 대상 URL 목록 체크 • 개발 도구(언어) 및 개발 환경 체크 • 사이트는 템플릿 또는 콘텐츠 관리 시스템(CMS) 이용하여 만들어 졌는가? • 사용자가 참여하는 메뉴가 있는가? • E-book 과 같은 카탈로그 메뉴가 있는가? • PDF 와 같은 전자문서가 있는가? 별도의 뷰어로만 읽기를 제공하는가? •로 그인을 해야만 사용할 수 있는 메뉴가 있는가? 함께 시작하자! 웹접근성 : 진단 > 개선 > 진단 웹접근성 : 진단 > 개선 > 진단 웹접근성 : 진단 > 개선 > 진단 웹접근성 : 진단 > 개선 > 진단 웹접근성 분석 및 전략 기획 디자인 퍼블리싱 개발
  4. 4. 우선순위를 정하고 수정하라! 1. 웹 접근성 개선 프로젝트 고려 사항 우선순위 결정 시 가장 중요한 것은 웹 사이트에 대한 사용자 경험에 가장 크게 영향을 미치는 영역을 먼저 진단하고 수 정한다. 접근성 장애 요소가 전체 사이트에 산재하고 있는지 또는 특정 부분에 제한적으로 나타나는지 여부를 파악하여 개선 계획을 세운다. 전수 검사 : 사이트 내 모든 페이지를 진단하여 모든 장애 요소를 분석한다. 전문가에 의한 수동 검사로 시간이 많이 소요됨. 패턴 검사 : 대표적이며 주요한 영역에 초점을 맞춰 선별된 페이지들을 진단한다. 반복적 요소를 골라내어 한번만 진단함. 1. 메인페이지 장애에 미치는 영향력이 높고 수정이 쉬운 것 부터 수정 장애에 미치는 영향력이 적고 수정이 어려운 것을 나중에 수정 우선순위 범위 선정 대상 페이지 2. 거래를 마치기 위한 경로 3. 사이트의 목적에 기초한 페이지와 기능 5. 다른 시작점으로 가기 위한 경로 4. 경고를 포함한 빈번히 사용되는 페이지
  5. 5. 패턴 진단 시 주의 사항 1. 웹 접근성 개선 프로젝트 고려 사항 사이트의 목적에 따른 페이지 선정이 달라야 한다. 주목적 위주로 선정. 일반적인 사이트 메인 페이지 1depth 메뉴 * 온라인 서식(폼) 포함 메뉴 * 게시판 메뉴 (읽기, 쓰기, 목록) * 그래프 포함 메뉴 * 테이블 표 포함 메뉴 * 멀티미디어 콘텐츠 포함 메뉴 * 탭 메뉴 포함 메뉴 * 웹애플리케이션 포함 메뉴 * 팝업, 레이어 포함 메뉴 * 전자문서 포함 메뉴 자동 평가 : 웹 접근성 평가를 위해 사용하는 자동평가 도구는 매우 편리하며, 시간과 노 력을 줄일 수 있다. 그러나 접근성 준수 여부에 대한 결정은 전문가에 의한 수동 진단을 통 해 가능하다. 무료툴 : K-Wah, N-WAX, PAJET, OpenWAX, 등 인터넷뱅킹 메인 페이지 1depth 메뉴 공인인증 로그인 메뉴 계좌 조회 메뉴 계좌 이체 메뉴 * 공통메뉴 쇼핑몰 메인 페이지 1depth 메뉴 로그인/회원가입 메뉴 상품 상세 페이지 구매 프로세스 전체 메뉴 결제 메뉴 * 공통메뉴
  6. 6. 스크린리더 단축키 : 장애인 테스트 꼭 필요한가? 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
  7. 7. 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
  8. 8. 2.1 민간 기업 프로젝트 개선 사례 2. 분야 별 해결 사례 시각장애인이 읽을 수 없는 특수문자 ‘o’ 은? 웹 페이지에서 가능 여부를 전달하는 내용을 숫자 ‘0’으로 표기하면 스크린리더로 접근 시 의미 전달이 어려우므로 ‘가능’ 텍스트 표기 또는 특수문자의 ○로 표기해야 함. (센스리더에서 특수문자 읽어주기 설정 ‘활성화’하면 특수문자를 읽을 수 있음.) Q ‘o’, ‘O’, ‘0’, ‘○’
  9. 9. 2.1 민간 기업 프로젝트 개선 사례 2. 분야 별 해결 사례 콘텐츠 명도 대비에서 텍스트 평가 방법은? 인증마크 평가 시 명도 대비는 글자 주위 가장 진한 영역을 기준으로 한다. 그라데이션의 경우 가장 진한 부분을 배경색으로 한다. Q 전경색 배경색 명도대비는 디자인의 제약이다?
  10. 10. 2.1 민간 기업 프로젝트 개선 사례 2. 분야 별 해결 사례 외부 오픈 API 지도 사용 시 대체 텍스트 처리 방법은? 외부 API 지도의 접근성이 떨어진다면 해당 콘텐츠 바로 직전에 콘텐츠를 건너뛸 수 있는 링크를 추가하거나 스크린리더가 접근하지 않도록 처리하고 대체 콘텐츠를 통해 동일한 정보를 제공한다. 웹 사이트 내 접근성가이드 또는 정책안내에 외부 오픈 API는 접근성이 떨어지니 건너뛰기 링크를 통한 대체 텍스트를 참고하라는 안내를 포함한다. Q 12
  11. 11. 2.1 금융권 프로젝트 개선 사례 2. 분야 별 해결 사례 금융 웹사이트에서 가상 키보드의 접근성은? 보안성이 없지만 직접 입력 방식을 제공하여 마우스에만 의존하는 방식으로 구현하지 않으면 장애인도 사용이 가능하여 접근성이 보장됨. Q 직접 입력 사용자의 보안성은?
  12. 12. 2.1 금융권 프로젝트 개선 사례 2. 분야 별 해결 사례 서식제어요소의 웹접근성 CSS/Javascript 를 이용하여 서식제어요소의 디자인을 바꾸는 사례가 많으나 위와 같이 스타일 변경이 제한된 서식 제어 요소들의 디자인을 변경하면 키보드 또는 스크린리더기가 접근할 수 없어 시각장애인이 사용할 수 없게 된다. Q (가능)
  13. 13. 2.1 금융권 프로젝트 개선 사례 2. 분야 별 해결 사례 마우스 스크롤 인터페이스 제공 시 대체안을 반드시 제공하자 O 마우스의 스크롤 또는 초점의 변화만으로 콘텐츠 내용이 변경되거나 다음단계로 실행되지 않도록 [적용버튼]과 같이 대체안을 제공한다. Q
  14. 14. 웹접근성준수는인증마크를획득하면모든것이해결된다? 웹페이지확대또는음성서비스기능은제공할필요없다? 웹접근성업데이트후자동평가도구로만준수여부를체크해도된다? 사용자가올린동영상이나콘텐츠는접근성을준수할 필요가없다? 이메일로발송되는콘텐츠는접근성을준수할필요가없다? 지속 가능한 웹 접근성을 방해 하는 것들? 3. 지속 가능한 웹 접근성
  15. 15. 전 직원의 접근성 지향 교육 검사 도구와 방식 교육 및 배포 접근성 강화 가이드 제작 장애 관련 전문가 고용 또는 제휴 접근성 전문가에 의한 평가 분기별 주기적인 품질 검토 지속 가능한 웹 접근성 만들기 3. 지속 가능한 웹 접근성 내부 외부 1.게시판공지사항업데이트시체크사항 2.이벤트업데이트시체크사항 3.첨부파일(PDF)업로드시체크사항 4.외부콘텐츠업데이트(CP)시체크사항 유지보수 담당부서 주의 사항
  16. 16. 3. 지속 가능한 웹 접근성 웹 접근성 품질 인증 매년 유지 해야 하는가? 정부는 2013년 5월 14일 청와대에서 박근혜 대통령이 참가한 가운데 국 무회의를 열고 이 같은 내용을 담은 `국가정보화기본법 일부 개정법률 공 포안` 등 법률 공포안 57건을 의결했다. 이번에 통과한 `국가정보화 기본 법 개정 공포안`은 6개월 후 시행될 예정이다. 장애인과 고령자의 정보접 근 및 이용 편의를 위해 미래부 장관은 인증기관을 지정해 웹 접근성 품 질인증을 실시할 수 있다. 웹 접근성 품질 인증을 받은 곳은 대통령령에 정한 바에 따라 해당 서비스 제공시 웹접근성 품질인증 내용을 표시하거 나 홍보할 수 있다. 출처 : 전자신문 2013. 05. 14
  17. 17. 타자기는 맹인 여성을 위해 만들어졌다고 한다. 출처 : http://wordisseur.com/ 장애인을 위한 디자인이 다수를 위한 혁신으로!
  18. 18. 감사합니다 ㈜에스앤씨랩 공동대표 장선영 / cs.snclab@gmail.com 133-831 서울 성동구 성수2가 277-43 아크밸리 성수IT센터 805호 |02-2201-9928|www.snclab.kr
  • khjeoung

    Jan. 14, 2015
  • sunyoungjang1

    Nov. 20, 2014
  • kang2oon

    Nov. 7, 2013
  • kyoo119

    Aug. 4, 2013

Views

Total views

1,554

On Slideshare

0

From embeds

0

Number of embeds

42

Actions

Downloads

23

Shares

0

Comments

0

Likes

4

×