웹 접근성 및 사례

1. 웹 접근성 및 사례 2011.11.04 UI 개발팀 육선도

2. 목차 • 웹 접근성의 정의 • 웹 접근성 국내외 동향 • 웹 접근성의 중요성 • 웹 접근성을 고려 해야하는 이유 • 시각장애인의 컴퓨터 활용 • 나만의 사례 간단 중점

3. 정의 •  팀 버너스 리(Tim Berners-Lee) • 월드 와이드 웹 (World Wide Web)을 창시자 • 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간 • 웹 콘텐츠를제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다 • 잘못 된 이해 • 장애인에 국한 되어 있는 문제라고 생각 함. • 접근성 이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것 • 접근성 자체는 장애인에게 가장 많은 혜택이 있는 것은 사실.

4. 웹 접근성 국내외동향 • 미국 • 재활법508조 • 연방기관이 전자 및 정보기술을 개발,조달,유지,사용할 때 • 유럽연합,영국,호주, 등이 적용하고 있는 W3C 지침을 기반으로 자국 실정에 맞는 지침을 개발하여 활용 • 연방정부 조달시장에서의 접근성 준수강제화를 통한 실질적인 접근성 인식 제고 의무부과 • 영국 • 관련법률로 장애인 차별금지법 있음. • 고용,상품,시설,서비스제공,교육,교통수단등에 대한 장애인 차별금지를 포괄적으로 규정 하고 있음. • 2002년 5월 : Code of Practice 마련 – 누구나 접근 할 수 있도록 웹사이트를 개발해야 함. • 2004년 10월 : 예외규정 철폐 – 모든 사업장에 적용 의무부과 • 웹 접근성 인증마크 제도 시행

5. 웹 접근성 국내외동향 • 일본 • 웹 접근성 국가표준 제정 • 평가도구(JWAS)개발 • 기업중심으로 웹 접근성 인식제고 노력(IBM등) • 웹 접근성 전문 컨설팅 기업 등장 • 우리나라 • 장애인,노인 등을 위한 정보통신 접근성 향상권장 지침. • 정보통신 접근성 향상 표준화 포럼 조직 – 2002년 5월 • 연구보고서 및 홍보물 발간 • 세미나,토론회 등 개최 • KWCAG2.0 개발 : 인식의용이성, 운용의용이성, 이해의용이성, 견고성

6. 웹 접근성의 중요성 • 장애인 현황 • 출처: http://www.index.go.kr/egams/stts/jsp/potal/stts/PO_STTS_IdxMain.jsp?idx_cd=2768

7. 웹 접근성의 중요성 • 접근성이 주목 받고 있는 이유 (사회학) IT의 이용과 활용이 세계적 관심사로 부상한 지금 누구든 정보의 보고(寶庫) 인터넷을 자유롭고 편리하게 사용할 수 있는 환경을 만들자는 것이다. 보편적 서비스로서의 인터넷은 그래서 더욱 의미가 있다. 장애인, 노인 등 소외계층이 차별받지 않고 인터넷을 이용할 수 있는지에 따라 정보격차, 문화격차, 교육격차, 경제격차를 초래하는 시대기 때문이다. 정보화진흥원 조사결과에 따르면 장애인의 인터넷 이용률은 비장애인 수준에 근접하고 있다. 비장애인의 81.8%에 육박하는 78.3%에 달하는 수준이다.조사 결과로만 보면 아무런 불편 없이 사용하는 것으로도 비친다. 실제로도 그럴까. 지난해 중앙행정기관과 광역지방자치단체 등의 웹 사이트 118개를 평가한 결과 인터넷 웹 콘텐츠접근성 지침을 모두 준수한 곳은 한 곳도 없었다. 사용에 상당한 제약이 따를 것임은 자명하다. 인터넷을 이용하고 있고, 이용하고자 하는 의지가 있는데도 불구하고 제약이 따른다는 것은 상식과도 반하는 것이다. 그렇다면 왜 그럴까. 인식 부재의 탓이 클 것이다. 더 정확하게 표현하면 웹 접근성의 장점을 제대로 이해하지 못하기 때문이다. 국내 웹 기획자 및 개발자의 99%가 웹 접근성 준수의 필요성에 공감하고 있지만, 실제 웹 접근성을 고려해 개발한 사람은 13%에 불과하다는 것이다. • -출처 : 박승정 통신방송산업부부국장 발행일 2011.09.26 칼럼 -

8. 표준&접근성 고려해야 하는 이유 • 장차법- 장애인 차별금지와 권리구제를 위한 법률에 의하여 표준을 지켜야 한다. • 사용자 누구에게나 균등하게 기회를 제공 할 수 있다. • 장애인, 노인 등을 포함한 이용자들의 확대. • 비용절감의 효과 (법률에 따라 웹사이트를 개편할 시, 운영적 측면 장기적인 관점으로 볼 때, 전문 인력을 양성하는 것이 바람 직함.) • 검색엔진에서의 선택 우위 • 검색엔진이 잘 읽어낼 수 있도록 만들어진 사이트는 표준을 지킨 사이트 이다. • 유지보수의 편리함 • 비표준 사이트를 표준 사이트로 변경하는 것은 새로 사이트를 만드는 것 보다 어렵다 • 웹사이트의 빠른 속도 • 파일 사이지는 비표준 사이트가 더 작을지 몰라도, 용량의 큰 부분을 찾이하고 있는 css파일이 사용자의 PC에 저장됨으로 오히려 속도는 표준화를 지킨 사이트가 빠르고 가벼운 사이트라 할수 있다. • 웹사이트 제작의 편리함 • 표준을 지키는 것이 협업을 하기에도 소스코드를 재활용 하기에도 좋으며,구조와 디자인이 변경되어 작업 시간을 단축 시킬 수 있다

9. 시각 장애인의 컴퓨터활용 • 전맹 • 컴퓨터활용 법 • 화면을 확대하여 사용 • 소리로 듣고 컴퓨터를 실행 • 점자단말기를 활용하여 컴퓨터 내용을 점자 디스플레이로 확인하면서 실행 • 내 컴퓨터에서의 활용 • 내 컴퓨터에서 드라이브, 폴더, 파일을 찾아가면 현재 위치와 파일 명칭을 정확히 음성 출력 • 현재 경로를 알기 위해서는 제목 표시줄 읽기 • 현재 위치한 것을 알기 위해서는 포커스된 객체 읽기 • 각종 응용 프로그램의 주메뉴는alt키를 누른 다음 좌우 방향키로 주메뉴 간 이동을 하고, 아래 방향키로 해당 주메뉴의 부메뉴를 부른 후 선택을 하여 활용 • 영, 0, 永과 같이 음성 출력이 같은 경우에는 스크린 리더의 기능을 활용하여 현재 글자의 정확한 뜻을 파악할 수 있습니다 (영,이응 여 이응, 0, 숫자0,영,길영,회수5) • 인터넷에서의 활용 • 링크 목록 대화상자를 활용 , 폼 간의 이동 기능 (보완해 주는 것이 탭 키를 활용한 이동입니다.) • 헤딩 간의 이동을 활용 • 문서 내의 내비게이션이 많아 주 내용으로 바로 이동하기 위해서는 skip navigation을 사용 • 이미지에 Alt text를 제공하지 않으면 "이십조 칠백십이억 칠백구만 칠백삼십 쩜 오백오십구.gif 이미지" 처럼 음성 출력

10. 시각 장애인의 컴퓨터활용 • 저시력인 • 컴퓨터활용 법 • 확대경(손잡이형, 스탠드형, 조명이 있는 것과 없는 것 포함) • 망원경(손잡이형, 안경장착형,전시야형) • 확대독서기 • 저시력인들의 컴퓨터 활용상 화면 색상(배색)과 크기에 관하여 어려움을 갖는다. • Windows에서 제공하는 마우스 포인터 중에서 반전(특대)을 사용하면 마우스가 크고, 뚜렷하게 색상 대비가 되어 저시력인들이 효과적으로 활용할 수 있다. • 화면 색상에 관한 어려움은 Windows에서 가지고 있는 고대비를활용 (인터넷에서 전혀도움안됨) • 외국 화면 확대 프로그램은 이러한 문제를 해결하기 위하여 색깔 반전 기능을 제공 • 화면의 크기 문제는 Windows에서 제공하는 돋보기를 활용하거나, 특별한 화면 확대 프로그램을 사용 (눈의 정도에 따라 고대비를 활용하지 않는 경우와 고대비를 같이 활용하여 사용하는 경우) • 개선 • 저시력이 인터넷을 제대로 활용하기 위해서는 글자 크기, 화면 배색 등을 자유롭게 변경할 수 있는 방법이 모색 되어야함.

11. 나만의 사례 • KBO GNB 수정 전 (수정 전 디자인) • Sub메뉴 아래 선수검색 있어, 마우스 오버시 가려지게 됨 • KBO GNB 수정 후 (수정 후 디자인) • 검색 영역의 위치를 옮겨 마우스 오버 시 가려지는 현상 없음.

12. 나만의 사례 • 한국교육학술정보원 에듀넷– 에듀마켓(http://www.edunet4u.net/edumarket) • 전문가 평가 (고운소프트) • 목표 : 전문가평가 평균90% 이상 접근성 유지 • 결과 : 실패

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

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

15. 나만의 사례 • 시간제한이 있는 콘텐츠를 제공할 경우,시간제어 기능을 제공 • 마크업 순서 : 이미지 -> 롤링버튼 • 음성출력 : 플래시덕_학교링크, YBM원격교육연수원…링크, …. 링크1링크2링크3…링크6

16. 나만의 사례 • 해당 페이지를 잘 이해할 수 있도록 페이지 제목을 제공 • 올바른 예) • 페이지전체에:: 꾸밈기호삭제 • <title>브랜드관에듀마켓</title> or <title>에듀마켓</title> or <title>이용안내 | 에듀마켓</title>

17. 나만의 사례 • 포털 3사 조사

18. 나만의 사례 • <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"> • 온라인 서식을 제공할 경우 ,레이블을 제공

19. 나만의 사례 • 자바스크립트에만 의존한 링크 • 자바스크립트가 미지원 환경에서도 링크는 역할을 수행 할 수 있어야 한다. • 자바스크립트 미지원 환경 에서 링크를 이용할 수 없다는 안내는 미지원 환경에 대한 대체방안이 아니다.

20. 생각 • 장애는 선천적인 경향 보다 후천적인 경향이 크다고 한다. 앞일은 아무도 예상 할 수 없고, 그 누가 됐던 간에 예외 일 수 없다. • 작은 노력으로 사회의 보탬이 된다는 생각으로 일하고 자부심을 갖자. • 다른 사람에게 도움을 주기 위해서는 용기가 필요하다. 지하철 에서의 자리양보 부터 실천 해보자. 그러면 우리는 용기 있는 사람이 될 것 이다. • 장애인이 웹을 이용 하는 것 은 소비자가 늘어 나는 것이다. 마케팅 전략이 될 수 도 있는 것을 비장애인의 편의를 위해 버리지 말자. • 이미 알고 있는 내용이다 하더라도, 지속적이고, 반복적으로 되새김으로써, 남들에게 가르칠 수 있고, 남들보다 조금 더 뛰어 날수 있어야 한다.

21. 참고 • 시각 장애인의 컴퓨터 활용 동영상 (전맹, 저시력인) – 웹 접근성 연구소 • 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

22. “감사합니다”