웹 접근성 및 사례2011.11.04

UI 개발팀 육선도

목차

웹 접근성의 정의

웹 접근성 국내외 동향

웹 접근성의 중요성

웹 접근성을 고려 해야하는 이유

시각장애인의 컴퓨터 활용

나만의 사례

간단

중점

정의 팀 버너스 리 (Tim Berners-Lee)

› 월드 와이드 웹 (World Wide Web) 을 창시자› 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간› 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야

한다

잘못 된 이해

› 장애인에 국한 되어 있는 문제라고 생각 함 .› 접근성 이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수

있도록 만드는 것› 접근성 자체는 장애인에게 가장 많은 혜택이 있는 것은 사실 .

웹 접근성 국내외 동향 미국

› 재활법 508 조 › 연방기관이 전자 및 정보기술을 개발 , 조달 , 유지 , 사용할 때› 유럽연합 , 영국 , 호주 , 등이 적용하고 있는 W3C 지침을 기반으로 자국 실정에 맞는

지침을 개발하여 활용› 연방정부 조달시장에서의 접근성 준수 강제화를 통한 실질적인 접근성 인식 제고 의무부과

영국

› 관련법률로 장애인 차별금지법 있음 .› 고용 , 상품 , 시설 , 서비스 제공 , 교육 , 교통수단 등에 대한 장애인 차별금지를 포괄적으로

규정 하고 있음 .› 2002 년 5 월 : Code of Practice 마련 – 누구나 접근 할 수 있도록 웹사이트를 개발해야

함 .› 2004 년 10 월 : 예외규정 철폐 – 모든 사업장에 적용 의무부과› 웹 접근성 인증마크 제도 시행

웹 접근성 국내외 동향 일본

› 웹 접근성 국가표준 제정› 평가도구 (JWAS) 개발› 기업중심으로 웹 접근성 인식제고 노력 (IBM 등 )› 웹 접근성 전문 컨설팅 기업 등장

우리나라

› 장애인 , 노인 등을 위한 정보통신 접근성 향상권장 지침 .› 정보통신 접근성 향상 표준화 포럼 조직 – 2002 년 5 월

연구보고서 및 홍보물 발간 세미나 , 토론회 등 개최

› KWCAG2.0 개발 : 인식의용이성 , 운용의용이성 , 이해의용이성 , 견고성

웹 접근성의 중요성 장애인 현황

› 출처 : http://www.index.go.kr/egams/stts/jsp/potal/stts/PO_STTS_IdxMain.jsp?idx_cd=2768

웹 접근성의 중요성 접근성이 주목 받고 있는 이유 (사회학)

IT의 이용과 활용이 세계적 관심사로 부상한 지금 누구든 정보의 보고(寶庫) 인터넷을 자유롭고 편리하게 사용할 수 있는 환경을 만들자는 것이다.

보편적 서비스로서의 인터넷은 그래서 더욱 의미가 있다. 장애인, 노인 등 소외계층이 차별받지 않고 인터넷을 이용할 수 있는지에 따라 정보격차, 문화격차, 교육격차, 경제격차를 초래하는 시대기 때문이다.

정보화진흥원 조사결과에 따르면 장애인의 인터넷 이용률은 비장애인 수준에 근접하고 있다. 비장애인의 81.8%에 육박하는 78.3%에 달하는 수준이다. 조사 결과로만 보면 아무런 불편 없이 사용하는 것으로도 비친다.

실제로도 그럴까. 지난해 중앙행정기관과 광역지방자치단체 등의 웹 사이트 118개를 평가한 결과 인터넷 웹 콘텐츠 접근성 지침을 모두 준수한 곳은 한 곳도 없었다.

사용에 상당한 제약이 따를 것임은 자명하다. 인터넷을 이용하고 있고, 이용하고자 하는 의지가 있는데도 불구하고 제약이 따른다는 것은 상식과도 반하는 것이다.

그렇다면 왜 그럴까. 인식 부재의 탓이 클 것이다. 더 정확하게 표현하면 웹 접근성의 장점을 제대로 이해하지 못하기 때문이다.

국내 웹 기획자 및 개발자의 99%가 웹 접근성 준수의 필요성에 공감하고 있지만, 실제 웹 접근성을 고려해 개발한 사람은 13%에 불과하다는 것이다.

› -출처 : 박승정 통신방송산업부 부국장 발행일 2011.09.26 칼럼 -

표준 & 접근성 고려해야 하는 이유 장차법 - 장애인 차별금지와 권리구제를 위한 법률에 의하여 표준을 지켜야 한다 .

사용자 누구에게나 균등하게 기회를 제공 할 수 있다 .

장애인 , 노인 등을 포함한 이용자들의 확대 .

비용절감의 효과 ( 법률에 따라 웹사이트를 개편할 시 , 운영적 측면 장기적인 관점으로 볼 때 , 전문 인력을 양성하는 것이 바람 직함 .)

검색엔진에서의 선택 우위 › 검색엔진이 잘 읽어낼 수 있도록 만들어진 사이트는 표준을 지킨 사이트 이다 .

유지보수의 편리함› 비표준 사이트를 표준 사이트로 변경하는 것은 새로 사이트를 만드는 것 보다 어렵다

웹사이트의 빠른 속도› 파일 사이지는 비표준 사이트가 더 작을지 몰라도 , 용량의 큰 부분을 찾이하고 있는 css 파일이 사용자의 PC 에

저장됨으로 오히려 속도는 표준화를 지킨 사이트가 빠르고 가벼운 사이트라 할수 있다 .

웹사이트 제작의 편리함› 표준을 지키는 것이 협업을 하기에도 소스코드를 재활용 하기에도 좋으며 , 구조와 디자인이 변경되어 작업 시간을 단축

시킬 수 있다

시각 장애인의 컴퓨터활용 전맹

› 컴퓨터활용 법 화면을 확대하여 사용 소리로 듣고 컴퓨터를 실행 점자단말기를 활용하여 컴퓨터 내용을 점자 디스플레이로 확인하면서 실행

› 내 컴퓨터에서의 활용 내 컴퓨터에서 드라이브 , 폴더 , 파일을 찾아가면 현재 위치와 파일 명칭을 정확히 음성 출력 현재 경로를 알기 위해서는 제목 표시줄 읽기 현재 위치한 것을 알기 위해서는 포커스된 객체 읽기 각종 응용 프로그램의 주메뉴는 alt키를 누른 다음 좌우 방향키로 주메뉴 간 이동을 하고 , 아래

방향키로 해당 주메뉴의 부메뉴를 부른 후 선택을 하여 활용 영 , 0, 永 과 같이 음성 출력이 같은 경우에는 스크린 리더의 기능을 활용하여 현재 글자의 정확한 뜻을 파악할 수 있습니다 ( 영 , 이응 여 이응 , 0, 숫자 0, 영 ,길영 , 회수 5)

› 인터넷에서의 활용 링크 목록 대화상자를 활용 , 폼 간의 이동 기능 ( 보완해 주는 것이 탭 키를 활용한 이동입니다 .) 헤딩 간의 이동을 활용 문서 내의 내비게이션이 많아 주 내용으로 바로 이동하기 위해서는 skip navigation 을 사용 이미지에 Alt text 를 제공하지 않으면 " 이십조 칠백십이억 칠백구만 칠백삼십 쩜 오백오십구 .gif

이미지 " 처럼 음성 출력

시각 장애인의 컴퓨터활용 저시력인

› 컴퓨터활용 법 확대경 ( 손잡이형 , 스탠드형 , 조명이 있는 것과 없는 것 포함 ) 망원경 ( 손잡이형 , 안경장착형 , 전시야형 ) 확대독서기

저시력인들의 컴퓨터 활용상 화면 색상 (배색 ) 과 크기에 관하여 어려움을 갖는다 . Windows 에서 제공하는 마우스 포인터 중에서 반전 (특대 ) 을 사용하면 마우스가 크고 , 뚜렷하게 색상 대비가 되어 저시력인들이 효과적으로 활용할 수 있다 .

화면 색상에 관한 어려움은 Windows 에서 가지고 있는 고대비를 활용 ( 인터넷에서 전혀도움안됨 ) 외국 화면 확대 프로그램은 이러한 문제를 해결하기 위하여 색깔 반전 기능을 제공

화면의 크기 문제는 Windows 에서 제공하는 돋보기를 활용하거나 , 특별한 화면 확대 프로그램을 사용 (눈의 정도에 따라 고대비를 활용하지 않는 경우와 고대비를 같이 활용하여 사용하는 경우 )

› 개선 저시력이 인터넷을 제대로 활용하기 위해서는 글자 크기 , 화면 배색 등을 자유롭게 변경할 수 있는

방법이 모색 되어야함 .

나만의 사례 KBO GNB 수정 전 ( 수정 전 디자인 )

› Sub메뉴 아래 선수검색 있어 , 마우스 오버시 가려지게 됨

KBO GNB 수정 후 ( 수정 후 디자인 )

› 검색 영역의 위치를 옮겨 마우스 오버 시 가려지는 현상 없음 .

나만의 사례 한국교육학술정보원 에듀넷 – 에듀마켓 (http://www.edunet4u.net/edumarket)

전문가 평가 ( 고운소프트 )

목표 : 전문가평가 평균 90% 이상 접근성 유지

결과 : 실패

나만의 사례 웹 접근성 지침영역별 완성도

나만의 사례 이미지의 의미나 목적을 이해할 수 있도록 적절한 대체 텍스트를 제공

나만의 사례 시간제한이 있는 콘텐츠를 제공할 경우 , 시간제어 기능을 제공

› 마크업 순서 : 이미지 -> 롤링버튼› 음성출력 : 플래시덕 _ 학교링크 , YBM 원격교육연수원…링크 , …. 링크 1링크 2링크 3…링크 6

나만의 사례 해당 페이지를 잘 이해할 수 있도록 페이지 제목을 제공

올바른 예 )

› 페이지전체에 :: 꾸밈기호삭제

› <title>브랜드관 에듀마켓</title> or <title> 에듀마켓</title> or <title> 이용안내 | 에듀마켓 </title>

나만의 사례 포털 3 사 조사

나만의 사례 온라인 서식을 제공할 경우 , 레이블을 제공

<th> 에 제공되고 등록일자에 label을 제공 하도록 하며<input> 요소의title 속성의 내용이 보다 자세한 설명이 필요할 것 으로 보인다 .

올바른 예 )

<th scope="row"> 등록일자 </th>

<td><input type="text“ title=“ 등록일자 기간 검색 시작일 " > ~ <input type="text" title=“등록일자 기간검색종료일 " value="2011-01-14" style="width: 132px;" name="endDate" id="endDate" class="appliInput">

나만의 사례 자바스크립트에만 의존한 링크

› 자바스크립트가 미지원 환경에서도 링크는 역할을 수행 할 수 있어야 한다 .

› 자바스크립트 미지원 환경 에서 링크를 이용할 수 없다는 안내는 미지원 환경에 대한 대체방안이 아니다 .

생각 장애는 선천적인 경향 보다 후천적인 경향이 크다고 한다 . 앞일은 아무도 예상 할 수

없고 , 그 누가 됐던 간에 예외 일 수 없다 .

작은 노력으로 사회의 보탬이 된다는 생각으로 일하고 자부심을 갖자 .

다른 사람에게 도움을 주기 위해서는 용기가 필요하다 . 지하철 에서의 자리양보 부터 실천 해보자 . 그러면 우리는 용기 있는 사람이 될 것 이다 .

장애인이 웹을 이용 하는 것 은 소비자가 늘어 나는 것이다 . 마케팅 전략이 될 수 도 있는 것을 비장애인의 편의를 위해 버리지 말자 .

이미 알고 있는 내용이다 하더라도 , 지속적이고 , 반복적으로 되새김으로써 , 남들에게 가르칠 수 있고 , 남들보다 조금 더 뛰어 날수 있어야 한다 .

참고 시각 장애인의 컴퓨터 활용 동영상 ( 전맹 , 저시력인 ) – 웹 접근성 연구소

› http://www.wah.or.kr/Accessibility/blind1.asp

주요 정보통신 보조기기 – 웹 접근성 연구소› http://www.wah.or.kr/Accessibility/support.asp

한국형 웹 콘텐츠 접근성 지침 2.0 (2010.12.31) – 웹 접근성 연구소› http://www.wah.or.kr/_Upload/pds/%

ED%95%9C%EA%B5%AD%ED%98%95%20%EC%9B%B9%20%EC%BD%98%ED%85%90%EC%B8%A0%20%EC%A0%91%EA%B7%BC%EC%84%B1%20%EC%A7%80%EC%B9%A8%202.0_KICS_OT-10_0003R1_20101231.pdf

웹 접근성 홍보 리플렛 – 웹 접근성 연구소› http://www.wah.or.kr/_Upload/pds2/%EC%9B%B9%EC%A0%91%EA%B7%BC%EC

%84%B1%ED%99%8D%EB%B3%B4%EB%A6%AC%ED%94%8C%EB%A0%9B.PDF

“ 감사합니다”