1 / 22

웹 접근성 및 사례

웹 접근성 및 사례. 2011.11.04 UI 개발팀 육선도. 목차. 웹 접근성의 정의 웹 접근성 국내외 동향 웹 접근성의 중요성 웹 접근성을 고려 해야하는 이유 시각장애인의 컴퓨터 활용 나만의 사례. 간 단. 중점. 정의.  팀 버너스 리 (Tim Berners-Lee ) 월드 와이드 웹 (World Wide Web) 을 창시자 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간

neviah
Télécharger la présentation

웹 접근성 및 사례

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. “감사합니다”

More Related