퍼블리의 웹표준

2. 보편적설계(Universal Design)

2008-10-02T20:35:42Z

2. 보편적설계(Universal Design)
2.1 웹 보편적 설계의 원칙
2.2 웹 접근성의 개요
2.3 감성적 디자인

학습내용

- 웹 보편적 설계의 개념과 원칙을 알아본다.
- 웹 접근성에 대한 주요 정의, 웹 접근성의 구성 및 준수의 필요성, 관련제도 및 동향을 살펴본다.
- 감성적 디자인과 보편적 설계의 개념을 주요 사례를 통해 이해한다.

2.1 웹 보편적 설계의 원칙
2.1.1 Jacob Nielson의 보편적 설계 원칙
- Visibility of system status > 사용자에게 항상 현재위치와 조작에 대한 정보를 주어야 함
- Match between system and the real world > 시스템은 사용자가 상식적으로 이해할 수 있는 단어와 글, 레이블 등으로 구성되어 있어야 하며 자연스럽고 논리적인 명령 체계를 가지고 있어야 함
- User control and freedom >사용자가 실수로 시스템을 조작할 때 쉽게 원래 있던 곳으로 돌아오거나 원래의 조작을 쉽고 자유롭게 할 수 있도록 지원해야 함
- Consistency and standards > 동일한 상황이나 유사한 문서에 일관되고 표준화된 체계를 가지고 있어야 함
- Error prevention > 오류가 최대한 발생하지 않도록 주의 깊게 설계, 디자인 해야 함
- Recognition rather than recall > 사용자가 조작할 때 쉽게 인식할 수 있도록 시스템 사용에 대한 정보들이 잘보이도록 설계되어 있어야 함
- Flexibility and efficiency of use > 시스템의 조작에 대한 사용이 사용자의 입장에서 효율적이고 융통성이 있도록 설계되어야 함
- Aesthetic and minimalist design > 필요없는 비쥬얼이 자제되는 가운데 감각적이고 최소화된 디자인을 사용하고 있어야 함
- Help users recognize, diagnose, and recover from errors > 문제발생시 사용자들이 이해와 진단할 수 있는 에러 해결책을 지원해야 함
- Help and documentation > 사용자의 입장에서 쉽게 찾아볼 수 있는 도움말과 보충설명을 제공해야 함

2.2 웹 접근성의 개요
2.2.1 웹 접근성 개념
- 웹 접근성 이란?
• W3C WAI(2006a) & Thatcher,et.al.(2006) > 장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고(Robust)하게 웹 콘텐츠를 만드는 것
• Wikipedia(2006) > 표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(UserAgent) 를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것 ※ 장애인들이 사용하는 보조기술은 사용자 에이전트에 포함됨
• Microsoft(2002) > 접근성이란 접근을 가능하게 만드는 것으로, 모든 사용자들이 제품과 서비스를 사용할 수 있도록 만드는 것

2.2.2 웹 접근성의 구성요소
웹 접근성을 구성하는 요소(Components)는 크게 7가지로 구분될 수 있으며(W3C WAI,2006b), 각 구성요소는 독립적이기보다는 서로 밀접한 상관관계를 가지고 있음
1.콘텐츠(Contents)
인터넷을 통하여 전달되는 정보로 텍스트, 이미지, 음성, 구조나 표현을 위한 마크업 또는 코드(웹 접근성을 준수한 콘텐츠 제작 필요)
2.웹 브라우저, 미디어 플레이어 등 사용자 에이전트(User Agent)
웹상의 콘텐츠를 사용자들이 이용할 수 있도록 도와주는 도구(브라우저 등 사용자 에이전트 자체가 접근성을 보장해야 함)
3.보조기술(Assistive Technologies)
장애인, 노인 등이 컴퓨터나 인터넷을 활용하기 위해 사용하는 화면낭독 프로그램(Screen reader), 대체 키보드, 스위치, 스캐닝 소프트웨어, 화면확대 프로그램 등(보조기술 자체의 접근성 준수와 더불어 웹 접근성을 준수한 콘텐츠를 제대로 인식해야 함)
4.사용자(Users)
웹을 이용하는 사람(장애인, 노인 등 포함)
5.개발자(Developers)
디자이너, 코더(Coder), 저작자 등
6.저작도구(Authoring Tools)
웹 사이트를 제작할 수 있는 소프트웨어(웹을 저작하는 도구의 접근성 준수필요)
7.평가도구(Evaluation Tools)
웹 접근성 평가도구로 Bobby, A-Prompt, KADO-WAH 등

2.2.3 웹 접근성 준수의 필요성
1.규정과 법적 요구사항에 대한 준수
법적인 규정을 통해 웹 접근성 보장에 대한 동기를 유발 웹 사이트를 사용할 수 있는 이용자의 범위 확대 및 이를 통한 고객 수의 증가와 이윤발생 효과를 동시에 획득, 따라서 강제성을 가진 규정이라 하더라도 이를 준수함으로써 웹 사이트를 구축한 조직이나 단체에 결과적으로 많은 도움을 줄 수 있음
2.장애인, 노인 등을 포함한 다양한 범위의 이용자 확대
웹 접근성이 확보되면 웹 사이트를 효과적으로 이용할 수 있는 대상 고객 및 이용 환경의 범위 확대 가능 비즈니스 측면에서 볼 때, 웹 접근성에 대한 보장으로 고객들의 웹사이트 이용을 제한하는 장애요인들이 제거됨으로써 웹 사이트를 통한 매출증대 효과 인터넷을 통한 전자상거래, 교육 등의 새로운 수요 창출 가능
3.새로운 장소, 새로운 기기 개발 등 이용 상황의 확대
효과적으로 이용할 수 있는 인구의 증가 뿐만 아니라 새로운 장소와 새로운 기기 개발 등에서 별다른 조치 없이 사용이 가능 예를 들어, 웹 접근성을 고려한 웹 콘텐츠 제작 기법을 이해하고 이를 웹 사이트에 적용하게 되면, 현재의 최신기기 뿐만아니라 향후 등장하게 될 어떤 정보기기에서라도 큰 불편 없이 해당 웹 사이트의 콘텐츠를 사용자들이 이용 할 수 있다는 장점이 있음 또한 새로운 기기를 개발함에 있어서 인터페이스의 모호성을 줄일 수 있으므로 보다 활발한 기기의 개발이 가능
4.디자인 및 설계에 있어서의 효율성 제고
웹 접근성 수준을 향상시키면 웹 사이트의 디자인 및 작업 설계에 있어서 상당한 효과의 발휘 가능 이는 궁극적으로 검색엔진(Search Engine)의 색인과정에서도 편의성을 도모할 수 있고 이미지 및 멀티미디어 등의 검색에도 도움을 줄 수 있음 검색과 더불어 사이트 개편, 국내외 행정기관의 다국어 버전 제작의 경우에도 편리하며, 다른 언어 버전으로 사이트를 추가 제작할 때에도 편의성이 확보되는 장점
5. 비용 절감 효과
초기에는 접근성의 개념을 이해하고 이를 구현하기 위해 많은 비용과 시간이 소요되는 반면, 접근성 개선으로 사이트 제작 총 비용의 절감 효과 유도 접근성 향상으로 사용 편의성(Usability)도 확보될 수 있기 때문에 온라인 쇼핑의 매출 증가 및 사이트 운영에 필요한 비용의 감소를 유도 따라서 장기적인 관점에서 비용 절감 효과를 거둘 수 있으며, 접근성에 투자한 만큼 수익이 증대되는 효과를 기대할 수 있음
6. 홍보 효과 향상
어떤 기관이 제공하는 웹 콘텐츠가 웹 접근성을 고려한 것이라고 알려지게 되면 사이트의 주체가 되는 조직이나 단체의 이미지에 긍정적인 요인으로작용 기업의 사회적 책임(Corporate Social Responsibility)이 중요하게 부각되고 있는 시점에서 웹 접근성 준수를 통해 기업의 주요 홍보 수단으로 활용 가능 특히 웹을 통해 이윤을 창출하는 기업에 있어서는 다른 사회적인 공헌 활동 보다 우선적으로 자신의 웹 사이트 접근성을 제고하는 것이 보다 적극적인 사회공헌 활동이라고 할 수 있음
7.자발적 관심유도
웹 접근성 준수를 실천한 기업 및 개발자들은 초기에는 많은 어려움이 수반 될 수 있으나, 웹 접근성을 고민하지 않은 기업 및 개발자들에 비해 접근성에 대한 자발적인 관심의 증대를 유도 이를 통해 새로운 기술 환경이나 새로운 서비스를 개발할 수 있는 기회를 마련할 수 있는 장점이 존재 즉, 웹 접근성 준수를 실천해 보지 않고서는 웹 접근성 준수에 따르는 혜택을 얻을 수 없을 것이며, 조직 내 구성원들의 웹 접근성에 대한 자발적 관심 증대가 인터넷을 통한 새로운 상품과 서비스를 개발할 수 있는 토대가 될 수 있음
8.균등기회 보장
웹 접근성을 고려한 웹 사이트를 제작하게 되면 모든 사용자에게 균등하게 기회를 제공하게 되며, 이는 웹 사이트의 활용 범위와 활용 가능 상황을 확대 시켜 보다 많은 이용 기회를 부여 웹 사이트의 접근성을 준수한 디자인은 해당 조직이 새롭게 등장하는 기술을 이용할 수 있도록 준비시키는 조력자의 역할도 수행 또한 장애인에게 업무, 여가, 사회적 활동에 참여할 기회를 제공할 뿐만 아니라 보다 많은 사람들이 필요한 일을 보다 쉽게 처리할 수 있는 여건을 조성

2.2.4 웹 접근성 정책 동향
1. 미국
1990년 재정된 장애인법(American with Disabilities Act), 재활법(RehabilitationAct) 특히, 재활법 508조는 연방 우편업무를 포함하여 연방부처나 기구가 전자 및 정보기술을 개발, 조달, 유지, 사용할 때는 지나친 부담이 되지 않는 한 사용하는 기술의 종류에 상관없이 장애를 지닌 연방정부 직원도 비장애인과 동등한 수준으로 정보와 자료에 접근하여 이용할 수 있도록 규정
2. 미국의 재활법 508조(www.section508.gov)
3. 영국
1995년 제정된 장애인 차별금지법(Disability Discrimination Act) 고용, 상품, 시설, 서비스 제공, 교육, 교통수단 등에 대한 장애인 차별금지를 포괄적으로 규정 특히 19조에서는 서비스 제공자가 일반인에게 제공되는 서비스를 장애인에게 제공을 거절하는 것, 장애인에게 제공되는 서비스의 수준이나 방식을 일반인과 달리 하는 것, 장애인에게는 일반인과 다른 조건을 요구하는 것 등을 불법으로 간주함
4. 한국
웹 접근성 향상을 위한 법률로 “정보화촉진기본법”, “정보격차해소에관한 법률”, “장애인복지법” 등이 있음 정보화촉진기본법 (일부개정 2005.12.30)
• 제 16조 (보편적 역무의 제공과 복지정보통신의 실현) 2항에서는 장애인, 노령자, 저소득자 등 사회적 약자들이 자유로운 정보접근의 기회를 누리고 정보화의 혜택을 향유할 수 있도록 하기 위하여 정보통신기기의 사용편의성에 필요한 대책을 강구하라고 규정 정보격차해소에 관한 법률 (일부개정 2005.12.30)
• 제 7조 (장애인∙노령자의 정보통신서비스 이용 보장)에서는 국가, 지방자치단체 및 기타 공공단체가 장애인∙노령자들이 정보통신 서비스를 이용할 수 있도록 필요한 시책을 강구하라고 제시
• 장애인복지법 (일부개정 2005.7.29) 제 20조(정보에의 접근)에서는 국가와 지방자치단체가 장애인이 원활하게 정보에 접근하고 그 의사를 표시할 수 있도록 하기 위하여 전기통신 및 방송시설 등을 개선하도록 노력해야 한다고 규정
• 장애인∙노인∙임산부 등의 편의증진에 관한 법률 (일부개정 2005.3.31) 4조(접근권)에서는 장애인 등이 시설과 설비 및 정보에 다른 사람의 도움없이 동등하게 이용하고 접근할 수 있는 권리를 가진다고 규정 정보격차해소에관한법률시행령 제9조에 의거하여 “장애인∙노인 등의 정보통신 접근성 향상을 위한 권장지침” 을 제정하여 고시 (2002년 1월 정보통신부)
• 장애인∙노인 등의 정보통신 접근성 향상을 위한 권장지침
   - 1장 제1조 (목적) : 이 지침은 장애인∙노인 등 정보통신기기, 소프트웨어 및 컨텐츠와 정보통신서비스 활용에 어려움을 겪는 자가 쉽게 접근하여 활용할 수 있도록 제조업자 및 서비스 제공자에게 권장함을 목적으로 제정됨
   - 1장 제6조 (국가 및 지방자치단체 등에의 권장) : 국가 및 지방자치단체, 기타 공공기관은 무리한 부담이 되지 않는 한 정보통신제품 구매와 정보통신 서비스 제공시 장애인∙노인 등의 사용이 가능한 정보통신제품과 정보통신서비스를 우선적으로 채택하고, 또한 인터넷을 통하여 정보를 제공함에 있어서 장애인∙노인 등이 접근하고 이용할 수 있도록 웹 문서 제작을 권고함
   - 1장 제7조 (통신사업자에의 권장) : 무리한 부담이 되지 않는 한 유선 및 무선 음성전화 서비스를 제공함에 있어서 청각 및 언어장애를 가진 사용자를 위하여 통신중계서비스 제공, 시각장애를 가진 사용자를 위하여 화면에 사용된 중요한 의미를 제공하는 그래픽정보를 음성출력장치의 이용이 가능한 텍스트 형식의 정보와 함께 제공, 청각장애를 지닌 사용자를 위하여 중요한 의미를 전달하는 음성정보를 시각으로 인지할 수 있는 텍스트 형식의 정보도 함께 제공함을 명시함
   - 2장 (정보통신제품과 정보통신서비스의 기능에 대한 설계 지침) : 9조(손 또는 팔 동작의 보완), 10조(반응시간의 보완), 11조(시력의 보완 및 대체), 12조(색상 식별능력의 보완), 13조(청력의 보완 및 대체), 14조(음성입력의 대체), 15조(인지능력의 보완)을 명시함
   - 3장 (웹 문서에 관한설계 지침) : 16조(그래픽 및 청각 정보의 보완), 17조(색상 식별 능력의 보완), 18조(반응시각 및 움직임의 보완), 19조(독립적인 접근), 20조(적절한 문서 형식의 사용), 21조(프레임의 사용), 22조(표의 사용), 23조(외국어 사용), 24조(탐색과 이동), 25조(새로운 기술의 적용)를 명시함

2.2.5 웹 접근성 표준화 동향
1. 월드 와이드 웹 컨소시엄 (W3C)
- 1994년 10월에 설립되어 웹 관련 기술에 대한 표준을 제정
- W3C의 활동 및 작업은 크게 6개 분야로 구성
• 1.구조 영역(Architecture Domain)
• 2.상호작용 영역(Interaction Domain)
• 3.기술 및 사회 영역(Technology & Society Domain)
• 4.웹 접근성 영역(Web Accessibility Domain)
• 5.품질 보증(Quality Assurance) 활동
• 6.특허 정책(Patent Policy)
- 장애인 등의 웹 접근성을 제고하기 위하여 웹 접근성 이니셔티브(WAI: Web Accessibility Initiatives, 1997)를 출범
- 웹 접근성 이니셔티브(WAI)는 웹 표준 제정을 위해 6개의 워킹 그룹을 구성하여 표준화 작업을 추진
• 1. 교육 & 홍보 워킹그룹(Education and Outreach Working Group): 웹 접근성 솔루션에 대한 교육, 교육자료 등의 개발
• 2. 웹 저작도구 워킹그룹(Authoring Tools Working Group): 웹 저작도구에 필요한 지침, 기술, 지원자원 등의 개발
• 3. 평가 및 수정도구 워킹그룹(Evaluation and Repair Tools Working Group): 웹 사이트의 접근성을 평가하고 좀 더 접근 가능한 웹 사이트로 수정하기 위한 기술과 툴의 개발
• 4.프로토콜 & 포맷 워킹그룹(Protocols and Formats Working Group) : 접근성을 위한 모든 W3C 기술의 검토
• 5.사용자 에이전트 워킹그룹(User Agent Working Group) : 웹 브라우저와 미디어 플레이어를 포함하는 사용자 도구들(user agents)을 위한 지침, 기술, 지원 자원 등의 개발
• 6.웹 콘텐츠 워킹그룹(Web Content Working Group) : 텍스트, 이미지, 양식, 사운드 등 웹 사이트 상의 정보인 웹 콘텐츠의 제작 지침, 기술 등의 개발
2. W3C 웹 접근성 관련 주요한 표준
- 웹 콘텐츠 접근성 지침(WCAG: Web Content Accessibility Guidelines) 1.0
• 1999년 5월 제정
• 웹 콘텐츠 제작자들이 웹을 제작함에 있어 신체적으로 불편한 사람도 이용할 수 있도록 웹 콘텐츠 제작방법을 제시
• 14개의 지침(Guidelines)과 65개의 검사항목(Checklists)으로 구성
- 사용자 에이전트 접근성 지침(UAAG: User Agent Accessibility Guidelines) 1.0
• 2002년 12월 제정
• 웹을 이용하기 위해 필요한 웹 브라우저, 멀티미디어 플레이어 등의 사용자 에이전트(Useragent)들도 신체적 불편이 있는 사람들을 배려하여 제작할 수 있도록 관련 표준을 제공
• 총 12개의 지침으로 구성
- 저작도구 접근성 지침(ATAG: Authoring Tools Accessibility Guidelines) 1.0
• 2000년 2월 제정
• 웹 콘텐츠를 제작할 수 있는 저작도구를 개발하는 개발자 및 접근성 준수 저작 인터페이스를 만드는 개발자를 돕기 위해 제정된 표준
• 7개 지침에 총 28개 검사항목으로 구성
3. W3C 웹 접근성 이셔티브 웹 사이트
4. 미국
재활법(Rehabilitation Act) 준수를 위하여 기술표준을 제정(2000) 제정된 기술표준 중 §1194.22인 ‘웹 기반 인트라넷과 인터넷 정보 및 응용 프로그램’에서 웹 접근성 제고를 위한 16개 지침을 제정∙공포하여 미국의 모든 연방정부 홈페이지가 이를 준수
5. 미국 재활법 508조 웹 콘텐츠 접근성 표준
(a) 텍스트가 아닌 요소에도 해당하는 텍스트 요소가 반드시 제공되어야 한다.(“alt”, “longdesc”를 사용하거나 요소 내용 안에 표시한다).
(b) 멀티미디어에는 동등한 대체 요소가 멀티미디어 내부에 합성되어야 한다.
(c) 웹 문서에 표시된, 색상을 이용한 정보는, 색상이 없는 상태에서도 판독할 수 있어야 한다. 예를 들어 문맥을 통해서나 마크업으로 표시되어야 한다.
(d) 문서는 연결된 스타일 시트를 불러오지 않고도 읽을 수 있어야 한다.
(e) 서버 측의 이미지맵의 각 활성화된 부분마다 별도의 텍스트 링크가 지정되어야 한다.
(f) 이미지맵의 각 부분을 기하학적 모양으로 지정할 수 없을 경우가 아니면, 서버 측의 이미지맵 대신 클라이언트 측의 이미지맵을 제공해야 한다.
(g) 데이터 테이블의 행과 열 헤더를 반드시 지정해야 한다.
(h) 행과 열의 헤더에 있어서 2개 이상의 논리 수준을 갖는 데이터 테이블에서는 마크업을 사용하여 데이터 셀과 헤더 셀을 연결해야 한다.
(i) 프레임은 프레임 확인과 이동을 쉽게 하기 위하여 텍스트로 이름을 지정해야 한다.
(j) 웹 문서는 스크린이 2Hz이상 55Hz 이하의 주파수로 깜빡이는 일이 없도록 작성해야 한다.
(k) 어떤 웹 사이트가 이 장의 조항을 준수하도록 작성하기 위해 다른 방법이 없을 경우 정보와 기능을 동등하게 제공하는, 텍스트만으로 작성된 별도의 웹 문서를 함께 제공해야 한다. 텍스트만 으로 작성된 웹 문서의 내용은 원래의 문서내용이 업데이트 될 때마다 함께 업데이트해야 한다.
(l) 웹 문서에서 스크립트 언어를 사용하여 내용을 표시하거나 인터페이스 요소를 사용할 경우 스크립트가 제공하는 정보를 기능적 텍스트로 표시하여 보조 기기로 판독할 수 있게해야 한다.
(m) 웹 문서에서 내용 판독을 위해 애플릿, 플러그인, 기타 다른 응용 프로그램을 클라이언트 시스템에 요구하는 경우 해당 문서에는 §1194.21의 (a)항부터 (l)항을 준수하는 플러그인 이나 애플릿을 제공하는 주소를 링크해야 한다.
(n) 전자 양식을 사용하고 온라인 상태에서 작성하도록 하는 경우 사용자가 전자 양식을 작성 및 제출하고 안내문 및 지시문을 이해하는데 필요한 정보, 필드 요소, 기능 등을 접근하기 위해 보조 기술을 사용할 수 있어야 한다.
(o) 반복되는 이동 링크를 건너뛸 수 있는 방법을 사용자들에게 제공해야 한다.
6. 일본 공업규격협회 산하 정보기술표준화센터(INSTAC)에“정보기술분야 공통 및 소프트웨어 제품의 접근성 향상에 관한 표준화 조사위원회”를 설치하고 접근성 관련 3가지 규격을 마련
- 제1부: 공통지침(JIS X 8341-1:2004)
- 제2부: 정보처리장치(JIS X 8341-2:2004)에 관한 일본공업규격
- 제3부: 웹 콘텐츠(JIS X 8341-3:2004)에 관한 일본공업규격 제정
- 웹 접근성 관련 표준인 JIS X 8341-3은 9개 지침과 세부 검사항목(39개)으로 구성
7. 일본의 웹 접근성 관련 표준 JIS X8341-3 개요
1. 규격 및 사양
   - 웹 콘텐츠에 관련된 기술 규격(HTML 표준 등) 및 사양, 그리고 문법에 맞게 제작
   - 특정 사용자 에이전트(User Agent)에 의존한 요소를 사용하지 않음
2. 구조 및 표시
   - Style Sheet를 활용하여 문서구조와 표현을 분리
   - 표 작성시에는 가능한 단순한 구조로 만들고, 적절한 기호(Caption, th, 등) 를 사용, Layout용 테이블을 가급적 배제하라
   - Page Title에는 이용자가 page 내용을 식별할 수 있는 명칭을 제공
   - Frame을 최소한 사용하고, 사용시에는 역할이 명확히 드러나도록 배려할 것
3. 조작 및 입력
   - 특정된 단일 수단에 의한 조작에 의존하지 않고, 적어도 키보드로 모든 조작이 가능 해야 함
   - 입력란을 사용시 무엇을 입력하면 되는지 알기 쉽게 표시할 뿐만 아니라 조작하기 쉽게 만들 것, 입력시간 제한을 설정하지 말고, 시간제한이 있으면 사전에 알려야함 page의 윗부분 또는 일부를 자동적으로 갱신하거나 다른 page로 이동, 또는 새로운 page를 열어서는 안됨, 위치, 표시방법 및 표기의 일관성 유지
4. 비텍스트정보
   - 이미지는 모든 이용자가 이미지 내용을 정확히 이해할 수 있도록 대체 정보를 제공
   - 콘텐츠 내용을 이해, 조작하기 위해 필요한 음성 정보에는 청각을 이용하지 않아도 이해할 수 있는 텍스트 대체 정보를 제공해야 함
   - 접근이 불가능한 Object, 프로그램 등에는 이용자가 그 내용을 정확히 이해하여 조작할 수 있도록 텍스트 등 대체 정보를 제공
5. 색채 및 형상
   - 웹 콘텐츠 내용을 이해, 조작하기 위해 필요한 정보는 색채에만 의존하여 제공해서는 안됨
   - 웹 콘텐츠 내용을 이해, 조작하기 위해 필요한 정보를 모양 또는 위치만으로 제공해서는 안됨
   - 배경색과 전경색은 충분히 고려하여 식별하기 쉬운 배색을 제공
6. 글자
   - 글자 크기 및 글꼴은 필요에 따라 이용자가 변경할 수 있도록 제공
   - 글꼴 색은 배경색 등을 배려하여 보기 편한 색을 지정하는 것이 바람직
7. 음(音)
   - 자동적으로 음을 재생하는 것은 바람직하지 않으며, 자동적으로 재생할 경우에는 재생하고 있는 음을 명시해야 함
   - 음은 이용자가 제어할 수 있도록 제공하는 것이 바람직
8. 속도
   - 변화, 이동하는 영상 또는 텍스트는 그 속도, 색채, 광도 변화에 주의하여 제작
   - 빠른 주기의 화면 점멸은 피하여 제작
9. 언어
   - 언어 지정이 가능할 경우에는 자연언어에 대응한 언어코드를 지정
   - 사용자 입장에서 어려울 것이라고 판단되는 외국어는 많이 사용하지 않는 것이 바람직하며, 처음 기재할 때 이를 자세히 설명해야 함
   - 표현을 위해 단어 가운데 공백 또는 줄을 삽입하지 말것
8. 한국
1. 2002년 1월, 정보통신부 고시로「장애인∙노인등의정보통신접근성향상을 위한권장지침」을 제정
2. 2003년 12월, 정보 통신 접근성 향상 표준화 포럼을 중심으로 “인터넷 웹 콘텐츠 접근성 지침 1.0”을 마련
3. 2005년 12월, 국가표준(한국정보통신표준: KICS)으로 제정 “인터넷 웹 콘텐츠 접근성 지침 1.0”은 W3C의 WCAG 1.0과 WCAG 2.0 초안 및 미국 재활법 508조를 기반으로 국내 웹 기반 환경을 고려하여 재구성
4. 특히 국내 웹 개발자 및 관리자의 부담을 최소화하기 위해 국제 지침에서 중요시되는 항목을 중점적으로 고려하였으며 국내에서 개발된 화면낭독 프로그램(Screen Reader)과의 호환성을 검토
9. 인터넷 웹 콘텐츠 접근성 지침 1.0의 개요
1. 텍스트 아닌 콘텐츠(non-text contents) 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어 있어야 한다.
2. 시간에 따라 변화하는 영상매체는 해당 콘텐츠와 동기되는 대체 매체를 제공해야 한다.
3. 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.
4. 이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하거나 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.
5. 콘텐츠를 구성하는 프레임의 수는 최소한으로 하며, 프레임을 사용할 경우에는 프레임별로 제목을 붙여야 한다.
6. 콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.
7. 키보드 (또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.
8. 웹 콘텐츠는 반복적인 네비게이션 링크(repetitive navigation link)를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.
9. 실시간 이벤트나 제한된 시간에 수행하여야 하는 활동 등은 사용자가 시간에 구애받지 않고 읽거나, 상호작용을 하거나 응답할 수 있어야 한다.
10. 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.
11. 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.
12. 온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등, 서식과 관련한 모든 정보를 제공해야 한다.
13. 스크립트, 애플릿 또는 플러그 인(plug-in) 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의 내용을 사용자에게 전달해줄 수 있을 경우에만 사용하여야 한다.
14. 콘텐츠가 항목 1에서 13에 이르는 13개 검사 항목을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면 텍스트만의 콘텐츠를 제공하는 웹 페이지(또는 웹 사이트)를 별도로 제공해야 한다.

2.3 감성적 디자인
2.3.1 감성적 디자인의 개요
감성디자인이란 사용자의 진짜 가치를 추구하는 제품을 디자인하는 것 디자인프로세스는 가치로부터 기능과 형태를 추론해내고, 제품요소와 그 특성을 결정짓는 프로세스로 진행 여기에서 가치란 기능적 가치일 수도 있고, 취향이나 심미성, 인간적 요소의 충족 등에 대한 감성적 가치일 수도 있는 가치는 사용자의 제품에 대한 니즈로 연결되고, 궁극적으로는 제품의 구체적 속성에 의해 충족될 수 있음 사용자의 감성을 만족시키며 한 걸음 더 나아가 기대수준을 뛰어넘어 심리적 감흥을 일으키는 디자인을 감성디자인이라고 정의할 수 있음

2.3.2 감성적 디자인의 사례
L 전자의 감성 디자인 컴퓨터
A 사의 감성 디자인 휴대용 단말기(i pod touch)

* 과제
개인과제
- 지난 주에 수행한 장애인 IT 체험을 근거로 웹 접근성 준수의 필요성에 대하여 본인의 의견을 정리해 보자
- 실생활에서 감성적 디자인의 개념에 근거한 사례를 알아보자

* 참고문헌
- 웹 접근성 전문교육 교재, 한국정보문화진흥원, 2006, 2007
- 웹 접근성 준수 실무 세미나, 한국정보문화진흥원, 2006
- 정보통신 접근성 향상 표준화 포럼 http://www.iabf.or.kr
- 국내외 행정기관의 웹 접근성 준수실태 및 개선방안, 현준호 김석일, 2006
- 일본의 전자정부 및 웹 접근성 정책동향, 한국정보문화진흥원, 2006
- 제 2 회 웹 접근성 경진대회 개발자 교육과정 교재, 한국정보문화진흥원, 2007
- 민간부문의 웹 접근성을 어떻게 높일 것인가 토론회 자료집, 한국정보문화진흥원, 2006
- http://www.w3.org/TR/WCAG10
- http://en.wikipedia.org/wiki/Web_accessibility
- http://www.w3.org/WAI/intro/accessibility.php
- http://www.w3.org/WAI/intro/components

tag : 교안

신현석님, 현준호님 인터뷰

2008-10-01T18:22:26Z

국내의 웹 접근성은 어느정도일까. 장애를 가졌든, 노인이든 누구나 웹을 통해 세상과 만날 수 있도록 하는 것이 웹 접근성의 기본 개념이다. 2008년4월11일 '장애인차별금지 및 권리구제 등에 관한 법률(이하 장차법)'이 발효됐다.

이 법률 시행령에는 '정보통신ㆍ의사소통에서의 정당한 편의 제공의 단계적 범위 및 편의의 내용' 항목을 구체화하고 있다. 정보통신 영역에서도 장애라는 이유로 차별을 받아서는 안된다는 내용이다.

시각 장애를 가지고 있는 김모씨는 얼마전 음성합성 소프트웨어를 자신의 컴퓨터에 구축했다. 보이지 않는 자신의 세계를 음성이라는 수단을 통해 보이는 세상과 만나보기 위해서였다.

그러나 김씨는 많은 업체들의 인터넷 서비스에서 이를 원활하게 이용할 수 없다는 사실을 알게 됐다. 웹 접근성이란 개념을 받아들이지 않은 채 장애를 가진 이들에게 국내 업체들의 배려는 거의 없었기 때문이다.

한국정보문화진흥원 웹접근 기획팀 현준호 부팀장은 "웹 접근성은 업체가 구축하는 것이 아니라 장애를 가진 이들이 설치한 소프트웨어를 통해 서비스를 이용할 수 있도록 해 주는 개념"이라고 지적했다.

즉 인터넷 서비스를 구축할 때 HTML 표준만 지켜주더라도 웹 접근성의 50~60%는 담보된다고 설명했다. 이 마저도 국내에서는 제대로 운영되고 있지 않다는 것을 말해주고 있다.

◆관련 법률에 따라 공공기관은 2009년 4월부터 적용해야

2008 년 발효된 장차법에 따라 정부 등 공공기관은 오는 2009년 4월11일부터 관련 법률이 정한 서비스를 제공해야 한다. 관련 법 제21조 제1항에 따라 '누구든지 신체적ㆍ기술적 여건과 관계없이 웹사이트를 통하여 원하는 서비스를 이용할 수 있도록 접근성이 보장돼야 한다'는 내용을 담고 있다.

장애를 가진 이들이 공공기관 웹 사이트에 접근했을 때 무리없이 이용할 수 있도록 시스템을 갖춰야 한다는 내용이다. 그동안 공공기관은 웹 접근성과 관련된 교육을 시행해 왔다.

지난 2005년부터 구 정보통신부에서 웹 접근성 지침을 국가표준으로 만들어 공공기관에 권고해 왔다. 그리고 공공기관의 웹 접근성 실태조사와 웹 접근성 품질마크제도를 통해 공공기관들이 웹 접근성에 나설 수 있도록 장려해 왔다.

한국정보문화진흥원은 지난 2005년부터 공공기관을 대상으로 '웹 접근성 실태조사'를 벌여 왔다. 중앙행정기관과 공공기관 등이 웹 접근성을 준수하고 있는지 또 개선돼야 할 사항은 무엇인지 등을 파악하기 위한 목적이었다.

또 관련 공무원등에 대한 교육도 병행했다. 2005년부터 지금까지 3천여명에 달하는 공무원들이 웹 접근성과 관련된 교육을 받았다. 이런 상황이다 보니 공공기관의 경우 웹 접근성이 많이 좋아졌다.

현준호 부팀장은 "공공기관의 경우 교육과 실태조사 등을 통해 많은 부분 웹 접근성이 보장되고 있다"며 "문제는 민간기업과 많은 사람들이 이용하는 인터넷 서비스 회사들"이라고 지적했다.

◆민간기업, 웹 접근성 불이행?→ 처벌!

이 번 장차법의 내용 중 웹 접근성을 보장하지 않았을 때 처벌할 수 있는 조항이 명시돼 있어 관심을 모은다. 앞서 언급한 시각 장애인 김씨가 자신이 구축한 음성합성 소프트웨어로 특정 사이트를 이용할 수 없을 때 김씨는 곧바로 해당 회사를 대상으로 소송을 제기할 수 있다.

장차법 제49조(차별행위)에는 "이 법에서 금지한 차별행위를 행하고 그 행위가 악의적인 것으로 인정되는 경우 법원은 차별을 한 자에 대하여 3년 이하의 징역 또는 3천 만원 이하의 벌금에 처할 수 있다"고 명시했다. '악의적인 것'은 ▲차별의 고의성 ▲차별의 지속성 및 반복성 ▲차별 피해자에 대한 보복성 ▲차별 피해의 내용 및 규모로 규정했다.

웹 에이전시 시도우(示道友 www.cidow.com)의 웹표준연구센터 신현석 센터장은 "민간기업의 경우 웹 접근성에 대한 인식이 아직 많이 부족한 것이 사실"이라며 "개정된 법령에 따라 앞으로 필수적으로 웹 접근성에 대한 시스템을 고려해야 한다"고 강조했다.

신 센터장은 "오는 2013년까지 민간기업도 웹 접근성에 대한 시스템을 구축해야 하고 이를 위해 지금부터 어떤 부분들을 구체적으로 실시해야 하는지 검토해야 할 것"이라고 말했다.

한 국정보문화진흥원도 민간기업에 대한 웹 접근성 인식 제고를 위한 단계적 절차에 나설 계획이다. 현준호 부팀장은 "웹표준을 일컫는 W3C(World Wide Web Consortium)의 항목을 반영만 하더라도 웹 접근성의 많은 부분이 해결된다"고 설명했다.

한국정보문화진흥원은 올해부터 민간기업 개발자 들을 대상으로 웹 접근성 교육을 시작할 예정이다. 매년 200명의 개발자를 대상으로 웹 접근성 교육을 통해 해당업체가 자연스럽게 시스템을 구축할 수 있도록 한다는 방침이다.

현 부팀장은 "여전히 국내 민간기업의 경우 웹 접근성을 형식적으로만 생각하는 것이 대부분"이라며 "형식 보다는 내용적인 측면에서 장애를 가진 이들에게 제공할 수 있는 질적 시스템이 필요하다"고 말했다.

나아가 그는 "대기업의 경우 사회공헌 활동을 많이 하고 있다"며 "사회공헌의 제일 먼저는 자사의 제품과 서비스를 장애인들이 쉽게 쓰고 느낄 수 있도록 하는 것"이라고 강조했다.

출처 : http://itnews.inews24.com/php/news_view.php?g_serial=334953&g_menu=020300 :->아이뉴스24

tag : 장애인차별금지법, 장차법

longdesc 와 D 링크 사용

2008-10-01T17:37:04Z

위와같은 이미지에 대한 대체텍스트를 제공하고자 할때 2가지 방법이 있다.

1. 컨텐츠가 있는 이미지를 컷팅해서 태그를 이용한 대체텍스트 제공방법

2. longdesc 와 D Link 를 이용한 별도페이지 이동을 통한 대체텍스트 제공방법

1의 경우보다 2의 경우가 효과적인 이유는 작업시간의 절약도 있을 수 있으나, 본인이 원하는 정보만을 별도의 페이지에 보여줌으로써 방해받지 않는 정보획득이 용이하다는 것이 장점이다.

우선 사용방법은 아래와 같다.

<p>

</p>

그리고 긴설명이 들어가는 페이지에는 해당 체계도에 대한 설명을 가능한 이해가 쉽게 넣어준다.

이 문서는 장애인 등록절차를 설명한다.

장애인은 거주지 읍면동기관에 증명사진 3매를 지참하여 장애인등록신청을 한다.

장애인등록신청을 받은 거주지 읍면동 기관은 장애검진 의료기관에 장애인진단 의뢰를 한다.

장애인은 장애검진 의료기관에서 장애검진을 실시한다.

장애검진을 완료한 의료기관은 장애인이 거주하는 거주지 읍면동 기관에 장애진단서를 통보한다.

거주지 읍면동은 최종확인된 장애진단서를 기준으로 하여 장애인으로 등록을 완료하고 장애인에게 통보한다.

장애인 등록절차 페이지로 이동합니다.

구미시청 메인 페이지로 이동합니다.

실제적용 페이지로 이동

tag : longdesc, d-link

form 마스터

2008-10-01T14:25:05Z

본 페이지는 Form Element에 대한 HTML4 규격 한글 번역문이다.

1. 사전 선택 된(pre-selected) 선택 사항

아래 예제에서, 사용자가 7가지 소프트웨어 항목으로 부터 설정을 선택을 할 수 있는 메뉴를 만들었다. 첫번째와 두번째 항목은 사전 선택 된 항목이나 사용자가 선택을 해제 할 수 있다. 나머지 항목들은 미리 선택되지 않다. size 애트리뷰트는 사용자가 7가지 선택 사항들 중에서 선택 할 수 있슴에도 불구하고, 메뉴가 4 열(row) 만을 갖도록 지정하였다. 다른 선택 사항들은 굴리기(scroll) 기능을 통하여 선택 할 수 있다.

구룹핑(grouping)은 다음과 같이 표현된다.

 PortMaster 3
     3.7.1
     3.7
     3.5
 PortMaster 2
     3.7
     3.5
 IRX
     3.7R
     3.5R

브라우져에서는 다음과 같이 표현된다.

::TOP::

2. LABEL 엘레멘트(element)

LABEL 엘레멘트는 제어(control)에 정보를 첨부하는데 사용 될 수 있다. 각 LABEL 엘레멘트는 정확하게 하나의 폼 제어와 연관된다.

for 애트리뷰트는 다른 명시적 제어(control)의 라벨과 연관한다. for 애트리뷰트의 값은 연관 된 제어 엘레멘트의 id 애트리뷰트의 값과 같아야한다. 한개 이상의 LABEL이 for 애트리뷰트를 통하여 복수 참조로 생성 된 같은 제어에 연관 될 수 있다.

이 예제는 두개의 정렬 된 텍스트 입력 제어들과 그들에 연관 된 라벨들을 갖는 표(table)를 만든다. 각 라벨은 정확하게 하나의 텍스트 입력과 연관된다.

이름
성

이 예제는 위의 예제에 LABEL 엘레멘트를 포함 한 것이다.

이름:
성:
전자 우편:
남
여

다른 제어(control)와 암시적으로 라벨에 연관 시키기 위해서, 제어 엘레멘트는 LABEL 엘레멘트의 내용 안에 있어야 한다. 이런 경우, LABEL은 하나의 제어 엘레멘트를 포함 할 수 있다. 라벨 자체는 연관 된 제어의 앞이나 뒤에 위치 할 수 있다.

이 예제에서, 두개의 라벨을 두개의 텍스트 입력 제어에 암시적으로 연관시켰다.

이름 성

이 기술은 라벨이 한 칸(cell)에 있고, 연관된 제어가 다른 칸에 있는 표(that)가 배치(layout)에서, 사용 될 때는 사용 될 수 없음에 주의하라.

LABEL 엘레멘트가 focus(초점을 갖게)되면, 이는 초점(focus)을 연관 된 제어에 옮기게된다. 아래 접속키(access key)의 예를 참조하라.

라벨은 보는 브라우저, 음성 합성 장치에서 읽는 경우 등 사용도구에 따라 다르게 표현 될 수 있다.

::TOP::

3. 폼에 구조 추가: `FIELDSET`와 `LEGEND` 엘레멘트

FIELDSET 엘레멘트는 제작자가 제어들과 라벨들을 구룹 지울 수 있게 한다. 제어(control)들의 구룹 지우기는 보는 사용도구에서 항해 탭(navigation tabbing) 설정과 음성(speech-oriented) 사용도구에서 음성 항해를 동시에 지원하므로, 사용자가 그들의 목적을 이해하기 편하게 해 준다. 이 엘레멘트의 사용은 문서에 더 쉽게 접근하기 위 한 것이다.

LEGEND 엘레멘트는 제작자가 FIELDSET의 제목(caption)을 지정 할 수 있게 한다. 범례(legend)는 FIELDSET가 보이지 않는 표현을 할 때 접속성을 향상시킨다.

예제에서, 의사의 사무실에서 채울 폼을 만들었다. 이는 개인 정보, 의료 기록, 현재의 투약등 세 항목들로 나누어, 각 항목은 적정한 정보를 입력 할 수 있도록 제어를 갖는다.


 
 

   개인 정보

     이름: 
     성: 
     주소: 
     ... 개인 정보 계속 ...
 
 

   의료 기록
      Smallpox
      Mumps
      Dizziness
      Sneezing
     ... 의료 기록 계속 ...
 

 
   현재 투약
   현재 어떤 약을 드십니까?
     네
     아니오
   만일 현재 약을 드시면 아래 적어 주십시오:

개인 정보이름: 성: 주소: ... 개인 정보 계속 ...

의료 기록 Smallpox Mumps Dizziness Sneezing ... 의료 기록 계속 ...

현재 투약현재 어떤 약을 드십니까? 네 아니오 만일 현재 약을 드시면 아래 적어 주십시오:

이 예제에서, 각 FIELDSET 안에서 엘레멘트를 스타일쉬트로 정렬하고, 색상과 폰트 정보, 사용자가 현재 투약을 입력하면, 폼의 보는 표현 향상시킬 수 있다.

::TOP::

4. 엘레멘트에 초점(focus) 놓기

HTML 문서에서, 엘레멘트는 활성화되고 임무를 수행하기 위하여, 사용자는 초점(focus)을 받아야한다. 예를 들어, 지정 된 연결로 가기 위하여 사용자는 A 엘레멘트로 연결을 활성화 시켜야한다. 마찬가지로, 텍스트를 입력시키기 위하여 TEXTAREA에 사용자는 초점을 주어야한다.

엘레멘트에 초점을 주석 위해서 몇가지 방법이 사용된다.

지정하는 장치(pointing device)로 엘레멘트를 지정한다.
키보드로 한 엘레멘트에서 다음으로 항해(navigate)한다. 사용자가 키보드로 문서를 항해하면 어느 엘레멘트가 초점(focus)을 받을 것인가 하는 순서를 지정하기 위하여, 문서의제작자는 탭 순서(tabbing order)를 정의 할 수 있다(탭에 의한 항해 참조). 선택되면, 엘레멘트는 키로 활성화 될 수 있다.
접속키(access key: "keyboard shortcut" 또는 "keyboard accelerator"라고도 함)로 엘레멘트를 선택.

4.1 탭에 의한 항해(tabbing navigation)

애트리뷰트의 정의

tabindex = number [대소문자 중립: CN]: 이 애트리뷰트는 현재 문서의 텝 순서(tabbing order)에서의 현재 엘레멘트의 위치을 지정하며, 그 값은 0과 32767 사이의 숫치 이어야한다. 사용도구는 앞에나오는 0들을 무시하여야 한다.

탭 순서(tabbing order)는 사용자가 키보드로 항해 할 때, 어떤 엘레멘트가 초점(focus)을 받을 것인가 하는 순서를 지정한다. 탭 순서는 엘레멘트 속에 다른 엘레멘트를 네스트(nest)로 포함 할 수 있다.

초점을 받은 엘레멘트는 사용도구에 의하여 다음 규칙을 따라 항해(navigate)한다.

tabindex 애트리뷰트를 지원하는 엘레멘트들과 양수로 지정 된 것으로 먼저 항해한다. 항해는 가장 낮은 tabindex 값을 갖는 엘레멘트로 부터 높은 값을 갖는 엘레멘트로 진행된다. 그 값은 순서적으로 될 필요가 없고 어떤 특정 한 수치로 시작 될 필요도 없다. 같은 tabindex 값을 갖는 엘레멘트에서는 그 문장에서 먼저 나온 순서로 항해한다.
tabindex 애트리뷰트가 지원되지 않거나 지원되나 그 값이 "0"으로 설정 된 엘레멘트들은 그 다음으로 항해한다. 이 엘레멘트들은 문장에서 글자가 나온 순서로 항해한다.
중지(disabled) 된 엘레멘트는 텝 순서에 참여하지 않는다.

A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA 엘레멘트는 tabindex 애트리뷰트를 지원한다.

이 예제에서, 텝 순서는 "field1"과 단추가 같은 tabindex을 사용하지만, "field1"가 문장의 뒤에 나오므로 BUTTON, INPUT 엘레멘트 순이다. 마지막으로 A 엘레멘트에 의하여 생성 된 연결이 된다.

폼(form)을 갖는 문서 ... 다른 텍스트 ...

W3C Web site로 가라. ... 다른 텍스트 ... ... 다른 텍스트 ...

... 다른 텍스트 ...

W3C Web site로 가라. ... 다른 텍스트 ... ... 다른 텍스트 ...

탭 키(tabbing key). 탭에 의한 항해(tabbing navigation)를 진행시키고, 엘레멘트의 활성화를 시키는, 실제 키 순서(key sequence)는, 예를 들어, "tab" 키가 항해에 사용되는가와 "enter" 키가 선택 된 것을 활성화(activate) 시키는데 사용되는가, 하는 사용도구의구성에 따라 다르다.

사용도구는 텝 순서(tabbing order)를 꺼꾸로 항해하도록 키(key) 순서를 정의 할 수도 있다. 텝 순서의 끝이나 시작에 도달하면, 사용도구는 시작이나 끝으로 순환시킬 수 있다.

4.2 접속키(access key)

애트리뷰트의 정의

accesskey = 글자 [대소문자 중립: CN]: 이 애트리뷰트는 엘레멘트에 접속키를 지정한다. 접속키는 문서 글자 세트의 한 글자이다.; 주의: 제작자는 접속키를 지정 할 때 예상 사용자의 입력 방법(method)을 고려하여야 한다.

엘레멘트에 지정 된 접속키(accesskey)를 누르면, 그 엘레멘트에 초점(focus)이 주어진다. 엘레멘트가 초점을 받았을 때의 작용은 엘레멘트에 따라 다르다. 예를 들어, A 엘레멘트에 의하여 지정 된 연결(link)을 사용자가 활성화(activate) 시키면, 사용도구는 일반적으로 연결시킨다. 사용자가 레디오 단추(radio button)를 활성화 시키면, 사용도구는 레디오 단추의 값을 변경시키고, 텍스트 필드를 활성화 시키면, 입력을 허용한다.

A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA 엘레멘트는 accesskey 애트리뷰트를 지원한다.

이 예제는 INPUT 제어(control)에 연관 된 라벨(label)에 접속키(access key) "U"를 설정한다. 접속키를 찍으면, 라벨에 초점오고, 연관 제어에 주어진다. 그러면 INPUT 지역에 텍스트를 입력 할 수 있게 된다.


 

  사용자

이 예제에서, 접속키(access key)가 A 엘레멘트에 의하여 지정 된 연결(link)로 되도록 정의하였다. 접속키를 찍으면 사용자를 다른 문서(이 예제에서는 목차로)로 연결 할 것이다.

 목차

접속키(access key)의 작동은 깔려있는 시스템에 따라 다르다. 예를 들어 MS Windows에서 작동하는 기계에서, 일반적으로 접속키를 "alt" 키(key)와 함께 눌러야 하고, Apple 시스템에서는 일반적으로 접속키를 "cmd" 키와 함께 눌러야한다.

접속키의 표현은 사용도구에 따라 다르다. 제작자가 라벨(label) 텍스트 또는 어디든 접속키가 적용되는 곳에는 접속키를 포함시킬 것을 추천한다. 사용도구는 그 임무를 강조하고, 다른 글자들과 구별되도록(예를 들어 밑 줄을 긋는 등) 접속키의 값을 표현하여야 한다.

::TOP::

5. 불활성(disabled)과 읽기 전용(read-only) 제어

사용자 입력이 바람직하지 않거나 필요 없을 때, 제어를 불활성 시키거나 읽기 전용으로 하는 것이 중요한다. 예를 들어, 필요한 데이터를 입력시키기 전에는 폼의 송신(submit) 단추를 불활성화 하기를 원 할 수 있다. 비슷하게, 제작자가 폼과 함께 송신되어야 할 값을 읽기 전용 텍스트로 포함 시키기를 원 할 수 있다. 다음 항목들은 불활성과 읽기 전용 제어를 설명한다.

5.1 불활성(disable) 제어(control)

애트리뷰트의 정의

disabled [대소문자 구별 없이: CI]: 폼(form) 제어에 설정되면, 이 불린(boolean) 애트리뷰트는 사용자 입력 제어를 불가능하게 한다.

설정되면, disabled 애트리뷰트는 엘레멘트에 다음 효과를 준다.

불활성 된 제어는 초점(focus)을 받지 않는다.
불활성 된 제어는 탭에 의한 항해(tabbing navigation)를 건너 뛴다.
불활성 된 제어는 성공적(successful)이 될 수 없게한다.

BUTTON INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA 엘레멘트는 disabled 애트리뷰트를 지원한다.

이 애트리뷰트는 전달되지 만, 지역 선언으로 전달 된 값을 덮어 씌울(override) 수 있다.

불활성 된 엘레멘트의 표현 방법은 사용도구에 따라 다르다. 예를 들어, 일부 사용도구에서는 불활성 된 메뉴 항목, 단추의 라벨 등을 흐리게 표현한다.

이 예제에서, INPUT 엘레멘트는 불활성되었다. 그러므로, 사용자의 입력을 받을 수 없고, 그 값을 폼과 함께 송신 될 수 없다.

주석: disabled 애트리뷰트의 값을 탄력성있게 수정하려면 스그립트(script)를 사용하는 방법 뿐이다.

5.2 읽기 전용(read-only) 제어(control)

애트리뷰트의 정의

readonly [대소문자 구별 없이: CI]: 이 폼 제어을 설정하면, 이 불린(boolean) 애트리뷰트는 그 제어의 변경을 금지한다.

readonly 애트리뷰트는 제어가 사용자에 의하여 수정 될 수 있는가를 지정한다.

설정 된면, readonly 애트리뷰트는 엘레멘트에 다음 효과를 갖는다.

읽기 전용(read-only) 엘레멘트는 초점(focus)을 받으나, 사용자에 의하여 변경되지 않는다.
읽기 전용 엘레멘트는 탭에 의한 항해(tabbing navigation)에 포함된다.
읽기 전용 엘레멘트는 성공적(successful)이 될 수 있다.

INPUT, TEXTAREA는 readonly 애트리뷰트를 지원한다.

어떻게 읽기 전용 엘레멘트가 표현되는 방법은 사용도구에 따라 다르다.

주석: readonly 애트리뷰트의 값을 탄력성있게 수정하려면 스그립트(script)를 사용하는 방법 뿐이다.

::TOP::

6. 폼의 송신

이 항목들 사용도구 폼 데이터의 처리 대리자(agent)에게 송신 방법을 설명한다.

6.1 폼의 송신(submit) 방법

FORM 엘레멘트의 method(방법) 애트리뷰트는 폼(form)을 처리 대리자에게 보내는데 사용되는 HTTP 방법(method)을 지정한다. 이 애트리뷰트는 다음 두가지 값을 가질 수 있다.

get: HTTP의 "get" 방법으로, 폼 데이터 세트(form data set)가 action 애트리뷰트에 지정 된 URI에 해 물음표 ("?")로 분리하여 추가되고, 이 새 URI는 처리(processing) 대리자(agent)에게 보내진다.
post: HTTP의 "post" 방법으로, 폼 데이터 세트는 폼의 본체에 포함되어 처리 대리자에게 보내진다.

"get" 방법은 폼이 다른 효과(side-effects)를 유발시키지 않을 때에 사용하여야 한다. 많은 데이터베이스(database) 검색들은 보이는 다른 효과(side-effect)가 없이 이상적인 "get" 방법이 적용된다.

예를 들어, 만일 폼이 데이터베이스를 수정하거나, 서비스에 등록(subscription)하는 등, 서비스가 다른 효과를 유발하는 폼의 처리를 한다면, "post" 방법이 사용되어야 한다.

주석: "get" 방법은 폼 데이터 세트의 값을 ASCII 글자로 제한한다. enctype="multipart/form-data"와 함께 사용하는 "post" 방법 만이 전체 [ISO10646] 글자 세트를 커버하도록 지정되었다.

6.2 성공적 제어

성공적 제어(successful control)는 유효한 송신(submit)이다. 모든 성공적 제어는 송신되는 폼 데이터 세트(form data set)의 부분으로 그 제어 이름과 그 현재값의 짝을 갖는다. 성공적 제어는 FORM 엘레멘트 안에서 정의되고 제어 이름을 가져야한다.

그러나:

불활성(disabled) 제어은 성공적이 될 수 없다.
만일 폼이 한개 이상의 송신 단추들를 갖는다면, 활성화 된 송신 단추 만이 성공적이다.
모두 "on" 된 체크박스(checkboxe)는 성공적이 될 수 있다.
name애트리뷰트에 같은 값을 갖는 레디오 단추(radio button)들에서, "on" 된 레디오 단추 만이 성공적이 될 수 있다.
메뉴에서, 제어 이름은 SELECT 엘레멘트에 의하여 제공되고, 그 값은 OPTION 엘레멘트에 의하여 제공된다. 선택 된(selected) 선택 사항 만이 성공적이 될 수 있다.
화일 선택(file select)의 현재값은 하나 혹은 그 이상의 화일 이릅들의 목록이다. 폼의 송신과 동시에, 각 화일의 그 내용은 나머지 다른 폼 데이터와 함께 발송된다. 그 화일 내용은 폼의 컨텐트 타입(content type)에 따라 포장된다.
오브젝트 제어의 현재값은 오브젝트의 적용에 따라 결정된다.

만일 폼이 송신되는데 제어가 현재값을 가지고 있지 않으면, 사용도구는 성공적 제어로 처리하지 말아야한다.

또 한 사용도구는 다음과 같은 경우에 성공적 제어로 간주하지 말아야한다.

재설정 단추(reset button).
declare 애트리뷰트가 설정 된 OBJECT 엘레멘트.

감춰진 제어(hidden control)와 스타일쉬트(style sheet) 설정 때문에 표현되지 않은 제어는 성공적이 될 수 있다. 예를 들어:

이는 값이 이름 "invisible-password"와 짝이되어 폼과 함께 송신(submit)된다.

6.3 폼 데이터의 처리

송신 단추(submit button)를 활성화 하는 등으로 사용자가 폼을 송신하면, 사용도구는 다음과 같이 처리한다.

일단계: 성공적 제어(successful control)를 인식한다.

이단계: 폼 데이터 세트를 만듬

폼 데이터 세트(form data set)는 성공적 제어로 부터 제어 이름(control-name)과 현재값(current-value) 짝들로 구성 된 일련의 데이터이다.

삼단계: 폼 데이터 세트를 엔코딩

폼 데이터 세트는 FORM 엘레멘트의 enctype 애트리뷰트에서 지정 된 컨텐트 타입(content type)에 의하여 엔코딩된다.

사단계: 엔코딩 된 폼 데이터 세트의 송신

최종적으로, 엔코딩 된 데이터는 action 애트리뷰트로 지정 된 처리 대리자(processing agent)에게 method 애트리뷰트에 의하여 지정 된 프로토콜(protocol)를 사용하여 보내진다.

이 규격은 폼에 사용 될 수 있는 모든 유효한 송신 방법들이나 컨텐트 타입들을 규정하지 않았다. 그러나, HTML 4 사용도구는 다음 경우들의 처리 방법을 지원하여야 한다.

만일 method가 "get"이고 action은 HTTP URI이면, 사용도구는 action의 값을 갖고, 여기에 `?'를 추가 한 후, 폼 데이터 세트(form data set)를 추가하여야 하여, 컨텐트 타입(content type) "application/x-www-form-urlencoded"을 사용하여 엔코딩하여야 한다. 그후 사용도구은 이 URI에 연결을 한다. 이 시나리오(scenario)에서, 폼 데이터는 ASCII 코드로 국한한다.
만일 method가 "post"이고 action이 HTTP URI이면, 사용도구는 action 애트리뷰트의 값과, enctype 애트리뷰트에 의하여 지정 된 컨텐트 타입에 의해 만들어 진 메세지에 따라 HTTP "post" 송신을 수행한다.

action 또는 method의 다른 값에서는, 작동이 지정되어 있지 않았다.

사용도구는 HTTP "get"과 "post" 이전(transaction)의 송신을 표현하여야 한다.

6.4 폼의 컨텐트 타입(content type)

FORM 엘레멘트의 enctype 애트리뷰트는 서버에 송신을 위하며 폼 데이터 세트(form data set)의 엔코드에 사용 된 컨텐트 타입(content type)을 지정한다. 사용도구는 아래 목록의 컨텐트 타입을 지원하여야 한다. 다른 컨텐트 타입들의 작동이 지정되어 있지 않다.

URI 애트리뷰트 값에서 앰퍼샌드("&") 에스케이핑(escaping)도 참고하라.

컨텐트 타입 "application/x-www-form-urlencoded"

이는 컨텐트 타입(content type)의 디폴트 값이다. 이 컨텐트 타입으로 송신되는 폼은 다음과 같이 엔코딩되어야 한다.

제어 이름(Control name)들과 값들이 아스키 값으로(escaped(된다. 공간 글자들은 `+'으로 대체되고, 그 후 [RFC1738] 항목 2.2에 설명 된 바와 같이 예약(reserved) 글자들이 아스키 값으로(escaped) 된다. 비 알파벳(Non-alpha) 글자들은 퍼센트 기호와 해당 글자의 ASCII 코드에 해당하는 두개의 16진수로 된 `%HH'로 된다. 줄바꿈(line break)은 "CR LF"('%0D%0A')로 된다.
제어 이름과 값은 문서에 나타나는 순서에 따라 목록화된다. 이름은 그 값과 `='로 분리되고, 제어 이름과 값의 짝은 서로 `&'로 분리된다.

컨텐트 타입 "multipart/form-data"

주석: 과거 버전 부합성 문제, "multipart/form-data"와 기타 컨텐트 타입(content type)들과의 관계, 성능 문제 등을 포함하여, 화일 업로드(upload)에 대 한 추가적인 정보는 [RFC2388]을 참조하라.

부록의 폼의 보안 문제를 참조하라.

컨텐트 타입 "application/x-www-form-urlencoded"는 많은 양의 이진수(binary) 데이터 또는 비아스키(non-ASCII) 글자를 포함하는 텍스트에서는 효과적이 아니다. 화일, 비아스키 데이터, 이진수 데이터을 포함하는 폼의 송신(submit)에는 컨텐트 타입(content type) "multipart/form-data"가 사용되어야 한다.

이진(binary) "multipart/form-data"는 [RFC2045]에 소개 된 모든 복수 MIME 데이터 흐름의 규칙을 따른다. "multipart/form-data" 정의는 [IANA] 리지스트리(registry)에 있다.

"multipart/form-data" 메세지는 성공적 제어 부분들의 연속을 포함하여 나타낸다. 각 부분들은 문서에 나타나는 제어와 상응하는 같은 순서에따라, 처리 대리자(processing agent)에게 보내 진다. 부분의 구획은 어떤 데이터에도 나타나지 않아야 하며, 그 방법은 이 규격의 법위 밖이다.

모든 복수 MIME 타입들과 같이, 각 부분은 디폴트가 "text/plain"인 선택적 "Content-Type" 헤더(header)를 갖는다. 사용도구는 "charset" 파라메터(parameter)에 의하여 이루어지는 "Content-Type" 헤더를 제공하여야 한다.

각 부분은 다음을 포함 할 것이다.

값이 "form-data" 인 "Content-Disposition" 헤더.
해당 제어의 제어 이름을 지정하는 name 애트리뷰트. 원래 비아스티(non-ASCII) 글자 세트로 엔코드 된 제어 이름은 [RFC2045]에 소개 된 방법에 따른다.

그래서, 제어 이름 "mycontrol" 인 예제에서, 해당 부분이 지정되었다.

 Content-Disposition: form-data; name="mycontrol"

모든 MIME 송신에서와 같이, "CR LF"(`%0D%0A')가 데이터의 열(line)을 구별하기 위하여 사용된다.

각 부분은 엔코드 될 수 있고, 만일 그 부분의 값이 디폴트 엔코딩 (7BIT)과 일치하지 않으면[RFC2045 항목 6 참조], "Content-Transfer-Encoding" 헤더(header)가 제공되어야 한다.

만일 그 화일 내용들이 폼과 함께 송신되면, 그 화일 입력은 적정한 컨텐트 타입으로 지정되어야한다(예를 들어, "application/octet-stream"). 만일 단일 폼 엔트리의 결과로 복수(multiple) 화일들이 돌아온다면, 그 것들은 "multipart/form-data" 안에 깔려 있는(embedded) "multipart/mixed"로 돌아와야한다.

사용도구는 각 송신(submit) 화일의 화일 이름 제공을 시도하여야 한다. 그 화일 이름은 'Content-Disposition: form-data' 헤더의 "filename" 파라메터로, 또는, 복수(multiple) 화일의 경우, 부분의 'Content-Disposition: file' 헤더 안의 "filename" 파라메터로 지정 될 수 있다. 만일 사용자의 운영 체계에서 그 화일 이름이 US-ASCII가 아니면, 그 화일 이름은 대략적으로 되거나 또는 [RFC2045]의 방법을 사용하여 엔코드가 될 수 있다. 이것은, 예를 들어, 업로드 된 화일이 서로 참조(예를 들어, TeX 화일과 그의 ".sty" 보조 스타일 기재)를 포함 할 경우에 편리하다.

예제는 "multipart/form-data" 엔코딩을 설명한다. 다음의 폼을 가정하자.



 
 성명은? 

 보낼 화일은?

만일 사용자가 "Larry"를 텍스트 입력하고 "file1.txt" 화일을 선택하면, 사용도구는 다음 데이터를 되돌려 보낼 것이다.

  Content-Type: multipart/form-data; boundary=AaB03x

  --AaB03x
  Content-Disposition: form-data; name="submit-name"
  Larry
  --AaB03x
  Content-Disposition: form-data; name="files"; filename="file1.txt"
  Content-Type: text/plain
  ...  file1.txt의 내용 ...
  --AaB03x--

만일 사용자가 두번째 이미지 화일 "file2.gif"을 선택하였다면, 사용도구는 다음과 같은 부분들을 형성 할 것이다.

 Content-Type: multipart/form-data; boundary=AaB03x

 --AaB03x
  Content-Disposition: form-data; name="submit-name"
  Larry
  --AaB03x
  Content-Disposition: form-data; name="files"
  Content-Type: multipart/mixed; boundary=BbC04y
  --BbC04y
  Content-Disposition: attachment; filename="file1.txt"
  Content-Type: text/plain
  ... file1.txt의 내용 ...
  --BbC04y
  Content-Disposition: attachment; filename="file2.gif"
  Content-Type: image/gif
  Content-Transfer-Encoding: binary
  ... file2.gif의 내용 ...
  --BbC04y--
  --AaB03x--

tag : form태그

웹접근성 정책(초안)

2008-10-01T13:42:22Z

서비스 안내

아래 내용을 꼭 끝까지 읽어 주시기 바랍니다.

소개

회사은(는) ㅇㅇ정보를 제공하고 있습니다.

회사 서비스의 입구라 할 수 있는 첫 페이지는 모든 네티즌이 이용할 수 있도록 최선을 다하고 있습니다.
웹표준을 준수하고, 웹접근성을 개선하기 위해 꾸준히 점검하고 테스트하고 있습니다.
사용안내를 위해 필요한 내용과 변경 사항은 본 페이지를 통해 안내해드립니다.

화면낭독기 사용시 참고사항

서비스 문서 시작부분의 '바로가기' 링크는 사용자가 원하는 영역으로 바로 이동하기 위한 링크입니다.
국내 일부 화면 낭독기의 경우 '바로가기 링크'를 클릭하더라도 화면낭독기가 이 기능을 제대로 이해하지 못하여 가상커서가 문서 처음부터 다시 이동되어 시작하는 오류가 종종 있습니다.

(각 문서 제목을 표시가능한 경우)
현재 문서의 제목은 각 페이지의 제목이 제공되고 있습니다.

(대표제목만 표시가능한 경우)

현재 문서의 제목은 ㅇㅇ로 되어 있습니다.

문서위치나 내용 파악을 위해 적절한 제목이 제공되어야 하나 서비스 운영관리의 목적상 제공하지 못한 점 사과드립니다.
적절한 문서제목을 제공 할 수 있도록 노력하겠습니다.

(로그인 서식이 있을 경우)

페이지가 로딩 한 후에는 자동으로 검색창에 커서가 위치하며 탭이동시 로그인 아이디, 비밀번호, 로그인 버튼 순으로 이동합니다.
첫 페이지에서 사용자가 가장 자주 이용하는 기능을 고려한 부분이지만
메뉴를 처음부터 읽어야 하는 경우 불편함이 따르게 됩니다.
가능한 편한 이동이 가능하도록 노력하겠습니다.

또한, 일부 화면 낭독기의 경우 가상커서의 탭키이동이 불가능하고 문서제목으로 이동하는 경우가 있습니다.

이는 화면 낭독기의 기술개발 및 업데이트가 필요한 사항이며, 개발사의 조속한 보완이 요구됩니다.

화면 낭독기로 문서를 쉽게 이해할 수 있는 방법은 다음과 같습니다.

현재 문서 처음으로 이동하여 화면낭독기의 헤딩간 이동을 하면 문서 구조를 쉽게 이해할 수 있습니다.
기본적으로 헤딩1이 가장 높은 단계이며, 헤딩 2, 3, 4, 5의 순으로 분류됩니다.
또한 헤딩의 레벨에 따라 현재 위치가 어느 수준에 있는가를 확인할 수도 있습니다.

예를 들어
헤딩4 커뮤니티 링크
헤딩5 공지사항 그래픽 링크
헤딩5 뉴스와정보 그래픽 링크
헤딩5 자유게시판 그래픽 링크
헤딩5 묻고답하기 그래픽 링크
헤딩5 고객센터문의 그래픽 링크
로 되어 있다면 커뮤니티 밑에 공지사항, 뉴스와정보, 자유게시판, 묻고답하기, 고객센터문의 항목이 있다는 것이 됩니다.

여러탭이 존재하는 목록 의 경우 이를 논리적으로 구성하였습니다.

예를들어

헤딩5 공지사항 그래픽 링크

공지사항 목록

헤딩5 뉴스와정보 그래픽 링크

뉴스와정보 목록

헤딩5 자유게시판 그래픽 링크

자유게시판 목록
헤딩5 묻고답하기 그래픽 링크

묻고답하기 목록
헤딩5 고객센터문의 그래픽 링크

고객센터문의 목록
으로 되어있는 탭이 있다면 맨처음 항목인 공지사항 그래픽 링크 부터 순차적으로 각 항목의 모든 내용을 키보드로 이동 할 수 있습니다.

컨텐츠를 담거나 링크걸린 이미지의 경우 alt="설명"을 통해 안내가 가능하나
의미가 없는 이미지는 링크이미지는 빈값으로(alt="") 처리되어 있습니다.

플래시 컨텐츠의 경우 object 의 대체컨텐츠를 사용하여야 하나 이렇게 할경우 인터넷익스플로러 6 버전은 사용자의 동의를 묻는 경고창이 나타나 사용에 불편함을 초래하므로, 자바스크립트를 이용하여 플래시 컨텐츠를 감싼다음 이를 대체하는 대체컨텐츠를 제공하였습니다.

(페이지 새로고침 기능이 있을 경우)
ㅇ분간격으로 페이지를 새로고침하여 새로운 컨텐츠를 볼 수 있도록 도와드리고 있습니다.
첫페이지에는 양질의 컨텐츠가 실시간으로 등록되어 있기 때문에 추가된 기능이지만
컨텐츠의 변경이나, 포커스를 읽는 불편함이 따르게 됩니다.
사용성을 고려한 대응을 고려하도록 노력하겠습니다.

웹접근성 향상을 위한 제안

회사에서는 웹접근성 향상을 위해 여러분의 제안이나 의견을 환영합니다.
언제든 회사내 서비스에 관해 보완해야할 사항이나 불편한점이 있으시면 아래의 이메일 주소로

의견을 보내주시기 바랍니다.
의견은 한메일의 아이디 a c c e s s i b i l i t y 으로 보내주시가 바랍니다.
한메일로 의견 보내기

사용자 의견 접수 현황 및 변경 사항

현재까지 접수된 사항 없음

첫 페이지로 이동 합니다. 링크

-------------------------------------------------------------------------------

본 웹접근성 정책(초안) 은 다음서비스의 접근성안내 와 백남중 님의 이글루에서 발췌한

내용 그리고 퍼블리가 추가한 내용입니다.

더 좋은 의견 있으신 분은 댓글을 달아주세요 :D

tag : 웹접근성 정책

Daum 첫페이지 웹접근성 안내

2008-10-01T11:59:56Z

서비스 안내

아래 내용을 꼭 끝까지 읽어 주시기 바랍니다.

소개

다음는 1997년 한메일을 시초로 서비스를 시작한 대한민국 최고의 포털 사이트입니다.
다음 서비스의 입구라 할 수 있는 첫 페이지는 모든 네티즌이 이용할 수 있도록 최선을 다하고 있습니다.
웹표준을 준수하고, 웹접근성을 개선하기 위해 꾸준히 점검하고 테스트하고 있습니다.
사용안내를 위해 필요한 내용과 변경 사항은 본 페이지를 통해 안내해드립니다.

화면낭독기 사용시 참고사항

1. 바로 접근(Accessiblility) 링크
서비스 문서 시작부분의 '바로 접근' 링크는 필요한 영역으로 건너뛰기 위한 링크입니다.
국내 일부 화면낭독기의 경우 '바로 접근 링크'를 클릭하더라도
가상커서가 문서 처음부터 다시 이동되어 시작하는 오류가 종종 있습니다.

2. 문서 제목(title태그)
현재 다음 메인 페이지의 문서 제목은 'Daum - 우리들의 UCC 세상, 다음'로 되어 있습니다.
문서위치나 내용 파악을 위해 적절한 title이 제공되어야 하나 서비스 운영관리의 목적상 제공하지 못한 점 사과드립니다.
적절한 문서제목을 제공 할 수 있도록 노력하겠습니다.

3. 페이지 로딩 후 커서 위치
페이지가 로딩 한 후에는 자동으로 검색창에 커서가 위치하며 탭이동시 로그인 아이디, 비밀번호, 로그인 버튼 순으로 이동합니다.
다음 첫 페이지에서 사용자가 가장 자주 이용하는 기능을 고려한 부분이지만
메뉴를 처음부터 읽어야 하는 경우 불편함이 따르게 됩니다.
가능한 편한 이동이 가능하도록 노력하겠습니다.

4.리스트형식에 사용된 숫자
게시물중 리스트형식 뒤에 붙는 숫자는 그 컨텐츠의 순위를 상승률을 의미합니다.
예) 번호. 게시물내용 12

5. 이미지 정보
컨텐츠를 담거나 링크걸린 이미지의 경우 alt="설명"을 통해 안내가 가능하나
단순히 보여주기 이미지나 같은 제목을 가져야 하는 경우의 링크이미지는 빈값으로(alt="") 처리되어 있습니다.

6. 페이지 새로고침
6분간격으로 페이지를 새로고침하여 새로운 컨텐츠를 볼 수 있도록 도와드리고 있습니다.
첫페이지에는 양질의 컨텐츠가 실시간으로 등록되어 있기 때문에 추가된 기능이지만
컨텐츠의 변경이나, 포커스를 읽는 불편함이 따르게 됩니다.
사용성을 고려한 대응을 고려하도록 노력하겠습니다.

웹접근성 향상을 위한 제안

Daum에서는 웹접근성 향상을 위해 여러분의 제안이나 의견을 환영합니다.
언제든 Daum내 서비스에 관한 의견을 보내주시기 바랍니다.
의견은 accessibility@hanmail.net으로 보내주세요.
한메일로 의견 보내기

사용자 의견 접수 현황 및 변경 사항

현재까지 접수된 사항 없음

tag : Daum, 웹접근성 안내

Daum의 아고라에 대한 의견

2008-10-01T11:55:23Z

Daum의 아고라에 대한 의견

(다음 글은 Daum의 아고라 페이지에 대하여 시각장애인의 효율적인 사용을 조금이라도 증진하고자 스크린 리더 접근 시 문제점을 제시한 것이다)

1. 메뉴 건너뛰기 링크 문제:

현재 문서의 처음에 있는 메뉴를 건너뛰기 위한 skip navigation으로 메뉴 건너뛰기 현재 페이지 링크를 제공하였다.
- 명칭 문제: 왜 메뉴 건너뛰기인가? 메뉴 건너뛰기란 복잡한 메뉴를 건너뛰고 다른 곳으로 간다는 바로 이동한다는 의미인데 이동되는 곳에 대한 언급이 없다. 또한 무슨 메뉴를 건너 뛴다는 것인지 알 수가 없다.
따라서 '메뉴 건너뛰기' 보다는 이동할 곳을 지칭하여 '본문으로 바로 가기'가 좋지 않을까?
- 이동 후 문제: skip navigation 후 바로 만나는 것은 메뉴 밑의 아고라 핫이슈 관련 이미지의 앞에 위치한다. 스크린 리더로 들으면 다음과 같다.

Daum 미디어다음 - 아고라
웹접근성안내 링크
메뉴 건너뛰기 현재페이지 링크
링크
20071207090730.559.gif 그래픽 링크
아고라 핫이슈 이미지
총기탈취 당한 해병, 그들을 왜 탓하나 그래픽 링크

문제는 메뉴 건너뛰기를 하고난 다음 바로 듣게 되는 것은 20071207090730.559.gif 그래픽 링크 로서 스크린 리더로 들으면
이십조 칠백십이억 칠백구만 칠백삼십 쩜 오백오십구.gif 그래픽 링크
라고 음성 출�한다. 처음 듣는 사람은 과연 이것이 무슨 말일까 의심하지 않을수 없다. 더구나 숫자가 일반인이 경험하지 못하는 조 까지 나오는 경우에는 더욱 그렇다. 십중 팔구는 잘못 이동한 것이라 생각한다.
이것은 해당 위치에 그림을 자동으로 올려 놓기 때문이라 생각된다.
이런 경우에는 자동으로 너무 자주 바뀌기 때문에 그림에 Alt text를 붙이지 못하는 경우라면 차라리 Alt text를 Null Text를 제공하고 바로 아고라 핫이슈 이미지에 접할 수 있도록 하는 것이 훨씬 나을 것이다.

2. 툴바3.0 설치가 세 번 음성 출력하는 이유?

이 부분은 daum의 툴바3.0 설치가 나와 있는 모든 페이지에 공통적으로 나온다.
파이어 폭스로 css를 제거하고 보면 다음 그림과 같다.

각각의 URL은
http://toolbar.daum.net/?nil_profile=g&nil_logo=toolbar
http://toolbar.daum.net/?nil_profile=g&nil_logo=ie7-search
http://toolbar.daum.net/?p=ie7&nil_profile=g&nil_logo=ie7-toolbar
과 같이 나타나나 화면상 차이는 없다. 상태 표시줄을 보면 세 번째 URL이 표시된다.
화면 상에는 한 개로 나오는데 소스에는 왜 세 개씩이나 있는지 궁금하다.

3. 아고라 메뉴의 구별

위의 그림을 스크린 리더로 읽으면 다음과 같다.

미디어다음 링크
스포츠 링크
텔레비존 링크
아고라 링크
아고라 홈 링크
토론 링크
이야기 링크
즐보드 링크
청원 링크
대선토론 링크
100분토론 링크
세계엔n 링크
블로거뉴스 링크
2007대선 링크

그림없이 소리만 들었을 경우에는 어떤 것이 큰 메뉴이고, 어떤 것이 작은 메뉴인지 알기가 어렵다.

대안 1. 큰 메뉴는 이미지 처리하여 그래픽 링크라고 음성 출력하고, 아고라의 하위 메뉴는 현재처럼 텍스트로 링크처리하면 그래픽 링크, 링크 만으로도 구분이 된다.

텔레비존 그래픽 링크
아고라 그래픽 링크
아고라 홈 링크
토론 링크

대안 2. 큰 메뉴의 텍스트에 헤딩을 사용한다. 예를 들어 큰 메뉴에

를 사용하면 큰 메뉴는 헤딩 4라고 읽고 링크는 그대로 링크라고 하기 때문에 구별이 가능학다.

텔레비존 링크 헤딩4
아고라 링크 헤딩4
아고라 홈 링크 헤딩4
토론 링크 헤딩4

4. 이동 문제:

화면 상의 내용을 스크린 리더로 읽는 경우
- 2007년 대선 메뉴,
- [2007대선 캠페인] 금주의 생활 공약 베스트 5 발표 링크
- 12.1(토) 날씨로 이동한다.
화면 상에서 본다면
- 2007년 대선 메뉴,
- 12.1(토) 날씨
- (지역별 날씨) 전남 0.7 맑음
- [2007대선 캠페인] 금주의 생활 공약 베스트 5 발표 링크
로 이동해야 한다.

5. 날씨 읽기

현재 날씨 부분을 스크린 리더로 읽으면 서울/경기 -0.1, 맑음 과 같이 한 지역을 두 줄로 읽어준다. 자신에게 필요없는 날씨 부분을 전부 소리로 듣는다는 것은 소음 공해다.

따라서 이러한 실시간 업데이트 되는 것의 앞에 시각장애인을 위한 보이지 않지만 소리로 음성출력하는 체크 상자(또는 라디오 버튼)를 만들어 '실시간 급상승 검색어 사용'이라는 명칭으로 제공하면 어떨까 한다. 즉 시각장애인은 이 콘트롤을 만나 선택안함을 선택하면 해당 부분을 건너 뛰고 다음으로 넘어갈 수 있게 하면 훨씬 사용하기 편리할 것이다.

6. 입력자 아이디 문제:

아고라 핫이슈 밑에는 현재 글 입력자에 대한 아이디가 나타난다. 이 아이디는 스크린 리더로 읽는 경우 해수사랑 링크 와 같이 음성 출력한다.

위의 내용을 소리로 듣는 경우 다음과 같다.

성장지상주의,IMF 그리고 현 대한민국의 경제난... 코앞으로 불어닥친 대선, 각정파간의 대권.. 링크
|
해수사랑 링크
토론 링크

링크가 연속해서 3개가 나타나 글쓴이를 의미하는 링크는 무엇인지 알수 없다. 특히 글쓴이의 아이디가 갑자기 어려운 단어나 이상한 글자 조합으로 된 영어인 경우에는 더더욱 알 수가 없다.
따라서 제목 링크와 아이디 사이에 소스에 화면에는 보이지 않는 텍스트 "글쓴이:"을 주어 다음과 같이 음성 출력하면 좋겠다.

성장지상주의,IMF 그리고 현 대한민국의 경제난... 코앞으로 불어닥친 대선, 각정파간의 대권.. 링크
|
글쓴이:
해수사랑 링크
토론 링크

위와 같은 문제는 그 밑에 있는 아고라 핫 이슈에 대한 글 목록에서도 마찬가지이다.

위의 내용을 스크린 리더로 들으면 다음과 같다.

한나라당의 웃음소리가 들립니다 링크
바람의 근돌 링크
100분토론 보고,어떤 후보를 뽑을까 링크
Lyricism 방문한 링크
[100분토론]D-20, 국민의 선택은? 링크
미디어다음 링크
원칙 없는 42개大 총학회장 지지 선언 링크
해수사랑 링크
[생활공약] 고위 공무원에게 경차를! 링크
대선시민연대 링크
42개대 총학회장의 이후보 지지 보고 링크
onestep55 링크
이번 대선판, 혼란스럽고 답답한 이유 링크
겨울태양 링크
김근태 의원의 '노망난 국민'발언 듣고 링크
무상 링크

처음 방문자는 과연 어떤 링크가 기사 내용이고 어떤 링크가 글쓴이인지 알 방법이 없다. 해당 링크를 여러 군데 들어갔다 나오면 글 제목과 글쓴이가 링크로 되어 있다는 것을 알게 된다. 그러나 그것이 어느 정도의 시간을 투자해야 하는지는 알수가 없다.
위의 내용을 위에서와 같이 글쓴이 앞에 화면에는 보이지 않는 텍스트를 주어서 다음과 같이 음성 출력하게 하면 처음 접하는 사람도 쉽게 이해할수 있을 것이다.

한나라당의 웃음소리가 들립니다 링크
글쓴이:
바람의 근돌 링크
100분토론 보고,어떤 후보를 뽑을까 링크
글쓴이:
Lyricism 링크
[100분토론]D-20, 국민의 선택은? 링크
글쓴이:
미디어다음 링크
원칙 없는 42개大 총학회장 지지 선언 링크
글쓴이:
해수사랑 링크

7. 현재 경로 문제:

아고라 핫 이슈(위 그림)에서 글쓴이 다음에 갑자기 현재 경로가 표시된다.

성장지상주의,IMF 그리고 현 대한민국의 경제난... 코앞으로 불어닥친 대선, 각정파간의 대권.. 링크
|
해수사랑 링크
토론 링크
>
경제 링크
>
경제 링크
한나라당의 웃음소리가 들립니다 링크
바람의 근돌 링크
100분토론 보고,어떤 후보를 뽑을까 링크
Lyricism 링크

링크 사이에 현재 경로 표시가 링크로 되어 있으니 소리만 듣고 이것을 현재 경로라고 인식할 사람은 아무도 없다. 실제로 시각장애인 정보화 교육 현장에서는 왜 갑자기 > 이 나타나느냐고 질문을 한다.
따라서 이것은 현재 경로 처음과 끝에 "현재 문서 위치 시작" "현재 문서 위치 끝" 이라는 보이지 않는 텍스트를 주면 훨씬 이해하기 쉬울 것이다.

성장지상주의,IMF 그리고 현 대한민국의 경제난... 코앞으로 불어닥친 대선, 각정파간의 대권.. 링크
|
해수사랑 링크
현재 문서 위치 시작
토론 링크
>
경제 링크
>
경제 링크
현재 문서 위치 끝
한나라당의 웃음소리가 들립니다 링크
바람의 근돌 링크
100분토론 보고,어떤 후보를 뽑을까 링크
Lyricism 링크

8. 아고라 글쓰기, 내 글 보기 음성 출력 순서 문제

아고라 첫 화면 오른쪽에 아고라 글쓰기와 내 글보기가 있다.
아고라 글쓰기에는 토론, 이야기, 즐보드, 청원이 있다.

스크린 리더로 확인하면 다음과 같다.

아고라 글쓰기 이미지
내 글 보기 그래픽 링크
토론글쓰기 그래픽 링크
이야기올리기 그래픽 링크
즐보드사진올리기 그래픽 링크
청원글쓰기 그래픽 링크

아고라 글쓰기에 토론, 이야기, 즐보드, 청원이 하위 항목으로 되어 있지만 스크린 리더로 확인하면 아고라 글쓰기는 이미지로 되어 있고 나머지 5개는 이미지에 링크로 연결된 그래픽 링크로 되어 있다.
따라서 음성 출력만으로는 아고라 글쓰기에 4개의 하위 항목(토론, 이야기, 즐보드, 청원)이 있는 것이 아니라, 아고라 글쓰기 이미지가 있고 5개의 그래픽 링크가 있는 것으로 이해된다.
또한 마우스로 아고라 글쓰기에 위치하면 밑의 4개 항목이 펼쳐지나 키보드로 아고라 글쓰기에 가면 펼쳐지지 않는다.
대안:
- 아고라 글쓰기 이미지에 키보드가 위치하면 밑의 부메뉴가 열려야 하며,
- 키보드로 이동시 아고라 글쓰기 다음에 토론, 이야기, 즐보드, 청원, 내 글보기 순으로 이동해야 하며,
- 아고라 글쓰기와 내글 보기를 헤딩 처리하여 구분해 주면 좋겠다.

위 세가지를 적용한 후 스크린 리더로 읽으면 다음과 같이 음성 출력하여 충분히 구별할 수 있다.

헤딩 5 아고라 글쓰기 이미지
토론글쓰기 그래픽 링크
이야기올리기 그래픽 링크
즐보드사진올리기 그래픽 링크
청원글쓰기 그래픽 링크
헤딩 5 내 글 보기 그래픽 링크

주의: 아고라 글쓰기 하위 메뉴를 텍스트로 바꾸면???
아고라 글쓰기 메뉴의 하위 4개를 그림이 아닌 텍스트로 처리하면 스크린 리더로는 다음과 같이 음성 출력한다.

아고라 글쓰기 이미지
토론글쓰기 링크
이야기올리기 링크
즐보드사진올리기 링크
청원글쓰기 링크
내 글 보기 그래픽 링크

음성 출력시 속성이 이미지, 링크로 되어 구별할 수 있지 않느냐고 하겠지만 아고라 글쓰기 이미지에 4개의 링크가 포함되었다는 것은 알수 없다. 따라서 이것은 좋은 방법이 못된다고 할 수 있다.

9. 이미지의 Alt text 문제 1:

화면상에는 아고라 핫채널, 아고라 베스트라고 되어 있는데 Alt text는 "메뉴 모음" " 베스트 글목록"이라고 되어 있다.
이미지에 Alt text를 다는 기본 원칙은 이미지의 글자를 그대로 Alt text화 하는 것이 아닐까?

10. 이미지의 Alt text 문제 2:

아고라 핫채널 밑에는 토론, 이야기, 즐보드, 청원 항목이 있고 각각의 밑에 세부 항목이 있다. 4개의 항목은 그림으로 되어 있고, 그림에는 Alt Text를 제공하였다.
문제는 제공한 Alt Text의 내용이다. 예를 들어 토론 그림에는 "토론탑"이라고 Alt Text를 제공하여 밑의 링크와 구별을 시도하였다.
즉 스크린 리더로 들으면

메뉴 모음 헤딩4
토론탑 그래픽 링크
정치방 링크
|
경제방 링크
|
사회방 링크

라고 음성 출력한다.
여기서 문제는 그림에는 "토론"이라고 되어 있는데 왜 "토론탑" "이야기탑" "즐보드탑"과 같이 "탑"이라는 글자를 붙였느냐는 것이다. 밑의 링크 항목과의 구별을 위해 "탑"을 붙였다면 "탑"은 처음이라는 뜻인데 처음 듣는 사람은 "토론탑" 이라는 단어로 인지하지 토론의 첨음인 토론탑으로 인지하지 않는다는 것이다.

대안:
- 먼저 Alt Text를 "토론"이라고 한다.
- 현재 부분이 메뉴시작 헤딩 4이기 때문에 토론, 이야기, 즐보드, 청원 항목에

를 붙인다.
위와 같이 바꾸고 스크린 리더로 들으면 다음과 같이 된다.

아고라 핫채널 헤딩 4
헤딩 5 토론
정치방 링크
경제방 링크
사회방 링크
....
헤딩 5 이야기
이야기즐 링크
유머 링크
.....
헤딩 5 즐보드
포토즐 링크
직찍/제보 링크
.....

11. 테이블의 데이터 확인 문제:

아고라 베스트 밑의 글목록을 스크린 리더로 들으면 다음과 같다.

베스트 글목록 헤딩4
RSS안내 링크
테이블시작 (6행 3열)
빈줄
테이블 제목: 토론글 베스트 글목록
제목,댓글수
글쓴이
추천수
빈줄
후보간 '짝짓기' 도래, 현명한 유권자 선택은 링크
[64]
어린작가 링크
97
빈줄
BBK 수사발표 임박, 국민이 납득하려면 링크
[488]
torreypines 링크
1605
빈줄

(빈줄: 센스리더가 표에서 줄이 바뀌는 경우 표시해주는 소리)
위와 같은 표에서 시각장애인은 제목, 댓글수, 글쓴이, 추천수의 관계를 명확하게 알기 어렵다. 예를 들어 글쓴이의 아이디가 숫자(예: 1975)와 같이 되어 있다면 댓글수, 글쓴이, 추천수가 모두 숫자로 되어 있다면 더욱 어려워진다.
대안:
- 표에서의 각 셀에 타이틀 속성을 지정하여 스크린 리더가 정확하게 표현할 수 있도록 해 주어야 한다. 즉 테이블에서 다음과 같이 음성 출력할 수 있도록 하여야 한다.

베스트 글목록 헤딩4
RSS안내 링크
테이블시작 (6행 3열)
빈줄
테이블 제목: 토론글 베스트 글목록
제목
댓글수
글쓴이
추천수
빈줄
후보간 '짝짓기' 도래, 현명한 유권자 선택은 링크
댓글수: [64]
글쓴이: 어린작가 링크
추천수: 97
빈줄
BBK 수사발표 임박, 국민이 납득하려면 링크
댓글수: [488]
글쓴이: torreypines 링크
추천수: 1605
빈줄

12. 헤딩의 부적절한 사용 문제:

현재 아고라에는

부터

까지 있다.

헤딩1 다음 첫페이지로 가기 그래픽 링크
메뉴 모음 헤딩4
베스트 글목록 헤딩4
2007 대선 베스트 헤딩4
오른쪽 날개 컨텐츠 헤딩3
오늘의 토론 헤딩4
이야기 & 즐보드 헤딩4
네티즌 청원 헤딩4
헤딩2
헤딩3

문제:
- 문서 처음의 툴바 3.0 다음에 나타나는

을 사용한 의도를 모르겠다. 현재 문서에서

은 유일하게 사용되고 있으며, DAUM 로고 이미지와 연결되어 다음 첫페이지로 이동하기로 되어 있다. 궁금한 것은 굳이 다음 첫 페이지로 이동하기 위한 링크가

을 정할만큼 중요한 것이냐는 것이다. 그냥 링크로 하여도 관계없지 않을까?
- 오른쪽 날개 컨텐츠 헤딩3으로 되어 있는 것의 명칭 문제: 헤딩으로 처리하는 것은 현재 내용의 제목을 의미하는 것인데 "오른쪽 날개 컨텐츠"는 무엇을 의미하는지 알수 없다. 오른쪽 날개란 화면의 내용을 시각적으로 구분할 수 있는 경우에 가능한데, 시각장애인을 위하여 헤딩에 설명을 붙이는데 오른쪽, 왼쪽이라는 설명이 유용한지?
- 밑의 헤딩 2는 문서 밑의 "24시간 뉴스센터" 앞에 위치하고, 헤딩 3은 "서비스 약관"의 앞에 위치하나 헤딩의 내용이 없다.

즉

메뉴 안내

라고 입력하면 스크린 리더는 메뉴안내 헤딩 2 라고 음성 출력함으로서 시각장애인이 현재 위치에 대한 중요도 또는 깊이를 파악할 수 있다. 그러나

식으로 정의하면 "헤딩2"라고만 음성 출력하여 헤딩의 내용을 알수 없게 된다.
- 아고라 문서의 끝에 있는

와

의 구별이 없다. 24시간 뉴스센터 다음에 있는 9개의 링크가 전부 한 그룹이 아닌지?

대안:
- 기존의 문서 처음에 있는

과 문서의 끝 부분에 있는

을 삭제한다.
- 메뉴 모음, 베스트 글목록 이라고 달린 Alt text를 아고라 핫채널, 아고라 베스트로 바꾼다.
- 아고라 핫채널의 토론, 이야기, 즐보드, 청원에

를 적용한다.
- 공지사항에

를 적용한다.
위와 같이 정하고, 시각장애인이 스크린 리더로 헤딩간 이동(ctrl-f6)을 실행하면 다음과 같이 음성 출력하여 현재 문서의 구조를 파악하는데 아주 유익하다.

헤딩4 아고라 핫채널
헤딩5 토론 그래픽 링크
헤딩5 이야기 그래픽 링크
헤딩5 즐보드 그래픽 링크
헤딩5 청원 그래픽 링크
헤딩5 이야기 그래픽 링크
공지사항 헤딩4
헤딩4 아고라 베스트
2007 대선 베스트 헤딩4
오늘의 토론 헤딩4
이야기 & 즐보드 헤딩4
네티즌 청원 헤딩4

(참고: 현재 스크린 리더는 텍스트에 헤딩이 걸린 경우에는 "텍스트" 헤딩x 라고 음성 출력하고, 이미지나 이미지에 링크가 걸린 경우에는 "헤딩x, Alt text" 식으로 음성 출력함)

13. 토론 제목의 이미지 문제:
오늘의 토론 제목 옆에는 up, hot과 같은 이미지가 있다. 스크린 리더로는 전혀 음성 출력하지 않는다.

대안: 이미지에 대한 Alt text를 정확하게 정의하고(ip:상승 주제 hot:핫이슈), 해당 제목의 처음에 음성 출력하게 한다. 시각장애인은 음성 출력시 처음에 듣는 몇 단어를 가장 확실하게 이해하기 때문이다.

상승주제: 문국현 단일화 토론 제안, 이것이 논점이다 링크
핫이슈: 5년전 63만원으로 시작한 나, 지금은.... 링크

14. 배너에 Alt text 없슴
배너에 Alt Text가 없다.

"시사기획 쌈: 1988년 당신은 무엇을 하셨나요?" 라고 제공해야 한다.

15. 더보기 링크 문제:

아고라 메인 화면에는 더보기 링크가 2개 있다.
하나는 공지 사항의 더보기이고, 또 하나는 오늘의 토론의 더보기이다.
두 개 모두 이미지이기 때문에 Alt text를 "공지사항 더보기" "오늘의 토론 더보기"라고 하면 좋을 것 같다.

16. 웹접근성 안내 내용에 대한 의견:

무엇보다도 웹 접근을 위해서 설명서가 따로 제공되는 단계에 까지 이르렀다는 것이 뿌듯하다.
그러나 현재 내용으로는 시각장애인에게 문서 구조나 사용 방법 설명을 위해서는 많이 부족한 것 같다. 혹시 참고될 수 있을까봐 작성해 본다.

- 화면낭독기 사용시 참고 사항 -

화면 낭독기로 아고라 홈페이지를 쉽게 이해할 수 있는 방법은 다음과 같습니다.

현재 문서 처음으로 이동하여 화면낭독기의 헤딩간 이동()을 하면 문서 구조를 쉽게 이해할 수 있습니다.
기본적으로 헤딩1이 가장 높은 단계이며, 헤딩 2, 3, 4, 5의 순으로 분류됩니다.
또한 헤딩의 레벨에 따라 현재 위치가 어느 수준에 있는가를 확인할 수도 있습니다.

예를 들어
헤딩4 아고라 핫채널
헤딩5 토론 그래픽 링크
헤딩5 이야기 그래픽 링크
헤딩5 즐보드 그래픽 링크
헤딩5 청원 그래픽 링크
헤딩5 이야기 그래픽 링크
로 되어 있다면 아고라 핫채널 밑에 토론, 이야기, 즐보드, 청원, 이야기 항목이 있다는 것이 됩니다.
즉 문서 처음부터 끝까지 내용을 확인하시던가, 헤딩간 이동을 하여 원하는 위치로 바로 이동한 다음 한 줄씩 확인하시면 됩니다.

문서 내에서 여러 가지 불필요한 메뉴들을 건너 뛰고 본문으로 바로가기 위한 본문으로 이동 링크를 화면 낭독기로 확인할 수 있도록 제공하였습니다. 그러나 현재 국내 화면낭독기가 이 기능을 제대로 이해하지 못하여 본의 아니게 제대로 이동하지 않는 경우도 있습니다.

현재 문서 제목은 'Daum 미디어다음-아고라'로 통일되어 있습니다. 이 부분은 점진적으로 'Daum 미디어다음-아고라-경제토론방'과 같이 좀더 구체적으로 바꿀 예정입니다. 불편하시더라도 조금만 기다려 주십시오.

토론 글목록에서는 맨 처음에 제목이 나오고 다음부터는 댓글수: 글쓴이: 추천수: 등을 음성 출력하게 함으로서 소리로 쉽게 확인할 수 있도록 하였습니다.

Daum에서는 웹접근성 향상을 위해 여러분의 제안이나 의견을 환영합니다.
의견은 한메일의 아이디 a c c e s s I b I l I t y 로 보내 주시기 바랍니다.

(a c c e s s I b I l I t y 로 한 이유는 이메일을 전부 입력해 놓으면 너무 길고, accessibility라는 단어가 어려워 한 자씩 발음할 수 있게 한 것이다)

출처 : http://njpaiks.egloos.com/1107844#1107844_1 :-> 백남중

tag : 아고라, Daum, 스크린리더

플래시 네비게이션의 웹 접근성 향상 방안

2008-09-29T08:59:52Z

플래시 네비게이션의 웹 접근성 향상 방안

1. 개요

웹사이트 제작시 디자인 심미성을 강조하기 위해 흔히 플래시로 네비게이션을 구현하는 경우가 있습니다. 하지만, 이렇게 구현된 웹사이트의 경우 키보드 TabKey 를 이용한 자유로운 메뉴이동이 불가능 하여 웹 접근성을 떨어뜨리는 사이트가 많습니다.

http://www.cans21.net/

<성남시청 홈페이지 – 플래시 네비게이션의 TabKey 활용이불가합니다. >

http://www.gwanak.go.kr/

<관악구청 홈페이지 – 플래시 네비게이션의 TabKey 활용이불가합니다.>

이에 대한 해결방안으로, 플래시 네비게이션에 tabindex 를 부여하여 키보드 TabKey로 메뉴이동이 가능한 방법을 알아 보도록 하겠습니다.

2. 내용

가. 작업중인, 혹은 작업되어있는 파일을 Open 합니다.

나. Window > Other Panels > Accessibility 패널을 활성화 합니다.

다. 무비클립 1 (메인메뉴1) 로 이동하여 활성화되는 버튼 혹은 무비클립을 클릭하고, Accessibility 패널에서 Tab Index 값을 1 을 입력합니다.

주의)

- 오브젝트 영역이 넓은 버튼이나 무비클립에 Tab Index 를 부여해야합니다.

- 텍스트에 Tab Index 를 부여할 경우 활성화시 노란색 테두리가 텍스트 주위에만 나타날 수 있습니다.

여기까지 하셨다면 다음사항은 중요하므로 주의깊게 보시기 바랍니다.

흔히 범하는 실수중 하나가, 2뎁스메뉴의 Tab Index 값을 부여할 때 발생합니다.

2뎁스의 오브젝트 바깥쪽에서 Tab Index 를 부여하면 프레임의 속성을 적용받기 때문에

하단 모션 바가 사라지거나, 알파값이 적용이 된 상태에서 활성화가 됩니다.

라. 메인메뉴1 의 마지막 프레임으로 이동후 각 2뎁스 메뉴의 버튼 혹은 무비클립 오브젝트 안으로 이동합니다.

이동후 가장 마지막 프레임에서 활성화 되어야 하는 버튼을 클릭후 Tab Index 2 를 입력합니다.

위와 같은 방법으로 1-1 메뉴를 빠져나와 1-2, 1-3, 1-4… 버튼에도 순서에 맞게 Tab Index 번호를 부여합니다.

메인메뉴1 에 대한 Tab Index 번호부여가 끝이났다면 메인메뉴2 로 이동하여 위와 같은 방법으로 Tab Index 번호를 부여해줍니다.

3. 예제 – 다음예는 올바른 Tab Index 를 적용하였을때의 모습입니다.

가. 메인메뉴 1 활성화

나. 메인메뉴 1-1 활성화

다. 메인메뉴 1-2 활성화

라. 메인메뉴 1-3 활성화

마. 메인메뉴 1-4 활성화

바. 메인메뉴 1-5 활성화

사. 메인메뉴 2 활성화

4. 결론

플래시 네비게이션이, 이미지나 텍스트형태의 네비게이션 보다 웹 접근성이 떨어지는 것은 사실입니다. 유지보수 또한 제작자가 아니면 같은 디자이너라 할지라도 쉽게 단시간에 수정하기 힘든 점이 있습니다. 그러나, 클라이언트의 요청에 의해 어쩔수 없이 플래시로 네비게이션을 제작해야 하는경우, 또한 홈페이지의 구조상 반드시 플래시로 처리해야 하는 상황에서는 위와 같은 방법을 통하여 홈페이지의 웹 접근성을 높일 수 있습니다.

tag : 플래시메뉴, tabindex

무차별적인 비표준 저가 홈페이지 대책은 없는가

2008-09-28T02:00:27Z

취업사이트에 올라와있는 프리랜서 디자이너, 개발자, 혹은 소규모 사업자분들의 포폴을 한번 보시라..

옛날 생각 새록새록 나면서, 정말 심하게 대책없다는 생각이 머리를 스칠것이다.

단순히 먹고살기위해 홈페이지를 대충대충 제작해주고 나면 끝이고, 표준과 접근성에 대해 알려고도 하지않고 알고싶어 하지도 않는 자신들이 어떤 범죄를 저지르고 있는지도 모르는 채 저렴한 제작비용과 깔끔한 퀄리티로 홈페이지를 만들어 준다며 홍보하고 있는 것이다.

하루빨리 브라우져의 독점시대가 막을 내리고, 심판의 날이 다가오길!!

tag : 비표준

데이터테이블 접근성 가이드라인

2008-09-27T22:27:18Z

• TABLE의 사용

가. 테이블에 대한
와 의 제공
• 데이터테이블이란? 데이터를 표현하기 위하여 일반적으로 사용되는 테이블 - 게시판은 대표적인 데이터 테이블임
•
는 표에대한 간략한 내용을 표현하며 은 테이블의 제목을 표현
•
•
•
운전 시간과 운동시간 비만의 상관관계표

나. 데이터 테이블을 의미적으로 이해할 수 있도록 적절히 태그를 사용
• 행딘위 구분을 위한 태그를 제공 *
, , 등
• 열단위 구분을 위한 태그를 제공 *
, 등
• 제목셀과 내용셀의 구분을 위한 태그를 제공 *
운전 시간과 운동시간 비만의 상관관계표

, 등 헤더는 1행과 1열에 배치
• colspan, rowspan이 많이 사용되어 헤더구조가 복잡한 테이블의 경우 적절하게 사용
• 헤더의 긴 내용이 들어갈 경우 abbr 속성을 사용해 약어를 표시

다. 표의 머리글과 내용 칸을 바르게 짝지어야한다.

1. 머리글에 해당하는 td 나 th 요소에 그 머리글이 어디에 영향을 주는지 scope 속성을 붙여서 표시

개인별 시험 성적표
구분 중간고사 기말고사
김철수 50 60
박영희 70 80

소비자물가표

구분 중간고사 기말고사

김철수 50 60

박영희 70 80

2. 머리글을 나타내는 td 나 th 에 고유한 id 속성값을 주고, 그 머리글과 짝지어지는 내용 칸을 나타내는 td 에 id 속성값과 동일한 headers 속성값을 줌

개인별 시험 성적표
구분 중간고사 기말고사
김철수 50 60
박영희 70 80

개인별 시험 성적표

구분 중간고사 기말고사

김철수 50 60

박영희 70 80

라. Col Element 예제

야채 단가표
당근1:500원 토마토1(대구):300원 토마토1(광주):400원 무우1:600원
당근2:550원 토마토2(대구):300원 토마토2(광주):500원 무우1:630원
당근3:570원 토마토3(대구):300원 토마토3(광주):550원 무우3:620원

야채 단가표

당근1:500원 토마토1(대구):300원 토마토1(광주):400원 무우1:600원

당근2:550원 토마토2(대구):300원 토마토2(광주):500원 무우2:630원

당근3:570원 토마토3(대구):300원 토마토3(광주):550원 무우3:620원

tag : 데이터 테이블

2007년 12월 전국장애인 현황

2008-09-27T22:15:02Z

2007년 12월 전국장애인 현황 입니다.

tag : 장애인현황

1. 정보화 사회와 정보취약계층

2008-09-27T19:24:01Z

1. 정보화 사회와 정보취약계층

1.1 정보화 사회란?

1.2 정보취약계층-장애인의 이해

1.3 정보취약계층-노인의 이해

1.4 장애인 IT 환경 체험

학습내용

- 정보화 사회를 이해하기 위하여 개념 및 특징을 알아본다.

- 미국, 영국 등 선진국과 우리나라의 장애에 대한 개념의 비교

및 장애의 유형 등을 통해 정보취약계층에 대하여 이해한다.

- 장애인 IT 환경 체험을 통해 접근성의 필요성을 이해한다.

1.1 정보화 사회란?

1.1.1 정보화 사회

-세계 모든 나라는 정보화를 통한 국가경쟁력 확보에 주력하고 있음

-우리나라는 정보화촉진기본법에서 정보화를 '정보를 생산, 유통 또는 활용하여

사회 각 분야의 활동을 가능하게 하거나 효율화를 도모하는 것'이라고 규정

-정보화 사회란 컴퓨터와 통신 기술이 결합되어 정보의 수집·가공·유통 능력이 확

장되면서, 정보의 가치가 극대화 되는 사회를 의미

-또한 인간이 현대사회를 영위하는데 필요한 정보를 수집, 저장, 가공, 생산 등의

과정을 통해 정보의 유통을 확대시키고 이러한 과정과 유통이 보편화된 사회

-따라서 정보화 사회는 엄청난 양의 정보가 생산되어 빠른 속도로 이동 및 유포되

거나 소비되는 사회를 의미

1.1.2 정보화 사회의 특징

첫째, 정보화 사회는 정보의 사회적 중요성이 극대화되는 사회

둘째, 대량의 정보가 생산·유통되어지는 사회

셋째, 정보·지식의 생산이 산업구조의 중심이 되는 사회

넷째, 정보통신을 활용한 네트워크 커뮤니케이션이 가능한 사회

다섯째, 정보 자체가 중요한 자원이 되는 사회

여섯째, 인간의 지적 창조력이 가장 중요한 사회

1.2 정보취약계층 - 장애인의 이해

1.2.1 각국의 장애인에 대한 정의

- 미국의 장애인법 (ADA, Americans with Disability Acts, 1990)

장애인은 개인의 일상생활 동작 중 한가지 이상에서 현저히 제한 받는 신체적

혹은 정신적 기능장애를 가진 자, 이러한 기능장애의 기록이 있는 자, 이러한

기능장애를 가진 것으로 간주되는 자로 규정

- 미국의 사회보장법 (ASA, Americans with Security Act, 1935)

의학적으로 판정하여 적어도 1년간 지속될 것으로 판정되는 또는 사망에 이를

것으로 판정되는 신체적·정신적 손상으로 인하여 실질적인 소득활동에 참여하

지 못하는 자로 규정

- 영국의 장애인 차별 금지법(DDA, Disability Discrimination Act, 1995)

장애인은 개인의 일상생활 동작 중 한 가지 이상에서 현저히 제한 받는 신체적 혹은 정

신적 기능 장애를 가진 자, 이러한 기능장애를 가진 것으로 간주되는 자

- 호주의 장애인 차별 금지법(DDA, Disability Discrimination Act, 1993)

신체적, 지적, 심리적, 정신적, 감각적, 신경적 장애와 추형, 기형 및 질병을 야기하는

유지체의 존재(예:HIV바이러스) 등을 모두 포함하며, 현재 뿐만 아니라 과거에 존재한

사실이 있거나 미래에 존재할 가능성이 있거나 가진 것으로 인지되는 장애(예: 알콜 및

약물 중독, 당뇨, 암, 에이즈 등)도 포함

- 우리나라의 장애인복지법(1989)

• 장애인은 신체적ㆍ정신적 장애로 인하여 장기간에 걸쳐 일상생활 또는 사회생

활에 상당한 제약을 받는 자

• 신체적 장애는 주요 외부신체기능의 장애, 내부기관의 장애 등을 의미

• 정신적 장애는 정신지체 또는 정신적 질환으로 발생하는 장애를 의미

1.2.2 장애의 유형과 컴퓨터 활용

- 지체장애

• 상지 또는 하지의 일부분을 잃어버린 절단장애, 관절의 강직, 근력의 약화 또

는 마비 등의 관절장애 또는 팔, 다리의 장애와 척추장애와 같은 지체기능장

애로 인하여 신체부위 도달 확장을 위한 장치나 도구가 필요

• 팔 또는 손의 전체 혹은 일부에 장애가 있어 마우스나 키보드를 자유롭게 사

용하지 못하는 사용자의 경우 어떠한 방법으로 컴퓨터를 사용할까?

눈으로 움직이는 마우스(이미지)

헤드마우스(이미지)

- 시각장애

• 중심시력, 시야, 색 지각 또는 양안 기능에 영향을 주는 시 감각에 기능적 이

상으로 인하여 시각을 대체할 수 있는 보조도구가 필요

• 선천적 혹은 후천적 사고로 인하여 시력 및 시각에 문제가 있는 사용자는 모

니터 화면을 볼 수 없는 환경에서 어떻게 컴퓨터를 사용할까?

독서 확대기(이미지)

스크린리더(이미지)

- 청각장애

• 기질적 또는 기능적인 장애가 원인이 되어 듣는 기능이 일시적이거나 영구적

으로 저하되거나 결여된 상태로 의사소통, 소리와 음성 확대, 청각신호를 시

• 각 신호로 전환시켜주는 보조도구가 필요

청력 장애로 들을 수 없는 사용자의 경우 정보통신기기를 어떻게 사용할까?

의사소통 보조기기(이미지)

화상 전화기(이미지)

1.3 정보취약계층 - 노인의 이해

1.3.1 노인의 이해

- 사전적 의미

나이가 들어 늙은 사람

- 사회복지법

65세 이상인 사람

- 국제 노년학회(International Association of Gerontology)

• 환경변화에 적절히 적응할 수 있는 자체조직에서 결손이 있는 사람

• 자신을 통합하려는 능력이 감퇴되어 가는 시기에 있는 사람

• 인체기관, 조직, 기능에 쇠퇴현상이 일어나고 있는 사람

• 생활체 적응성이 정신적으로 결손 되어 가고 있는 사람

• 조직 및 기능저장의 소모로 적응 감퇴현상을 겪고 있는 사람

1.3.2 노인과 인터넷

- 노인의 정보화 활동 장애 요인

[신체적 장애]

• 감각(시각, 청각, 촉각 등) 장애

• 신체(떨림, 신경, 운동 등) 장애

• 인지(지능, 기억, 언어, 학습 등) 장애 및 알러지(접촉, 음식, 호흡기 등)

[환경적 장애]

• 접근성 장애, 물리적 장애, 잘못된 편견 등

인터넷 사용의 장애 원인

• 대부분 노인은 전용 PC를 보유하지 않아 컴퓨터 및 인터넷의 환경에 접근이 어려움

• 시력이 약해 작은 모니터를 통한 정보 획득이 용이하지 못함

• TV나 라디오, 신문 등에 익숙하여 인터넷의 정보접근방식에 적응이 어려움

• 노인을 위한 정보화 관련교육장소가 양과 질적인 면에서 부족

• 인터넷에서 노인이 활용할 수 있는 정보 또한 부족

- 노인의 정보화 수준

• 우리사회가 점차 고령화 사회로 접어듦에 따라 현대사회에서의 노인문제는 가족이나

개인의 문제가 아니라 사회문제이며, 그 중에서도 정보화 격차 문제가 큰 문제로 대두

되고 있음

(표)

구분     2000.3    2000.12    2002.12    2003.12    2004.12    2005.12    2006.6

40 대      18. 6     22.7       38.9       50.8        58.3       67.2        71.0

50 대       3.3       5.7       17.5       23.2        27.6       34.7        37.5

60 대이상   3.3       5.7        3.2        5.1         7.3       11.0        15.2

• 2006년 6월 연령별 인터넷이용률 및 이용자수는 60대 이상의 인터넷이용률이 전년 대비 가장 큰

폭으로 증가

• 60대 이상의 인터넷이용률(15.2%)이 2005년 6월 대비 4.2%p 증가하여 가장 높은 증가 폭을 나

타냄

1.4 장애인 IT 환경 체험

1.4.1 시나리오 안내

- 시각장애 체험

• 전맹 체험

• 약시(저시력) 체험

• 색맹 체험

시야장애 체험

- 지체장애 체험

• 헤드 마우스 환경 체험

• 손가락 및 손 장애 체험

1.4.2 시나리오에 의한 체험

- 시각장애 체험 (전맹 체험)

준비물 : 안대 등과 같은 앞을 볼 수 없는 눈 가리개

실습사항

• 키보드 등과 같은 장치의 특정 버튼(Key)를 찾고 그 기능을 이해할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 특정 기능(전화걸기 또는 문자 송수신 등)에 대하여 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간은 얼마의 차이가 있는가를 알아보자

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (약시 체험)

준비물 : 안개막 등으로 제작된 안대 또는 시야를 많이 흐리게 할 수 있는 눈 가리개

실습사항

• 키보드 등과 같은 장치의 특정 버튼(Key)를 찾고 그 기능을 이해할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 특정 기능(전화걸기 또는 문자 송수신 등)에 대하여 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간은 얼마의 차이가 있는가를 알아보자

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (색맹 체험)

준비물 : 셀로판지(빨강, 파랑) 등으로 제작된 안대 또는 동일한 환경제공이 가능한

눈 가리개

실습사항

• 색상구분이 어려운 상황에서 정확한 내용을 이해할 수 있는가?

실습내용1

• 1. 실습자는 웹 브라우저를 활용하여 다양한 사이트를 방문한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 웹 사이트의 화면을 정확히 인식할 수 있는가를 알아보자.

인지하기 힘들거나 인지가 불가능 하다면 어느 부분이며, 어떠한 이유 때문인지를 확인해 보자.

• 3. 다양한 웹 사이트를 방문하며 셀로판지 색상에 따른 어려움을 알아보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 휴대폰 화면을 정확히 인지할 수 있는가를 알아보자.

문자 송수신 등 화면을 통한 기능 수행은 원활히 수행할 수 있는지를 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (시야장애 체험)

준비물 : 조그만 구멍(반지름: 0.25~0.3cm)이 뚫린 안대 또는 동일한 환경제공이

가능한 눈 가리개

실습사항

• 시야확보가 어려운 상황에서 정확한 내용 이해 및 기능 수행을 할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키에 대하여 실습을 여러 번 진행해 보자.

• 4. 실습자는 웹 브라우저를 활용하여 다양한 사이트를 방문한다.

• 5. 준비한 안대 또는 눈 가리개를 착용한 후 해당 웹 사이트의 화면을 정확히 인식할 수 있는가를 알아보자.

인지하기 힘들거나 인지가 불가능 하다면 어느 부분이며, 어떠한 이유 때문인지를 확인해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 휴대폰 화면을 정확히 인지할 수 있는가를 알아보자.

문자 송수신 등 화면을 통한 기능 수행은 원활히 수행할 수 있는가를 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (헤드 마우스 체험)

준비물 : 나무 또는 플라스틱 막대 (굵기 : 나무젓가락 정도, 길이 : 30~35cm)

실습사항

• 손을 사용하지 않고 머리 또는 목을 사용하여 키보드 등과 같은 장치에 대한 기능 수행이 가능한가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 막대를 사용(머리 위 또는 턱 아래에 손으로 고정)하여 해당 기능을 원활히 수행할 수 있는가를

알아보자. 가능하다면 손으로 수행할 때와의 시간 차이는 얼마인지 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 막대를 사용(머리 위 또는 턱 아래에 손으로 고정)하여 특정 기능(전화걸기 또는 문자 송수신 등)

에 대하여 원활히 수행할 수 있는가를 알아보자.

가능하다면 손으로 수행할 때와의 시간 차이는 얼마인지 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (손가락 및 손 장애 체험)

준비물 : 손 또는 손가락을 묶을 수 있는 고무줄이나 압박붕대

실습사항

• 손을 사용하지 않고 머리 또는 목을 사용하여 키보드 등과 같은 장치에 대한 기능 수행이 가능한가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비물을 사용하여 손가락을 묶은 후(중지, 인지, 약지 : 3~5번째 손가락) 해당 기능을 원활히 수행할 수

있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 3. 준비물을 사용하여 손가락을 묶은 후(검지와 중지 :2,3번째 손가락, 인지와 약지 :4~5번째 손가락) 해당

기능을 원활히 수행할 수 있는지 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 4. 준비물을 사용하여 모든 손가락을 묶은 후(주먹을 쥐거나 편 상태) 해당 기능을 원활히 수행할 수 있는가를

알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 5. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (손가락 및 손 장애 체험)

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비물을 사용하여 손가락을 묶은 후(중지, 인지, 약지 : 3~5번째 손가락)해당 기능을 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 3. 준비물을 사용하여 손가락을 묶은 후(검지와 중지 :2,3번째 손가락, 인지와 약지 :4~5번째

손가락) 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 4. 준비물을 사용하여 모든 손가락을 묶은 후(주먹을 쥐거나 편 상태) 해당 기능을 원활히 수행

할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 5. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

[과제]

개인과제

장애인 IT 체험 후기 작성

• 시각장애 체험 후 불편한 점 등에 대하여 알아보자

• 지체장애 체험 후 불편한 점 등에 대하여 알아보자

정보취약계층과 관련된 다양한 통계자료를 찾아보고 그 시사점을 논의해 보자

tag : 교안

마크업의 기초 DTD

2008-09-27T18:59:01Z

HTML 4.01 표준 문서 형식

"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 표준 문서 형식
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 표준 문서 형식
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
표준 문서 형식(Doctype)을 기반한 웹페이지에 대한 정확한 사용법은 다음과 같다.
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

...

...

tag : dtd

인터넷 웹 콘텐츠 접근성 지침(2005.12)

2008-09-26T19:16:50Z

인터넷 웹 콘텐츠 접근성 지침

1. 개 요
이 문서는 장애를 가진 사람들이 접근할 수 있도록 웹 콘텐츠를 제작하는 방법에 관하여 기술하고 있다.특별히 이 문서 내에 포함된 지침들은 웹 콘텐츠 저자,웹사이트
설계자 및 웹 콘텐츠 개발자들이 접근성(Accessibility)을 준수한 웹 콘텐츠를 쉽게 만들 수 있도록 도움을 주기 위하여 기획되었다.
이 지침을 제정하는 가장 큰 목적은 웹 콘텐츠에 접근하려는 모든 사람들이 어떤 컴퓨터나 운영체제, 또는 웹 브라우저(web browser)를 사용하든지, 또는 어떠한 환경에 처해 있는지에 구애받지 않고 접근할 수 있는 웹 콘텐츠를 제작할 수 있도록 도와주는것이다. 그렇다고 해서 이 지침이 장애인들의 접근권을 위하여 그래픽 이미지나 비디오 자료와 같이 장애인들이 접근하기 어려운 콘텐츠를 사용하지 못하도록 제한하는 것은 아니며, 이들 멀티미디어 콘텐츠들도 보다 광범위한 부류의 사람들이 용이하게 접근할 수 있도록 콘텐츠를 구성하는 방안을 제시하는데 주목적이 있다.
이 지침은 한국 정보통신접근성향상표준화포럼 산하 웹접근성분과위원회가 주축이 되어 제안하는 것으로 국제 표준화 기구인 W3C(World Wide Web Consortium)의
WAI(Web Accessibility Initiative)에서 1999년 5월 제정한 웹 콘텐츠 접근성 가이드라인(WCAG : Web Content Accessibility Guidelines 1.0)과 WCAG 2.0 초안 (2003년 6월 24일판)을 참고하였으며, 부분적으로 미국 재활법 508조를 참고하여 작성한것이다. 특히 제정시점을 기준으로 국내의 웹 환경 및 관련 보조기술의 실태를 조사하고 그 결과를 토대로 표준(안)을 마련하였다.

2. 표준의 구성 및 범위

2.1 지침 제정 목적
이 문서는 접근이 가능한 웹 콘텐츠를 만들기 위한 설계 원리를 개괄한다. 만일 이문서에서 제시하는 원리를 무시한 채로 웹 콘텐츠를 제작한다면 장애를 가진 사람들은 웹 콘텐츠에 접근할 수 없거나 접근하는 데에 어려움이 따르게 된다. 반면에 이 문서 에서 제시한 원리에 따라 웹 콘텐츠를 제작한다면 적절한 보조기술을 사용하는 장애인들은 해당 콘텐츠에 충분히 접근할 수 있을 것이다. 웹 문서를 설계함에 있어서 고려해야 하는 접근권의 유형은 다음과 같다.

1) 시각을 통하여 정보를 인지할 수 없거나 인지 능력이 떨어지는 시각장애가 있는경우
2) 청각을 통하여 음향 정보를 인지하지 못하는 청각장애가 있는 경우
3) 신경계의 마비, 근골격계의 마비 또는 선천성 기형 등으로 신체의 움직임에 제한
이 있는 지체장애가 있는 경우
4) 읽기나 문장 이해력이 떨어지는 언어장애가 있는 경우
5) 키보드나 마우스를 사용할 수 없는 장애가 있는 경우
6) 문서에 적용된 언어에 따라 말하거나 이해하는데 어려움이 있는 장애가 있는 경우 - 예를 들면 외국어로 작성된 콘텐츠를 이해하지 못하는 경우
7) 시각, 청각 또는 손을 사용하고 있어서 필요로 하는 일을 할 수 없는 경우 - 예를 들어 운전 중이나 소음이 많은 곳에서 일하는 경우로 장애라기보다는 처한 환
경에 따라 제한 받는 경우
8) 사용하고 있는 웹 브라우저의 종류나 버전이 다름으로 인하여 어려움이 발생하는 경우 등이다. 콘텐츠 제작자는 모든 사용자들이 충분히 접근할 수 있는 콘텐츠를 설계하거나 제작할 필요가 있다. 이 문서에서는 위에 열거한 경우에도 충분히 그 내용을 인지할 수 있도록 하기 위한 웹 콘텐츠의 설계 방법에 대한 지침을 제시할 것이다. 그러나 이 문서는 기본적인 목적이 HTML 문법을 교육시키거나 HTML을 이용하여 웹 문서를 설계하는데 필요한 기초적인 지식을 제공하려는 것은 아니다.

2.2 문서의 구성
이 문서에서는 사람들이 필요한 부분을 빠르게 찾아볼 수 있도록 하기 위해 서로 관계가 있는 항목들을 네 가지 지침으로 분류하였다. 즉, 웹 콘텐츠에 접근하기 위해 갖추어야 할 네 가지 주요 지침은 인식의 용이성,운용의 용이성,이해의 용이성,기술적 진보성의 네 가지이며,네 가지 지침은 각각 몇 개의 검사항목(또는 항목)으로 구성된다. 본 표준에서 제시하는 검사항목은 총 14개이다. 각 검사항목은 요구사항, 용어정의, 해당 항목을 준수함으로써 얻어지는 혜택 및 적용 예 등으로 구성된다.

3.접근성 있는 웹 콘텐츠 설계

이 문서에서 목표로 하는 것을 개괄하면, 모든 사용자가 그 내용을 인지할 수 있으며, 운용할 수 있고, 이해할 수 있는 웹 콘텐츠를 만들 수 있도록 하는 것이다. 이 경우에 현재까지 개발된 보조기술이나 앞으로 개발될 기술을 사용하는 경우도 염두에 두고 있다. 접근성이 준수된 웹 콘텐츠란 아래의 네 가지 지침을 만족하는 경우에 가능하다. 따라서 이 문서에서는 아래의 네 가지 지침에 포함되는 모든 검사항목을 만족해야 접근성이 있다고 하며, 일부분 또는 전체 검사항목을 만족하지 못하는 경우에는 접근성이 없는 웹 콘텐츠라고 정의한다.

가. 인식의 용이성 : 글로 표현할 수 없는 콘텐츠를 제외하고 장애 유형에 관계없이모든 사용자가 콘텐츠를 인지할 수 있도록 제공해야 한다.
나. 운용의 용이성 : 콘텐츠에 포함된 모든 구성 요소들은 장애 유형과 관계없이 모든 사용자가 사용할 수 있어야 한다.
다. 이해의 용이성 : 모든 콘텐츠는 가능한 한 그 내용과 사용 방법을 모든 사용자가 이해하기 쉽도록 구성해야 한다.
라. 기술적 진보성 : 현재 개발된 보조기술로는 접근이 어렵거나 불가능한 웹 콘텐츠는 가용한 보조기술을 이용하여 접근할 수 있도록 대체 콘텐츠를 함께 제공해야 한다.

접근성이 있는 웹 콘텐츠는 장애를 가진 사람들만이 아니라 다양한 사람들에게 도움을 줄 수 있다. 예를 들어 엘리베이터는 휠체어를 타고 있는 사람에게만 유용한 것이 아니라 유모차로 이동하는 사람이나 노약자에게도 유용하다. 마찬가지로 접근성이 있는 웹 콘텐츠는 장애를 가지고 있는 사람이나 그렇지 않은 사람 모두에게 도움을 줄 수 있다. 예를 들어, 소음이 심한 지역에서 웹사이트에 접근하거나 웹 문서상의 음성정보를 이용하는 경우에 캡션이 제공된다면 제한적인 환경에도 불구하고 그 내용을 알수 있을 것이다. 운전중인 경우에는 눈을 다른 데로 돌릴 겨를이 없기 때문에 문서를 읽어 주거나 음성정보를 제공하도록 구성된 콘텐츠가 매우 유용할 것이다. 마찬가지로 영화에 캡션(자막)이 제공된다면 검색 엔진을 활용하여 이 영화로부터 유명한 대사를 쉽게 찾을 수 있는 편리성을 제공하기도 한다.

여기서 고려해야할 장애의 유형과 장애를 극복하기 위하여 사용될 수 있는 대체 수단에 관한 몇 가지 방법을 살펴보자.

가. 들을 수 없는 사람은 일반적으로 소리를 통해 제공되는 정보를 눈으로 보고 싶어한다.
나. 볼 수 없는 사람은 시각적으로 제공되는 정보를 텍스트 또는 점자 정보로의 변환을 통해 듣거나 읽을 수 있기를 원한다.
다. 민첩하거나 용이하게 움직일 수 없는 사람은 가능한 한 적게 움직여서 원하는 일을 하거나 필요한 만큼 충분한 시간동안 작업 할 수 있기를 원한다.
라. 글씨를 잘 읽지 못하는 사람은 그 내용을 음성으로 읽어주기를 원한다.

위에 예로든 네 가지 경우는 모든 장애 유형이나 경우를 망라한 것이 아니며, 자주접하게 되는 경우에 이에 대한 대책을 예로 든 것이다. 따라서 보다 복잡한 경우에는 또 다른 접근 방법을 마련해야 한다. 만약 어떤 웹 콘텐츠가 이 문서에서 제시하는 항목에 따라 제작된다면 사용자는 보조기술을 사용하여 웹 콘텐츠에 쉽게 접근할 수 있다.예를 들어 스크린 리더(screenreader)와 적당한 웹 브라우저(web browser)를 사용하면 웹 페이지의 내용을 음성으로 읽어줄 수 있어서 음성으로 그 내용을 읽어주기 원하는 모든 사람들의 접근권을 보장할 수 있다. 스크린 리더와 같이 장애유형별로 웹 콘텐츠에 접근할 수 있도록 도와주는 많은 보조기술들이 개발되어 있으므로 장애 유형과 필요한 보조기술을 활용하여 웹 콘텐츠에의 접근성을 향상시킬 수 있다. 이와 관련한 사항은 관련 장애인 단체에서
제공하는 정보나 웹사이트를 참고하라.

지침 1. 인식의 용이성 - 웹사이트에서 서비스하고 있는 모든 콘텐츠는 누구나 쉽게 인식할 수 있도록 설계되어야 한다.

항목 1.1 (텍스트 아닌 콘텐츠(non-text contents)의 인식) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.

가. 용어 정리
(1) 텍스트 아닌 콘텐츠(non-text contents)란 그림,이미지 등으로 제작된 텍스트,애니메이션, 아스키(ASCII) 그림문자, 목록표시 이미지, 그래픽 버튼, 음성음향자료 또는 비디오 자료 등의 오디오와 영상과 같이 표준 문자(부호) 체계가 아닌, 시각적 또는 청각적 정보가 포함된 콘텐츠를 의미한다. 한글 부호의 경우에는 유니코드, 조합형 또는 완성형 부호체계를 사용하여 작성된 텍스트 외의 모든 경우를 의미한다.
(2) 빈 문자(blank text)란 아무런 정보도 가지고 있지 않은 문자열을 의미한다.
HTML 등의 문법에서 빈 문자는 “”을 가리킨다. 즉, 빈 문자를 스크린 리더에서 읽으면 아무런 소리도 나지 않는다.

나. 요구 조건
(1) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 콘텐츠는 모두 해당 콘텐츠와 정확하게 일치하는 텍스트 콘텐츠(text contents)와 함께 제공해야 한다.
(2) 만약, 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 없는 경우는 해당 콘텐츠에 대한 설명을 텍스트로 반드시 제공해야 한다. 이 때, 제공되는 텍스트 콘텐츠는
설명하고자 하는 원래의 콘텐츠의 내용이나 형태 등의 상세한 정보를 제공해야한다.
(3) 텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트는 콘텐츠 제작자가 원래의 콘텐츠를 사용해 표현하고자 했던 의미나 기능도 포함하여 설명
해야 한다.
(4) 텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트를 읽어줌으로 인하여 의미의 혼동을 줄 경우에는 빈 문자(blank text)를 대체 텍스트로 사용해야 한다.

다. 적용시 장점
(1) 시각장애 또는 인지장애 등으로 인해 시각으로 정보를 습득하는 데에 어려움을 겪는 사용자들이 스크린 리더(screen reader)와 같은 보조기술을 사용하여 텍스트 콘텐츠를 음성을 통해 읽음으로써 접근권을 보장받을 수 있게 된다.
(2) 청각장애나 다른 이유로 음향 정보를 알아들을 수 없는 사용자들을 위해 그 내용을 텍스트로 표시하거나 수화로 해당 내용을 번역함으로써 접근이 가능하게된다.
(3) 시각장애인은 물론 시각장애와 청각장애를 함께 갖고 있는 사용자 역시 해당 콘텐츠를 점자로 변환해 읽음으로써 접근권을 보장받을 수 있게 된다.
(4) 몇 개의 자료를 순서대로 나열하는 목록 등 해당 이미지가 단순히 홈페이지를 아름답게 꾸미기 위해 사용된 경우에는 이미지에 대한 대체 텍스트(alt-text)로 빈 문자를 사용하면 의미의 불필요한 혼동을 줄일 수 있다.

라. 적용 예
(1) 버튼으로 사용된 이미지 : 간단한 기능 설명부가 슬라이드 쇼에서 다음 슬라이드로 넘어가는 역할을 하도록 만든 오른쪽 화살표 모양의 이미지 링크(image link)의 경우에 이 버튼 이미지와 함께 "다음 슬라이드"라는 대체 텍스트를 함께 제공한다면 스크린 리더는 이 이미지 버튼을 "링크 - 다음 슬라이드"라고 읽어줄 수 있게 된다.
(2) 데이터 차트 : 간단한 레이블과 충분한 설명을 함께 제공
예를 들어 어떤 상품의 6월, 7월 및 8월의 판매실적을 비교해 보여주는 차트에 "그림 1 : 6월, 7월 및 8월의 판매 현황"이라는 간단한 레이블(label)을 붙이고, 차트에 대한 보다 긴 설명문(longdesc)을 붙인다면 해당 차트의 내용과 해당 차트가 표시하고
있는 정보를 사용자에게 전달할 수 있다.
(3) 애니메이션 : 간단한 레이블과 충분한 설명을 함께 제공
예를 들어 매듭을 짓는 방법을 보여주는 애니메이션의 경우에 "매듭을 만드는 형태를 보여주는 애니메이션"이라는 간단한 레이블과 함께 매듭짓기 위하여 손놀림하는 동작을 자세하게 설명하는 설명문을 붙인다면 매듭을 만드는 전 과정을 이용자가 자세하
게 알 수 있다.
(4) 연설 녹음자료 : 간단한 레이블과 긴 설명을 함께 제공웹 페이지에 음성 데이터가 포함되어 있는 경우에 이 데이터와 함께 간단한 제목을 레이블로 구성하고 음성 데이터의 내용에 대한 텍스트를 함께 제공한다면 청각장애인의 경우에도 모든 정보를 얻을 수 있다.
(5) 음악 자료 : 간단한 레이블 제공
예를 들어 베토벤의 교향곡 제 5번의 연주실황을 제공하는 음악 파일을 웹 페이지에서 제공하고 있는 경우에 이 음악 파일과 함께"베토벤 교향곡 제5번, 빈 필하모닉 오케스트라의 연주"라는 레이블을 함께 제공한다면 청각장애인의 경우에 음악 파일이 무슨 내용을 담고 있는지를 쉽게 알 수 있다.

항목 1.2 (영상매체의 인식) 시간에 따라 변화하는 영상매체는 해당 콘텐츠와 동기 되는 대체 매체를 제공해야 한다.

가. 용어정리
(1) 시간에 따라 변화하는 영상매체(time-dependent presentation)란 영화와 같이 소리와 영상정보가 동시에 제공되는 경우 혹은 콘텐츠 재생 과정의 특정 시점에서 사용자와의 상호작용 또는 대화가 필요한 매체를 말한다.
(2) 대체 매체(equivalent media)란 영상매체의 음향정보를 캡션과 같이 시각적으로 보여주거나 영상의 기본적인 내용을 화면해설 형태로 제공하는 매체를 의미한다.
(3) 화면해설(audio descriptions)이란 영상의 광경, 동작, 비언어적 표현, 그래픽 등의 상태나 변화를 음향정보로 나타내거나 텍스트로 제공하여 필요한 설명을 제공하는 것을 의미한다.화면해설은 해당 이벤트와 동기 되어 진행되어야 한다.
(4) 캡션(Captions)이란 영상매체에 포함된 말, 음향 및 주변소리 등을 텍스트로 표현한 매체를 의미한다. 따라서 캡션은 영상매체의 진행에 따라 해당 이벤트와 동기되어야 한다.

나. 요구조건
(1) 음향 정보로부터 사용자가 충분한 정보를 얻을 수 없는 모든 영상매체는 캡션을 함께 제공해야 한다.
(2) 캡션은 영상매체나 음향매체와 동기 되어야 한다.
(3) 모든 생방송은 캡션을 실시간으로 제공해야 한다. 단 음성이 없는 음악 방송의 경우에는 예외로 한다.
(4) 콘텐츠는 사용자가 캡션과 영상정보를 동시에 접해야 그 내용을 이해할 수 있도록 구성되어서는 안 된다. 즉, 캡션과 영상정보는 서로 보완관계가 되지 않아야
한다.

다. 적용시 장점
(1) 청각장애인은 음향매체와 함께 제공되는 캡션을 통해 음성이나 음향 정보에 접근이 가능하게 된다. 또한, 캡션을 활용하면 해당 콘텐츠에 대한 인덱스를 작성
하거나 내용을 검색할 때에도 유용하게 사용될 수 있다.
(2) 장애인이 아닌 경우에도 영상매체와 함께 동기 되는 대체 매체가 제공되는 경우에 보다 편리하게 콘텐츠를 활용할 수 있다. 예를 들어 캡션은 소란한 환경이나
오디오 재생기능이 갖추어져 있지 않은 경우 유용하며, 외국어 습득과 같이 언어능력이나 읽기 능력을 높이는데 활용될 수 있다.
(3) 화면해설의 경우에는 화면을 보지 않더라도 중요한 정보를 음성으로 알 수 있게 해주므로 시각을 통해 사물을 인식하기 어려운 장애인의 경우에는 화면해설을
통해 화상정보를 인지할 수 있다. 그러나 화면해설은 필수사항으로 분류하지 않는다.

라. 적용 예
(1) 동영상 : 화면해설과 캡션 활용
예를 들어, 한 아이가 강아지를 자신의 침대로 오도록 과자를 늘어놓고는 강아지에게 웅얼거리며 무언가를 말하고 있는 장면을 가정한다면, 화면을 볼 수 없는 사람은 이 장면을 이해할 수 없다.따라서 이 경우에"이 아이가 계단으로부터 자기 침실에 이르는 계단마다 과자를 하나씩 늘어놓았다"라는 화면해설과"아이가 웅얼거린다"라는 캡션을 제공한다면 청각장애인이나 시각장애인 모두 그 내용을 정확히 이해할 수 있다.
(2) 뉴스 동영상 : 영상과 동기되는 캡션 제공
예를 들어, 홍수가 난 대도시의 광경을 기자가 설명하고 있다고 가정할 경우에 기자가 하는 말을 캡션으로 표시하면 청각장애인이 기자의 이야기를 인식할 수 있게 된다.
(3) 무언극 : 장면별로 장면소개 텍스트 제공
예를 들어, 사다리를 올라가는 무언극(팬터마임 : pantomime)의 한 장면을 애니메이션으로 구성하였을 경우에“사다리를 올라가는 장면”이라는 대체 텍스트를 애니메이션에 포함시키면 이로써 충분한 정보를 사용자에게 제공할 수 있다.

항목 1.3 (색상에 무관한 인식) 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.

가. 용어정리
(1) 고 대비(high contrast) 모드란 흑백과 같이 대비차가 매우 크도록 조정하여 화면에 표시하는 방식을 의미한다.

나. 요구사항
(1) 콘텐츠가 제공하는 텍스트나 그래픽 정보는 색상을 제거하더라도 그 내용을 인지할 수 있어야 한다.
(2) 웹 페이지에서 보여주는 정보와 배경색 간에는 충분히 대비가 되어야 한다. 특히 웹 페이지의 내용을 고 대비(high contrast) 모드로 표시했을 때에도 충분히
명암대비가 되도록 콘텐츠를 설계하여야 한다.

다. 적용시 장점
(1) 색상의 차이가 정보의 다름을 나타내지 않으므로 색각(색맹 또는 색약) 이상자의 경우에도 혼동을 일으킬 염려가 없게 된다.
(2) 도표 등의 경우에 사용하는 색상의 명암 대비가 충분하므로 약시자의 경우에도 도표를 정확히 인지할 수 있다.
(3) 고대비 모드를 사용할 수밖에 없는 사용자들도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있다.

라. 적용 예
(1) 그래프 및 차트 : 색깔보다는 무늬를 이용한 표현 권장
파이 차트, 막대그래프나 꺾은 선 그래프 등을 이용하여 정보를 표시하는 경우에 각각의 영역을 색깔로 구분하기보다는 여러 가지 무늬를 이용하여 표시하면 색상을 인식할 수 없는 사용자들,예를 들면 약시자나 색각이상자가 쉽게 이해할 수 있다.
(2) 중요한 항목 표시 : 색깔보다는 특수기호 사용 권장
예를 들어,가입자의 신상 정보를 입력하는 웹 페이지에서 필수항목을 색깔(예를들어 빨간색)을 사용하여 표시하는 경우에 이 색깔을 인지하지 못하는 색각 이상자의 경우에는 이 항목의 중요도를 인지할 수 없다.따라서 색깔 대신 특수 기호(예를 들어별표)를 이 항목에 추가하면 대부분의 사용자가 이 항목이 중요한 항목인지를 쉽게 인지할 수 있다.

지침 2 운용의 용이성 - 웹 콘텐츠에 포함된 모든 요소들의 기능은 누구나 쉽게 사용할 수 있어야 한다.

항목 2.1 (이미지 맵 기법 사용 제한) 이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하며 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.

가. 용어 정리
(1) 이미지 맵(image map)이란 이미지의 일부 영역에 링크를 두어 사용자에게 해당 정보를 제공할 수 있는 페이지로 이동하도록 만드는 프로그램 기법이다.
(2) 서버측 이미지 맵(server-side image map)이란 이미지 맵을 구현하는 프로그램이 서버측에 존재하여 사용자의 웹 브라우저가 이미지 맵 상의 어떤 그림 위에 마우스를 위치시키고 클릭하면 클라이언트가 마우스의 위치정보를 서버로 제공하고, 서버는 전달되어온 마우스의 위치에 해당하는 이미지 맵의 영역이 지시하는
링크로 이동한 결과를 클라이언트에 표시하는 방식의 프로그램 기법이다.
(3) 클라이언트측 이미지 맵(client-side image map)이란 HTML 태그를 이용하여 사용자의 브라우저에서 이미지 맵의 영역을 식별하여 직접 해당 영역이 지시하는
링크로 이동하도록 하는 프로그램 기법이다.

나. 요구조건
(1) 구성하려는 이미지 맵의 형태를 클라이언트측에서 기하학적으로 표현하기 어려운 경우가 아니면 서버측 이미지 맵을 사용하지 않는다.
(2) 서버측 이미지 맵 기법을 사용할 경우에는 이미지 맵의 영역에 대응하는 텍스트 링크를 별도로 제공해야 한다(항목 1.1 참조).
(3) 클라이언트측 이미지 맵을 사용할 경우에는 이미지 맵의 영역에 대한 충분한 대체 텍스트를 제공하여야 한다(항목 1.1 참조).

다. 적용시 장점
(1) 서버측 이미지 맵 방식에서 서버는 해당 영역에 대한 대체 텍스트를 사용자에게 제공하지 못하며,단지 컴퓨터 화면상에 표시할 뿐이다.따라서 이 항목을 적용
하면 대체 텍스트 링크가 없는 서버측 이미지 맵의 사용을 제한하므로 시각장애인의 접근성을 높일 수 있게 된다.
(2) 클라이언트측 이미지 맵을 사용하는 경우에도 영역을 표시하는 부분에 대체 텍스트를 함께 표시한다면 이미지 맵의 영역을 읽어주므로 시각장애인들이 이미지
맵의 어느 영역을 가리키고 있는지를 확인할 수 있다(항목 1.1 참조).

라. 적용 예
(1) 클라이언트측 이미지맵 : 대체 텍스트 지원
태그를 사용하여 클라이언트측 이미지 맵을 작성할 경우 대체 텍스트를 해당 영역에서 제공하여야 한다.
(2) 서버측 이미지맵 : 링크목록 제공
서버측 이미지 맵을 사용할 경우에는 대체 텍스트로 구성된 링크목록을 같은 페이지에 제공하면 시각장애인들이 텍스트 링크를 사용하여 필요한 작업을 할 수 있
다(항목 1.1 참조).

항목 2.2 (프레임의 사용 제한) 콘텐츠를 구성하는 프레임의 수는 최소한으로 하며, 프레임을 사용할 경우에는 프레임별로 제목을 붙여야 한다.

가. 용어 정리 : 없음

나. 요구조건
(1) 웹 콘텐츠에는 가급적 프레임을 사용하지 않아야 한다. 만일 프레임을 사용하는 경우에도 사용하는 프레임의 수를 최소한으로 줄여야 한다.
(2) 프레임을 사용할 경우에는 프레임 별로 서로 독특한(중복되지 않는) 제목을 부여하여 프레임을 식별할 수 있어야 한다.

다. 적용시 장점
(1) 화면을 볼 수 있는 사용자는 한 페이지를 여러 개의 영역으로 구분한 프레임을 볼 수 있다. 그러나 화면을 볼 수 없는 시각장애인에게 여러 개의 프레임으로 구성된 페이지는 모든 프레임의 내용을 인지하기 어렵다. 따라서 여러 개의 프레임으로 구성된 웹 페이지에서 각각의 프레임에 제목을 부여하면 활성화된 프레임
의 제목을 읽어주기 때문에 프레임간의 이동이 매우 편리하다.

라. 적용 예
(1) 프레임 : 프레임별 제목 부여
여러 개의 프레임으로 구성된 웹 콘텐츠에서 각각의 프레임에 제목을 부여할 수있다. 예를 들어, 두개의 프레임으로 구성된 웹 페이지의 경우에 각각의 프레임 제
목을 “순이”와 “철수”라고 명명한다면 현재 활성화된 프레임의 이름을 읽어 볼 수 있으므로 엉뚱한 프레임에서 작업하는 잘못을 방지할 수 있다.

항목 2.3 (깜박거리는 객체 사용 제한) 콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.

가. 용어 정리
(1) 스크립트(script)란 컴퓨터에 자동으로 처리를 실행하기 위한 명령을 나열한 파일로 일반적으로 텍스트 파일 형식으로 제공되는 것이다.

나. 요구조건
(1) 웹 콘텐츠에는 애니메이션 등과 같이 깜빡거리는 주파수의 범위가 3 Hz에서 49Hz 사이인 콘텐츠 요소들을 포함하지 않아야 한다.
(2) 만일 위의 (1)에서 명시한 요구조건을 만족할 수 없는 웹 콘텐츠는 깜빡거림이 있는 웹 페이지로 이동하기 전에 이 페이지에 깜빡거림이 있음을 사전에 사용자
에게 경고해주어야 한다. 또한, 스크린의 깜빡거림이 배제된 대체 페이지를 별도로 제공하여야 한다(항목 1.1 참조).

다. 적용시 장점
(1) 광과민성 발작 증세를 지닌 사람들은 빛이 깜빡거리는 것에 반응하여 발작을 일으킨다. 특히 3Hz에서 49 Hz의 사이의 깜빡거림은 발작을 일으키는 원인이 되
며, 20Hz 부근이 발작을 가장 잘 일으키는 주파수이다. 따라서 요구조건 (1)을만족하는 콘텐츠의 경우에는 광과민성 발작중세가 있는 사용자도 접근이 가능하
다.
(2) 정신이 산만한 사람의 경우에는 계속적인 깜빡거림이 있는 콘텐츠를 집중하여 응시할 수 없으므로 이 요구조건을 만족하는 콘텐츠는 정신이 산만한 사람도 접
근이 가능하다.

라. 적용 예
(1) 첫 페이지 구성 : 깜박거리는 개체 배제
웹사이트에 처음 접속했을 때에 스크린에 나타나는 첫 페이지에는 최소한 깜빡거림이 없도록 콘텐츠를 구성하며, 만일 다음 페이지에 깜빡거림이 있는 콘텐츠가
포함되어 있을 경우에는 경고문을 첫 페이지에 표시하고, 깜빡거리는 콘텐츠를 제거한 대체 페이지와 이 페이지로 이동하는 링크를 제공하도록 구성한다.
(2) 스크립트 사용 : 스크립트 동작하지 않도록 설정
스크립트를 이용하여 깜빡이는 텍스트(blinking text)를 구성하면 스크립트가 동작하지 않도록 함으로써 깜빡임을 제거할 수 있다.
(3) 프로그래밍 기법 : 객체를 깜박거리게 하는 태그 사용 배제
또는 태그는 사용하지 않는다.

항목 2.4. (키보드로만 운용 가능) 키보드(또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.

가. 용어정리
(1) 키보드 인터페이스란 키보드 또는 특수한 입력장치로부터 응용프로그램이 필요한 모든 정보를 입력받도록 하는 장치를 의미한다.
(2) 포인팅 디바이스(pointing device)란 마우스나 터치패드와 같이 컴퓨터 화면의 특정한 부위를 직접 지정할 수 있는 장치를 의미한다.
(3) 음성 입력 장치란 음성으로 컴퓨터를 제어할 수 있도록 구성한 시스템 또는 시스템을 구성하도록 하는 프로그램을 의미한다.

나. 요구조건
(1) 웹 콘텐츠는 키보드 또는 장애를 극복하도록 도와주는 여러 가지 입력 장치를 사용하는 경우에도 콘텐츠가 제공하는 모든 기능을 사용할 수 있어야 한다.

다. 적용시 장점
(1) 포인팅 디바이스(pointing device)를 사용할 수 없는 시각장애인들도 웹 콘텐츠나 웹사이트 기능을 키보드만으로 사용할 수 있다.
(2) 키보드 또는 키보드 인터페이스를 사용할 수 없는 지체장애인의 경우에는 키보드 대신 음성 입력 장치를 이용하여 웹 콘텐츠에 접근할 수 있다.

라. 적용 예
(1) 이벤트 발생 방법 : 다양한 입력장치 사용 가능
웹 콘텐츠에서는 포커스인(focus-in), 포커스 아웃(focus-out), 그리고 활성화(activation)의 세 가지 이벤트가 주로 사용된다. 또한, 이들 이벤트는 포인팅 디바
이스(예를 들어 마우스), 키보드, 음성 입력 시스템과 같은 다양한 입력 디바이스로 제어가 가능하다.
(2) 콘텐츠의 제어 : 키보드 또는 키보드 인터페이스 사용 가능 콘텐츠를 구성하는 모든 링크와 데이터 개체의 실행과 선택은 키보드 또는 키보드 인터페이스를 사용하여 수행할 수 있도록 구성한다. 예를 들어, 웹 페이지를 구성하는 콘텐츠 요소들 간의 이동은 탭(tab)키를 사용하여 가능하도록 구성한다.

항목 2.5 (반복 네비게이션 링크(repetitive navigation link)) 웹 콘텐츠는 반복적인네비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도
록 구성하여야 한다.

가. 용어 정리
① 반복적 네비게이션 링크(repetitive navigation link)란 여러 개의 네비게이션 링크들이 연속적으로 나열되어 있는 링크 개체를 의미한다. 스크린 리더는 반복적 네비게이션 링크 개체를 구성하는 모든 링크들을 순서대로 읽어주므로 콘텐츠의 핵심 부분으로 이동하기 위해서는 모든 링크를 읽어주는 시간이 필요하게 된다.

나. 요구조건
(1) 웹 콘텐츠 상에 반복적 네비게이션 링크 개체가 포함되어 있으며 이 링크 객체가 콘텐츠의 핵심부분보다 먼저 읽어주도록 구성된 경우에 이들 링크들의 읽기
를 생략하고 직접 콘텐츠의 메인 부분으로 직접 이동할 수 있는 링크를 제공하여야 한다.
(2) 하나의 긴 문장으로 구성된 웹 페이지는 이 페이지의 문장을 여러 개의 논리적인 절로 구분하고 각 절의 색인을 콘텐츠의 첫 부분에 포함시켜 원하는 절의 시작 부분으로 직접 이동할 수 있도록 웹 페이지를 구성한다.
(3) 모든 웹사이트는 텍스트 또는 대체 텍스트가 포함된 텍스트 아닌 콘텐츠로 구성된 사이트 맵을 제공하여야 한다.

다. 적용시 장점
(1) 이 항목을 만족하는 경우 페이지의 상단이나 좌측 프레임에 반복적 네비게이션 링크개체가 포함되어 있다면 스크린 리더 사용자는 이들 링크 목록을 순서대로읽어준 후에야 필요한 부분을 읽어주므로 매우 지루한 과정이 요구된다. 그러나 이 페이지의 처음에 핵심 부분으로 이동할 수 있는 링크를 제공하면 빠르게 필요한 위치로 이동할 수 있다.
(2) 하나의 긴 문장으로 구성된 콘텐츠 중에서 사용자가 원하는 부분을 찾기 위해서는 처음부터 모두 읽어야 함으로 필요한 부분을 찾는 것은 매우 지루한 일이다.
따라서 문장의 시작 부분에 색인을 제공하여 필요한 부분으로 직접 이동하도록 하는 것은 매우 편리한 기능이다.
(3) 사이트 맵을 제공하면 사용자는 이를 이용하여 필요한 정보가 위치한 페이지로 직접 이동할 수 있다.

라. 적용 예
(1) 메인 콘텐츠로의 직접 이동 : 프레임과 링크 사용 예
만일 웹 콘텐츠를 두 개의 프레임으로 구분하고 왼쪽 프레임을 반복적 네비게이션 링크용 프레임으로, 오른쪽 프레임을 메인 콘텐츠를 제공하도록 구성할 경우를 생각해 보자. 스크린 리더는 왼쪽의 반복적 네비게이션 링크 프레임의 내용을 모두 읽은 후에야 비로소 중앙의 메인 콘텐츠를 읽어주게 된다. 따라서 왼쪽 프레임에 있는 모든 반복적 네비게이션 링크들을 우회하여 직접 메인 콘텐츠로 이동하는 버튼을 두고, 이 버튼에 “메인 콘텐츠로 이동”이라고 레이블을 붙인다면 반복적 네비게이션 링크 개체 모두를 읽지 않고도 메인 콘텐츠 부분으로 직접 이동이 가능하게 된다.
(2) 문서 목차 : 긴 문서의 탐색용이하나의 긴 문서로 구성된 웹 콘텐츠의 시작부분에 이 문서의 목차와 해당 위치로 직접 이동할 수 있는 링크를 제공하고,문서가 나누어지는 부분에 문서의 처음,다음 절, 목차 등으로 이동할 수 있는 링크를 두면 문서를 탐색하는데 매우 편리하다.
(3) 웹사이트 : 사이트 맵의 운영
웹 콘텐츠의 첫 페이지에 사이트 맵으로 이동하는 링크를 제공하면 모든 페이지를 열람하지 않고도 필요한 웹 페이지로 직접 이동이 가능하다.

항목 2.6 (반응시간의 조절기능) 실시간 이벤트나 제한된 시간에 수행하여야 하는 활동등은 사용자가 시간에 구애받지 않고 읽거나, 상호작용을 하거나 응답할 수 있어야 한다.

가. 용어정리
(1) 실시간 이벤트(real-time event)란 콘텐츠의 저자가 시간을 통제할 수 없는 실시간 상황에 벌어지는 이벤트를 의미한다.
(2) 정해진 시간 내에 응답이 필요한 콘텐츠들은 다음과 같다.
(가) 자동적으로 갱신되도록 구성된 콘텐츠
(나) 몇 초 후에 다른 페이지로 이동하도록 구성된 콘텐츠
(다) 깜빡이는 텍스트나 스스로 스크롤 하도록 구성된 텍스트
(라) 짧은 기간 동안 나타났다 일정시간 후에 사라지는 대화창
(마) 일정시간 동안 사용하지 않으면 페이지에 대한 접근이 강제 차단되거나 사용 할 수 없게 되는 콘텐츠
(3) 팝업(Pop-Up) 창이란 활성화되어 있는 웹 브라우저에 담긴 콘텐츠가 어떤 동작에 의하여 또는 자동으로 새로 열린 웹 브라우저 창을 의미한다. 그러나 운영체 제가 표시하는 메시지 창은 팝업 창으로 분류하지 않는다.

나. 요구조건
(1) 웹 콘텐츠의 시간 제약 조건이 최소한 아래의 항목 중 하나는 만족하여야 한다.
(가) 사용자가 시간제한 기능을 동작하지 않도록 할 수 있거나,
(나) 일반적으로 사람들이 선호하는 시간의 10배 이상으로 제한 시간을 늘릴 수 있거나,
(다) 주어진 시간이 종료하기 전에 경고를 발하며, 제한 시간을 늘리기 위하여 최소 한 10초 이상 시간이 주어질 수 있어야 한다.
(2) 그러나 아래의 항목은 예외로 하되, 시간제약이 있음을 이 페이지에서 분명하게 알려 주어야 한다.
(가) 경매 등과 같이 시간 제약이 있으나 다른 대안이 없는 경우거나,
(나) 실시간 게임이나 시간이 정해진 범위에서 작업해야 하는 테스트 등과 같이 시간 제약이 필수적인 경우
(3) 팝업(Pop-Up) 창은 가급적 사용을 피해야 한다. 그러나 꼭 사용해야 하는 경우에는 팝업 창이 열리기 전에 사용자에게 경고를 할 수 있어야 한다. 또한 팝업창이 열리더라도 포커스가 새로 열린 팝업 창으로 이동해서는 안 된다.

다. 적용시 장점
(1) 독서 장애, 인지 장애, 학습 장애를 지닌 사람들은 기록된 문서를 읽고 이해하는 데에 대부분의 사람들보다 더 많은 시간을 필요로 하는 경우가 종종 발생한다.
(2) 지체장애인들은 이동 객체에 대해 반응할 만큼 빠르게 동작하거나 정확하게 움직일 수 없다.
(3) 자주 갱신되는 콘텐츠에서 보조 기술이나 음성 브라우저 등이 정해진 시간 내에 이 콘텐츠를 읽거나 처리하는 것이 곤란한 경우에 시간 제약에 구애받지 않도록 할 필요가 있다.
(4) 팝업 창을 사용하면 시각장애인의 경우에 새로운 창의 열고 닫힘을 잘 알 수 없으므로 매우 불편하다. 그러나 부득이해서 팝업 창을 사용해야만 하는 경우에는 창이 열리기 전에 사용자에게 이를 알려주어 시각장애인들이 팝업 창이 열린다는 것을 사전이 인지하도록 하는 것이 좋다.

라. 적용 예
(1) 시간제약이 없는 콘텐츠 구성
웹 콘텐츠를 구성할 경우에 시간제한을 두지 않도록 한다.
(2) 시간제한이 있는 콘텐츠 구성
시간제한을 둘 경우에는 이러한 사항을 사용자가 충분히 알 수 있도록 공지하도록 한다. 이를 위하여 경과시간과 남은 시간을 화면에 표시하거나 그 값을 스크린리더로 사용자에게 알려줄 수 있다.

지침 3. 이해의 용이성 - 사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.

항목 3.1 (데이터 테이블 구성) 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

가. 용어 정리
(1) 데이터 테이블(data table)이란 테이블을 구성하는 데이터간의 논리적 관계를 표현하기 위하여 사용하는 형태이다.

나. 요구 조건
(1) 데이터 테이블은 테이블의 제목이나 테이블의 내용을 요약하여 제공해야 한다(항목 1.1 참조).
(2) 데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성하여야 한다.

다. 적용시 장점
(1) 데이터 테이블을 요구 조건에 맞추어 제작한 경우에는 임의의 데이터 셀에 대응되는 모든 헤더 값을 알 수 있다.

라. 적용 예
(1) 간단한 데이터 테이블 구성
HTML을 이용하여 간단한 데이터 테이블을 구성하는 경우에 데이터 셀과 헤더는 각각
와 태그를 사용하여 테이블을 구성한다.
(2) 복잡한 데이터 테이블 구성
HTML에서 행을 그룹화 하는데 THEAD, TFOOT, TBODY 등의 속성을 사용하고, 열을 그룹화 하는 데는 COL, COLGROUP 등의 속성을 사용한다. 보다 복잡한 테이블의 구성을 위해서는 “axis", "scope", "headers"등의 속성을 이용한다.
(3) 데이터 테이블 설명
HTML 4.01에 따라 데이터 테이블을 구성하는 경우에 테이블에 대한 설명은 태그를 사용하여 표시할 수 있다. 또한

태그를 사용하여 테이블의 간단한 제목을 표시할 수도 있다. 태그를 사용해도 동일한 효과를 얻을 수 있다. 즉, 데이터 테이블의 제목(title)은 도표의 첫 부분(상단 처음)에 오도록 하여 이어지는 자료가 데이터 테이블임을 알도록 하면 편리하다.

항목 3.2 (논리적 구성) 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야한다.

가. 용어정리
(1) 배치용 테이블(layout table)이란 데이터 테이블과는 달리 문서의 모양을 만들기 위한 목적으로 사용하는 테이블이다.
(2) 스타일 시트(style sheet)란 문서의 표현 형태를 규정하는 일련의 명령문을 의미한다. 스타일 시트는 콘텐츠 제공자가 마련한 것,사용자가 마련한 것, 웹 브라우저에 내장된 형태 등의 세 가지 경우가 있다. CSS(Cascading Style Sheets)레벨2가 스타일 시트의 대표적인 규정이다.

나. 요구사항
(1) 문서의 모양이나 콘텐츠의 배치를 위해서는 스타일 시트(style sheet)를 사용하여야 한다.
(2) 배치용 테이블을 사용하여 콘텐츠의 모양이나 배치를 할 경우에는 테이블을 구성하는 모든 셀들을 왼쪽상단에서 오른쪽 하단에 이르는 순서대로 늘어놓았을때에도 그 내용을 충분히 이해할 수 있도록 구성해야 한다.

다. 적용시 장점
(1) 논리적으로 구성된 웹 콘텐츠는 스타일 시트(style sheet)를 바꾸거나 기능을 제거하더라도 그 내용을 순서대로 읽을 수 있으므로 문서의 의미를 이해하는데 어려움이 없다.
(2) 배치용 테이블은 종종 일정한 형태를 표현하기 위하여 사용된다. 이 경우에도 스크린 리더로 읽어주는 내용의 순서가 화면에 나타난 콘텐츠의 읽는 순서와 같아지게 된다.

라. 적용 예
(1) 배치용 테이블 : 배치용 테이블은 캡션(CAPTION)이나 타이틀(TITLE) 태그를 사용하지 않는다.
(2) 스타일 시트 : 스타일 시트를 사용하여 콘텐츠의 모양이나 배치를 구성할 경우에는 스타일 시트 기능을 제거하거나 다른 스타일 시트를 사용하더라도 그 내용을 이해하기 쉽게 콘텐츠를 구성하여야 한다.

항목 3.3 (온라인 서식 구성) 온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.

가. 용어 정리
(1) 온라인 서식(on-line form)이란 웹 브라우저 상에서 작성하여 제출하도록 제공되는 양식을 의미한다.
(2) 애플릿(applet)이란 웹 페이지에 삽입되는 프로그램을 의미한다.
(3) 플러그인(plug-in)이란 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.

나. 요구 조건
(1) 온라인 서식을 구성하는 모든 서식 제어 요소, 예를 들면, 편집 상자(edit box), 라디오 버튼(radio button), 체크 박스(check box) 등은 레이블과 해당 서식 제어 요소간의 표시 순서가 일정하여야 한다.
(2) 탭(tab)키를 이용하여 서식 제어 요소 간을 이동할 경우에 그 순서가 왼쪽 위에서 오른쪽 아래 부분으로 순차적인 이동이 가능하여야 한다.
(3) 서식을 구성할 때에 보조기술을 사용하면 접근이 가능한 경우에만 스크립트, 애플릿,플러그인 또는 다른 프로그램 요소를 사용한다.만일 이것이 불가능할 경우에는 스크립트, 애플릿(applet), 플러그인(plug-in) 등 프로그램 요소의 기능을 정지시켜도 온라인 서식을 작성할 수 있어야 한다(항목 4.1 참조).

다. 적용시 장점
(1) 요구조건을 만족하는 경우에는 온라인 양식을 작성함에 있어서 모든 서식 제어요소의 레이블과 서식 제어 요소간의 관계가 일관성을 가지게 되므로 사용자는 혼란을 피할 수 있게 된다.

라. 적용 예
(1) 편집 박스 프로그래밍 예 : 예를 들어, 레이블 다음에 편집 박스(edit box)가 위치하는 경우에는 다음과 같이 프로그래밍을 하면 된다.
이름:

이 경우에 커서가 편집 박스에 위치하면,스크린 리더는‘이름’이라고 읽어준다.
(2) 편집 박스의 기본값 제공 : 편집 박스는 기본값을 가능한 한 제공한다.
(3) 편집 박스 테이블 구성 : 편집 박스를 데이터 테이블 형태로 구성할 경우에는 편집 박스별로 테이블 헤더를 읽어주도록 구성한다.

지침4기술적 진보성-구성한 콘텐츠는 웹 브라우저의 종류, 버전 등에 관계없이 사용될 수 있어야 한다.

항목 4.1 (신기술의 사용) 스크립트,애플릿 또는 플러그 인(plug-in) 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의 내용을 사용자에게 전달해줄 수 있을 경우에만 사용하여야 한다.

가. 용어 정리
(1) 애플릿(Applet)이란 웹 페이지에 삽입되는 프로그램을 의미한다.
(2) 플러그인(plug-in)이란 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.

나. 요구 조건
(1) 콘텐츠를 나타내기(display) 위해 혹은 인터페이스 요소를 만들기 위해 스크립트 언어를 이용할 경우에는 스크립트에 의해 제공되는 중요한 정보는 최신의 보조기술을 이용해 읽을 수 있어야 한다. 만일 이것이 불가능할 경우에는 스크립트의 동작을 정지시켜도 웹 콘텐츠의 내용을 읽을 수 있어야 한다.
(2) 애플릿, 플러그인(plug-in) 혹은 다른 응용 프로그램을 이용하여 웹 콘텐츠를 구성하였을 때에는 이들 프로그램 요소에 의해 제공되는 중요한 정보는 보조기술을 이용해 읽을 수 있어야 한다. 만일 이것이 불가능할 경우에는 이들 프로그램 요소의 동작을 정지시켜도 웹 콘텐츠의 내용을 읽을 수 있어야 한다.
(3) 스크립트, 애플릿과 플러그인은 키보드 또는 대체 키보드 인터페이스를 이용하여 사용할 수 있어야 한다.

다. 적용시 장점
(1) 보조기술이 지원되는 경우가 아니면 애플릿, 플러그인, 스크립트 등의 프로그램 요소를 사용하지 않도록 제한하므로 장애인들이 이들 프로그램 요소에 의하여 접근이 차단되는 일을 방지할 수 있다. 만일 Javascript 기능을 지원하지 않는 웹사이트에서 Javascript 기능을 정지시켰을 때에도 사용자에게는 필요한 정보가 차단되지 않는다.

라. 적용 예
(1) 플래시(Flash)에 대한 대체 텍스트를 현재까지 개발된 스크린 리더가 읽을 수 없다면 플래시를 사용하지 않도록 한다.

항목 4.2 (별도 웹사이트 제공) 콘텐츠가 항목 1.1에서 4.1에 이르는 13개 검사 항목을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면 텍스트만의 콘텐츠를 제공하는 웹 페이지(또는 웹사이트)를 별도로 제공해야 한다.

가. 용어 정리
(1) 텍스트만의 콘텐츠(text-only contents)란 텍스트 아닌 콘텐츠가 포함되지 않고 텍스트로만 구성된 콘텐츠를 의미한다.

나. 요구 조건
(1) 가능한 보조기술 수준이 미흡하여 장애인이 접근 가능한 웹 콘텐츠를 제작할 수 없는 경우에는 텍스트로만 구성된 대체 페이지를 마련하고 기존의 웹 콘텐츠의 첫 페이지에 대체 페이지로 이동하는 링크를 제공하여야 한다.
(2) 제공하는 대체 페이지는 기존의 웹 콘텐츠가 포함한 정보나 기능을 모두 포함하여야 한다.
(3) 제공하는 대체 페이지는 기존의 웹 콘텐츠의 개정 주기에 맞추어 개정되어야 한다.

다. 적용시 장점
(1) 새로운 웹 콘텐츠 제작기술의 개발로 인하여 아무리 노력하여도 원래의 웹 콘텐츠에 포함된 일부 또는 모든 콘텐츠 요소들을 장애인의 접근이 가능한 콘텐츠로 수정할 수 없을 경우가 있다. 이 경우 대체 텍스트로 구성한 페이지를 별도로 구성하여 운영하면 장애인의 접근성이 충분히 지원된다.

라. 적용 예
(1) 한글97 문서 : 별도의 웹 페이지로 구성
한글97로 작성된 문서를 콘텐츠로 제공하는 사이트의 경우, 스크린 리더를 통하여 한글97 문서를 읽을 수 없다. 이 경우에 동일한 내용을 별도의 HTML 문서로 제작하여 링크한다면 이러한 문제점이 해소된다.

tag : 접근성, 웹접근성 지침, 실태조사

전자정부 웹 표준 준수지침(2008. 4)

2008-09-26T18:42:14Z

전자정부 웹 표준 준수지침

1) 내용의 문법 준수

㉮ 모든 웹 문서는 적절한 문서타입을 명시해야 한다.

㉯ 명시한 문서타입에 맞는 문법을 준수해야 한다.

㉰ 모든 페이지는 사용할 인코딩방식을 표기해야 한다.

2) 내용과 표현의 분리

㉮ 논리적인 마크업을 구성하여 구조적인 페이지를 만들어야 한다.

㉯ 사용된 스타일 언어는 표준적인 문법을 준수해야 한다.

3) 동작의 기술 중립성 보장

㉮ 스크립트의 비표준 확장 사용은 배제되어야 한다.

㉯ 스크립트 비 사용자를 위한 대체텍스트나 정보를 제공해야 한다.

4) 플러그인의 호환성

㉮ 플러그인은 다양한 웹 브라우저를 고려해야 한다.

5) 콘텐츠의 보편적 표현

㉮ 메뉴는 다양한 브라우저 사용자도 접근할 수 있어야 한다.

㉯ 다양한 인터페이스(입력기기)로 웹 사이트를 이용할 수 있어야 한다.

6) 운영체제 독립적인 콘텐츠 제공

㉮ 제공되는 미디어는 범용적인 포맷을 사용해야 한다.

7) 부가 기능의 호환성 확보

㉮ 인증기능은 다양한 브라우저에서 사용 가능해야 한다.

8) 다양한 프로그램 제공

㉮ 정보를 열람하는 기능은 다양한 브라우저에서 사용 가능해야 한다.

㉯ 별도의 다운로드가 필요한 프로그램은 윈도우, 리눅스, 맥킨토시 중 2개 이상의 운영체제를 지원해야 한다.

tag : 전자정부 웹 준수지침: • 데이터테이블이란? 데이터를 표현하기 위하여 일반적으로 사용되는 테이블 - 게시판은 대표적인 데이터 테이블임; •
는 표에대한 간략한 내용을 표현하며 은 테이블의 제목을 표현
•
•
•
운전 시간과 운동시간 비만의 상관관계표

나. 데이터 테이블을 의미적으로 이해할 수 있도록 적절히 태그를 사용
• 행딘위 구분을 위한 태그를 제공 *
, , 등
• 열단위 구분을 위한 태그를 제공 *
, 등
• 제목셀과 내용셀의 구분을 위한 태그를 제공 *
운전 시간과 운동시간 비만의 상관관계표

, 등 헤더는 1행과 1열에 배치
• colspan, rowspan이 많이 사용되어 헤더구조가 복잡한 테이블의 경우 적절하게 사용
• 헤더의 긴 내용이 들어갈 경우 abbr 속성을 사용해 약어를 표시

다. 표의 머리글과 내용 칸을 바르게 짝지어야한다.

1. 머리글에 해당하는 td 나 th 요소에 그 머리글이 어디에 영향을 주는지 scope 속성을 붙여서 표시

개인별 시험 성적표
구분 중간고사 기말고사
김철수 50 60
박영희 70 80

소비자물가표

구분 중간고사 기말고사

김철수 50 60

박영희 70 80

2. 머리글을 나타내는 td 나 th 에 고유한 id 속성값을 주고, 그 머리글과 짝지어지는 내용 칸을 나타내는 td 에 id 속성값과 동일한 headers 속성값을 줌

개인별 시험 성적표
구분 중간고사 기말고사
김철수 50 60
박영희 70 80

개인별 시험 성적표

구분 중간고사 기말고사

김철수 50 60

박영희 70 80

라. Col Element 예제

야채 단가표
당근1:500원 토마토1(대구):300원 토마토1(광주):400원 무우1:600원
당근2:550원 토마토2(대구):300원 토마토2(광주):500원 무우1:630원
당근3:570원 토마토3(대구):300원 토마토3(광주):550원 무우3:620원

야채 단가표

당근1:500원 토마토1(대구):300원 토마토1(광주):400원 무우1:600원

당근2:550원 토마토2(대구):300원 토마토2(광주):500원 무우2:630원

당근3:570원 토마토3(대구):300원 토마토3(광주):550원 무우3:620원

tag : 데이터 테이블

2007년 12월 전국장애인 현황

2008-09-27T22:15:02Z

2007년 12월 전국장애인 현황 입니다.

tag : 장애인현황

1. 정보화 사회와 정보취약계층

2008-09-27T19:24:01Z

1. 정보화 사회와 정보취약계층

1.1 정보화 사회란?

1.2 정보취약계층-장애인의 이해

1.3 정보취약계층-노인의 이해

1.4 장애인 IT 환경 체험

학습내용

- 정보화 사회를 이해하기 위하여 개념 및 특징을 알아본다.

- 미국, 영국 등 선진국과 우리나라의 장애에 대한 개념의 비교

및 장애의 유형 등을 통해 정보취약계층에 대하여 이해한다.

- 장애인 IT 환경 체험을 통해 접근성의 필요성을 이해한다.

1.1 정보화 사회란?

1.1.1 정보화 사회

-세계 모든 나라는 정보화를 통한 국가경쟁력 확보에 주력하고 있음

-우리나라는 정보화촉진기본법에서 정보화를 '정보를 생산, 유통 또는 활용하여

사회 각 분야의 활동을 가능하게 하거나 효율화를 도모하는 것'이라고 규정

-정보화 사회란 컴퓨터와 통신 기술이 결합되어 정보의 수집·가공·유통 능력이 확

장되면서, 정보의 가치가 극대화 되는 사회를 의미

-또한 인간이 현대사회를 영위하는데 필요한 정보를 수집, 저장, 가공, 생산 등의

과정을 통해 정보의 유통을 확대시키고 이러한 과정과 유통이 보편화된 사회

-따라서 정보화 사회는 엄청난 양의 정보가 생산되어 빠른 속도로 이동 및 유포되

거나 소비되는 사회를 의미

1.1.2 정보화 사회의 특징

첫째, 정보화 사회는 정보의 사회적 중요성이 극대화되는 사회

둘째, 대량의 정보가 생산·유통되어지는 사회

셋째, 정보·지식의 생산이 산업구조의 중심이 되는 사회

넷째, 정보통신을 활용한 네트워크 커뮤니케이션이 가능한 사회

다섯째, 정보 자체가 중요한 자원이 되는 사회

여섯째, 인간의 지적 창조력이 가장 중요한 사회

1.2 정보취약계층 - 장애인의 이해

1.2.1 각국의 장애인에 대한 정의

- 미국의 장애인법 (ADA, Americans with Disability Acts, 1990)

장애인은 개인의 일상생활 동작 중 한가지 이상에서 현저히 제한 받는 신체적

혹은 정신적 기능장애를 가진 자, 이러한 기능장애의 기록이 있는 자, 이러한

기능장애를 가진 것으로 간주되는 자로 규정

- 미국의 사회보장법 (ASA, Americans with Security Act, 1935)

의학적으로 판정하여 적어도 1년간 지속될 것으로 판정되는 또는 사망에 이를

것으로 판정되는 신체적·정신적 손상으로 인하여 실질적인 소득활동에 참여하

지 못하는 자로 규정

- 영국의 장애인 차별 금지법(DDA, Disability Discrimination Act, 1995)

장애인은 개인의 일상생활 동작 중 한 가지 이상에서 현저히 제한 받는 신체적 혹은 정

신적 기능 장애를 가진 자, 이러한 기능장애를 가진 것으로 간주되는 자

- 호주의 장애인 차별 금지법(DDA, Disability Discrimination Act, 1993)

신체적, 지적, 심리적, 정신적, 감각적, 신경적 장애와 추형, 기형 및 질병을 야기하는

유지체의 존재(예:HIV바이러스) 등을 모두 포함하며, 현재 뿐만 아니라 과거에 존재한

사실이 있거나 미래에 존재할 가능성이 있거나 가진 것으로 인지되는 장애(예: 알콜 및

약물 중독, 당뇨, 암, 에이즈 등)도 포함

- 우리나라의 장애인복지법(1989)

• 장애인은 신체적ㆍ정신적 장애로 인하여 장기간에 걸쳐 일상생활 또는 사회생

활에 상당한 제약을 받는 자

• 신체적 장애는 주요 외부신체기능의 장애, 내부기관의 장애 등을 의미

• 정신적 장애는 정신지체 또는 정신적 질환으로 발생하는 장애를 의미

1.2.2 장애의 유형과 컴퓨터 활용

- 지체장애

• 상지 또는 하지의 일부분을 잃어버린 절단장애, 관절의 강직, 근력의 약화 또

는 마비 등의 관절장애 또는 팔, 다리의 장애와 척추장애와 같은 지체기능장

애로 인하여 신체부위 도달 확장을 위한 장치나 도구가 필요

• 팔 또는 손의 전체 혹은 일부에 장애가 있어 마우스나 키보드를 자유롭게 사

용하지 못하는 사용자의 경우 어떠한 방법으로 컴퓨터를 사용할까?

눈으로 움직이는 마우스(이미지)

헤드마우스(이미지)

- 시각장애

• 중심시력, 시야, 색 지각 또는 양안 기능에 영향을 주는 시 감각에 기능적 이

상으로 인하여 시각을 대체할 수 있는 보조도구가 필요

• 선천적 혹은 후천적 사고로 인하여 시력 및 시각에 문제가 있는 사용자는 모

니터 화면을 볼 수 없는 환경에서 어떻게 컴퓨터를 사용할까?

독서 확대기(이미지)

스크린리더(이미지)

- 청각장애

• 기질적 또는 기능적인 장애가 원인이 되어 듣는 기능이 일시적이거나 영구적

으로 저하되거나 결여된 상태로 의사소통, 소리와 음성 확대, 청각신호를 시

• 각 신호로 전환시켜주는 보조도구가 필요

청력 장애로 들을 수 없는 사용자의 경우 정보통신기기를 어떻게 사용할까?

의사소통 보조기기(이미지)

화상 전화기(이미지)

1.3 정보취약계층 - 노인의 이해

1.3.1 노인의 이해

- 사전적 의미

나이가 들어 늙은 사람

- 사회복지법

65세 이상인 사람

- 국제 노년학회(International Association of Gerontology)

• 환경변화에 적절히 적응할 수 있는 자체조직에서 결손이 있는 사람

• 자신을 통합하려는 능력이 감퇴되어 가는 시기에 있는 사람

• 인체기관, 조직, 기능에 쇠퇴현상이 일어나고 있는 사람

• 생활체 적응성이 정신적으로 결손 되어 가고 있는 사람

• 조직 및 기능저장의 소모로 적응 감퇴현상을 겪고 있는 사람

1.3.2 노인과 인터넷

- 노인의 정보화 활동 장애 요인

[신체적 장애]

• 감각(시각, 청각, 촉각 등) 장애

• 신체(떨림, 신경, 운동 등) 장애

• 인지(지능, 기억, 언어, 학습 등) 장애 및 알러지(접촉, 음식, 호흡기 등)

[환경적 장애]

• 접근성 장애, 물리적 장애, 잘못된 편견 등

인터넷 사용의 장애 원인

• 대부분 노인은 전용 PC를 보유하지 않아 컴퓨터 및 인터넷의 환경에 접근이 어려움

• 시력이 약해 작은 모니터를 통한 정보 획득이 용이하지 못함

• TV나 라디오, 신문 등에 익숙하여 인터넷의 정보접근방식에 적응이 어려움

• 노인을 위한 정보화 관련교육장소가 양과 질적인 면에서 부족

• 인터넷에서 노인이 활용할 수 있는 정보 또한 부족

- 노인의 정보화 수준

• 우리사회가 점차 고령화 사회로 접어듦에 따라 현대사회에서의 노인문제는 가족이나

개인의 문제가 아니라 사회문제이며, 그 중에서도 정보화 격차 문제가 큰 문제로 대두

되고 있음

(표)

구분     2000.3    2000.12    2002.12    2003.12    2004.12    2005.12    2006.6

40 대      18. 6     22.7       38.9       50.8        58.3       67.2        71.0

50 대       3.3       5.7       17.5       23.2        27.6       34.7        37.5

60 대이상   3.3       5.7        3.2        5.1         7.3       11.0        15.2

• 2006년 6월 연령별 인터넷이용률 및 이용자수는 60대 이상의 인터넷이용률이 전년 대비 가장 큰

폭으로 증가

• 60대 이상의 인터넷이용률(15.2%)이 2005년 6월 대비 4.2%p 증가하여 가장 높은 증가 폭을 나

타냄

1.4 장애인 IT 환경 체험

1.4.1 시나리오 안내

- 시각장애 체험

• 전맹 체험

• 약시(저시력) 체험

• 색맹 체험

시야장애 체험

- 지체장애 체험

• 헤드 마우스 환경 체험

• 손가락 및 손 장애 체험

1.4.2 시나리오에 의한 체험

- 시각장애 체험 (전맹 체험)

준비물 : 안대 등과 같은 앞을 볼 수 없는 눈 가리개

실습사항

• 키보드 등과 같은 장치의 특정 버튼(Key)를 찾고 그 기능을 이해할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 특정 기능(전화걸기 또는 문자 송수신 등)에 대하여 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간은 얼마의 차이가 있는가를 알아보자

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (약시 체험)

준비물 : 안개막 등으로 제작된 안대 또는 시야를 많이 흐리게 할 수 있는 눈 가리개

실습사항

• 키보드 등과 같은 장치의 특정 버튼(Key)를 찾고 그 기능을 이해할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 특정 기능(전화걸기 또는 문자 송수신 등)에 대하여 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간은 얼마의 차이가 있는가를 알아보자

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (색맹 체험)

준비물 : 셀로판지(빨강, 파랑) 등으로 제작된 안대 또는 동일한 환경제공이 가능한

눈 가리개

실습사항

• 색상구분이 어려운 상황에서 정확한 내용을 이해할 수 있는가?

실습내용1

• 1. 실습자는 웹 브라우저를 활용하여 다양한 사이트를 방문한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 웹 사이트의 화면을 정확히 인식할 수 있는가를 알아보자.

인지하기 힘들거나 인지가 불가능 하다면 어느 부분이며, 어떠한 이유 때문인지를 확인해 보자.

• 3. 다양한 웹 사이트를 방문하며 셀로판지 색상에 따른 어려움을 알아보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 휴대폰 화면을 정확히 인지할 수 있는가를 알아보자.

문자 송수신 등 화면을 통한 기능 수행은 원활히 수행할 수 있는지를 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (시야장애 체험)

준비물 : 조그만 구멍(반지름: 0.25~0.3cm)이 뚫린 안대 또는 동일한 환경제공이

가능한 눈 가리개

실습사항

• 시야확보가 어려운 상황에서 정확한 내용 이해 및 기능 수행을 할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키에 대하여 실습을 여러 번 진행해 보자.

• 4. 실습자는 웹 브라우저를 활용하여 다양한 사이트를 방문한다.

• 5. 준비한 안대 또는 눈 가리개를 착용한 후 해당 웹 사이트의 화면을 정확히 인식할 수 있는가를 알아보자.

인지하기 힘들거나 인지가 불가능 하다면 어느 부분이며, 어떠한 이유 때문인지를 확인해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 휴대폰 화면을 정확히 인지할 수 있는가를 알아보자.

문자 송수신 등 화면을 통한 기능 수행은 원활히 수행할 수 있는가를 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (헤드 마우스 체험)

준비물 : 나무 또는 플라스틱 막대 (굵기 : 나무젓가락 정도, 길이 : 30~35cm)

실습사항

• 손을 사용하지 않고 머리 또는 목을 사용하여 키보드 등과 같은 장치에 대한 기능 수행이 가능한가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 막대를 사용(머리 위 또는 턱 아래에 손으로 고정)하여 해당 기능을 원활히 수행할 수 있는가를

알아보자. 가능하다면 손으로 수행할 때와의 시간 차이는 얼마인지 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 막대를 사용(머리 위 또는 턱 아래에 손으로 고정)하여 특정 기능(전화걸기 또는 문자 송수신 등)

에 대하여 원활히 수행할 수 있는가를 알아보자.

가능하다면 손으로 수행할 때와의 시간 차이는 얼마인지 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (손가락 및 손 장애 체험)

준비물 : 손 또는 손가락을 묶을 수 있는 고무줄이나 압박붕대

실습사항

• 손을 사용하지 않고 머리 또는 목을 사용하여 키보드 등과 같은 장치에 대한 기능 수행이 가능한가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비물을 사용하여 손가락을 묶은 후(중지, 인지, 약지 : 3~5번째 손가락) 해당 기능을 원활히 수행할 수

있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 3. 준비물을 사용하여 손가락을 묶은 후(검지와 중지 :2,3번째 손가락, 인지와 약지 :4~5번째 손가락) 해당

기능을 원활히 수행할 수 있는지 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 4. 준비물을 사용하여 모든 손가락을 묶은 후(주먹을 쥐거나 편 상태) 해당 기능을 원활히 수행할 수 있는가를

알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 5. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (손가락 및 손 장애 체험)

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비물을 사용하여 손가락을 묶은 후(중지, 인지, 약지 : 3~5번째 손가락)해당 기능을 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 3. 준비물을 사용하여 손가락을 묶은 후(검지와 중지 :2,3번째 손가락, 인지와 약지 :4~5번째

손가락) 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 4. 준비물을 사용하여 모든 손가락을 묶은 후(주먹을 쥐거나 편 상태) 해당 기능을 원활히 수행

할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 5. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

[과제]

개인과제

장애인 IT 체험 후기 작성

• 시각장애 체험 후 불편한 점 등에 대하여 알아보자

• 지체장애 체험 후 불편한 점 등에 대하여 알아보자

정보취약계층과 관련된 다양한 통계자료를 찾아보고 그 시사점을 논의해 보자

tag : 교안

마크업의 기초 DTD

2008-09-27T18:59:01Z

HTML 4.01 표준 문서 형식

"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 표준 문서 형식
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 표준 문서 형식
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
표준 문서 형식(Doctype)을 기반한 웹페이지에 대한 정확한 사용법은 다음과 같다.
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

...

...

tag : dtd

인터넷 웹 콘텐츠 접근성 지침(2005.12)

2008-09-26T19:16:50Z

인터넷 웹 콘텐츠 접근성 지침

1. 개 요
이 문서는 장애를 가진 사람들이 접근할 수 있도록 웹 콘텐츠를 제작하는 방법에 관하여 기술하고 있다.특별히 이 문서 내에 포함된 지침들은 웹 콘텐츠 저자,웹사이트
설계자 및 웹 콘텐츠 개발자들이 접근성(Accessibility)을 준수한 웹 콘텐츠를 쉽게 만들 수 있도록 도움을 주기 위하여 기획되었다.
이 지침을 제정하는 가장 큰 목적은 웹 콘텐츠에 접근하려는 모든 사람들이 어떤 컴퓨터나 운영체제, 또는 웹 브라우저(web browser)를 사용하든지, 또는 어떠한 환경에 처해 있는지에 구애받지 않고 접근할 수 있는 웹 콘텐츠를 제작할 수 있도록 도와주는것이다. 그렇다고 해서 이 지침이 장애인들의 접근권을 위하여 그래픽 이미지나 비디오 자료와 같이 장애인들이 접근하기 어려운 콘텐츠를 사용하지 못하도록 제한하는 것은 아니며, 이들 멀티미디어 콘텐츠들도 보다 광범위한 부류의 사람들이 용이하게 접근할 수 있도록 콘텐츠를 구성하는 방안을 제시하는데 주목적이 있다.
이 지침은 한국 정보통신접근성향상표준화포럼 산하 웹접근성분과위원회가 주축이 되어 제안하는 것으로 국제 표준화 기구인 W3C(World Wide Web Consortium)의
WAI(Web Accessibility Initiative)에서 1999년 5월 제정한 웹 콘텐츠 접근성 가이드라인(WCAG : Web Content Accessibility Guidelines 1.0)과 WCAG 2.0 초안 (2003년 6월 24일판)을 참고하였으며, 부분적으로 미국 재활법 508조를 참고하여 작성한것이다. 특히 제정시점을 기준으로 국내의 웹 환경 및 관련 보조기술의 실태를 조사하고 그 결과를 토대로 표준(안)을 마련하였다.

2. 표준의 구성 및 범위

2.1 지침 제정 목적
이 문서는 접근이 가능한 웹 콘텐츠를 만들기 위한 설계 원리를 개괄한다. 만일 이문서에서 제시하는 원리를 무시한 채로 웹 콘텐츠를 제작한다면 장애를 가진 사람들은 웹 콘텐츠에 접근할 수 없거나 접근하는 데에 어려움이 따르게 된다. 반면에 이 문서 에서 제시한 원리에 따라 웹 콘텐츠를 제작한다면 적절한 보조기술을 사용하는 장애인들은 해당 콘텐츠에 충분히 접근할 수 있을 것이다. 웹 문서를 설계함에 있어서 고려해야 하는 접근권의 유형은 다음과 같다.

1) 시각을 통하여 정보를 인지할 수 없거나 인지 능력이 떨어지는 시각장애가 있는경우
2) 청각을 통하여 음향 정보를 인지하지 못하는 청각장애가 있는 경우
3) 신경계의 마비, 근골격계의 마비 또는 선천성 기형 등으로 신체의 움직임에 제한
이 있는 지체장애가 있는 경우
4) 읽기나 문장 이해력이 떨어지는 언어장애가 있는 경우
5) 키보드나 마우스를 사용할 수 없는 장애가 있는 경우
6) 문서에 적용된 언어에 따라 말하거나 이해하는데 어려움이 있는 장애가 있는 경우 - 예를 들면 외국어로 작성된 콘텐츠를 이해하지 못하는 경우
7) 시각, 청각 또는 손을 사용하고 있어서 필요로 하는 일을 할 수 없는 경우 - 예를 들어 운전 중이나 소음이 많은 곳에서 일하는 경우로 장애라기보다는 처한 환
경에 따라 제한 받는 경우
8) 사용하고 있는 웹 브라우저의 종류나 버전이 다름으로 인하여 어려움이 발생하는 경우 등이다. 콘텐츠 제작자는 모든 사용자들이 충분히 접근할 수 있는 콘텐츠를 설계하거나 제작할 필요가 있다. 이 문서에서는 위에 열거한 경우에도 충분히 그 내용을 인지할 수 있도록 하기 위한 웹 콘텐츠의 설계 방법에 대한 지침을 제시할 것이다. 그러나 이 문서는 기본적인 목적이 HTML 문법을 교육시키거나 HTML을 이용하여 웹 문서를 설계하는데 필요한 기초적인 지식을 제공하려는 것은 아니다.

2.2 문서의 구성
이 문서에서는 사람들이 필요한 부분을 빠르게 찾아볼 수 있도록 하기 위해 서로 관계가 있는 항목들을 네 가지 지침으로 분류하였다. 즉, 웹 콘텐츠에 접근하기 위해 갖추어야 할 네 가지 주요 지침은 인식의 용이성,운용의 용이성,이해의 용이성,기술적 진보성의 네 가지이며,네 가지 지침은 각각 몇 개의 검사항목(또는 항목)으로 구성된다. 본 표준에서 제시하는 검사항목은 총 14개이다. 각 검사항목은 요구사항, 용어정의, 해당 항목을 준수함으로써 얻어지는 혜택 및 적용 예 등으로 구성된다.

3.접근성 있는 웹 콘텐츠 설계

이 문서에서 목표로 하는 것을 개괄하면, 모든 사용자가 그 내용을 인지할 수 있으며, 운용할 수 있고, 이해할 수 있는 웹 콘텐츠를 만들 수 있도록 하는 것이다. 이 경우에 현재까지 개발된 보조기술이나 앞으로 개발될 기술을 사용하는 경우도 염두에 두고 있다. 접근성이 준수된 웹 콘텐츠란 아래의 네 가지 지침을 만족하는 경우에 가능하다. 따라서 이 문서에서는 아래의 네 가지 지침에 포함되는 모든 검사항목을 만족해야 접근성이 있다고 하며, 일부분 또는 전체 검사항목을 만족하지 못하는 경우에는 접근성이 없는 웹 콘텐츠라고 정의한다.

가. 인식의 용이성 : 글로 표현할 수 없는 콘텐츠를 제외하고 장애 유형에 관계없이모든 사용자가 콘텐츠를 인지할 수 있도록 제공해야 한다.
나. 운용의 용이성 : 콘텐츠에 포함된 모든 구성 요소들은 장애 유형과 관계없이 모든 사용자가 사용할 수 있어야 한다.
다. 이해의 용이성 : 모든 콘텐츠는 가능한 한 그 내용과 사용 방법을 모든 사용자가 이해하기 쉽도록 구성해야 한다.
라. 기술적 진보성 : 현재 개발된 보조기술로는 접근이 어렵거나 불가능한 웹 콘텐츠는 가용한 보조기술을 이용하여 접근할 수 있도록 대체 콘텐츠를 함께 제공해야 한다.

접근성이 있는 웹 콘텐츠는 장애를 가진 사람들만이 아니라 다양한 사람들에게 도움을 줄 수 있다. 예를 들어 엘리베이터는 휠체어를 타고 있는 사람에게만 유용한 것이 아니라 유모차로 이동하는 사람이나 노약자에게도 유용하다. 마찬가지로 접근성이 있는 웹 콘텐츠는 장애를 가지고 있는 사람이나 그렇지 않은 사람 모두에게 도움을 줄 수 있다. 예를 들어, 소음이 심한 지역에서 웹사이트에 접근하거나 웹 문서상의 음성정보를 이용하는 경우에 캡션이 제공된다면 제한적인 환경에도 불구하고 그 내용을 알수 있을 것이다. 운전중인 경우에는 눈을 다른 데로 돌릴 겨를이 없기 때문에 문서를 읽어 주거나 음성정보를 제공하도록 구성된 콘텐츠가 매우 유용할 것이다. 마찬가지로 영화에 캡션(자막)이 제공된다면 검색 엔진을 활용하여 이 영화로부터 유명한 대사를 쉽게 찾을 수 있는 편리성을 제공하기도 한다.

여기서 고려해야할 장애의 유형과 장애를 극복하기 위하여 사용될 수 있는 대체 수단에 관한 몇 가지 방법을 살펴보자.

가. 들을 수 없는 사람은 일반적으로 소리를 통해 제공되는 정보를 눈으로 보고 싶어한다.
나. 볼 수 없는 사람은 시각적으로 제공되는 정보를 텍스트 또는 점자 정보로의 변환을 통해 듣거나 읽을 수 있기를 원한다.
다. 민첩하거나 용이하게 움직일 수 없는 사람은 가능한 한 적게 움직여서 원하는 일을 하거나 필요한 만큼 충분한 시간동안 작업 할 수 있기를 원한다.
라. 글씨를 잘 읽지 못하는 사람은 그 내용을 음성으로 읽어주기를 원한다.

위에 예로든 네 가지 경우는 모든 장애 유형이나 경우를 망라한 것이 아니며, 자주접하게 되는 경우에 이에 대한 대책을 예로 든 것이다. 따라서 보다 복잡한 경우에는 또 다른 접근 방법을 마련해야 한다. 만약 어떤 웹 콘텐츠가 이 문서에서 제시하는 항목에 따라 제작된다면 사용자는 보조기술을 사용하여 웹 콘텐츠에 쉽게 접근할 수 있다.예를 들어 스크린 리더(screenreader)와 적당한 웹 브라우저(web browser)를 사용하면 웹 페이지의 내용을 음성으로 읽어줄 수 있어서 음성으로 그 내용을 읽어주기 원하는 모든 사람들의 접근권을 보장할 수 있다. 스크린 리더와 같이 장애유형별로 웹 콘텐츠에 접근할 수 있도록 도와주는 많은 보조기술들이 개발되어 있으므로 장애 유형과 필요한 보조기술을 활용하여 웹 콘텐츠에의 접근성을 향상시킬 수 있다. 이와 관련한 사항은 관련 장애인 단체에서
제공하는 정보나 웹사이트를 참고하라.

지침 1. 인식의 용이성 - 웹사이트에서 서비스하고 있는 모든 콘텐츠는 누구나 쉽게 인식할 수 있도록 설계되어야 한다.

항목 1.1 (텍스트 아닌 콘텐츠(non-text contents)의 인식) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.

가. 용어 정리
(1) 텍스트 아닌 콘텐츠(non-text contents)란 그림,이미지 등으로 제작된 텍스트,애니메이션, 아스키(ASCII) 그림문자, 목록표시 이미지, 그래픽 버튼, 음성음향자료 또는 비디오 자료 등의 오디오와 영상과 같이 표준 문자(부호) 체계가 아닌, 시각적 또는 청각적 정보가 포함된 콘텐츠를 의미한다. 한글 부호의 경우에는 유니코드, 조합형 또는 완성형 부호체계를 사용하여 작성된 텍스트 외의 모든 경우를 의미한다.
(2) 빈 문자(blank text)란 아무런 정보도 가지고 있지 않은 문자열을 의미한다.
HTML 등의 문법에서 빈 문자는 “”을 가리킨다. 즉, 빈 문자를 스크린 리더에서 읽으면 아무런 소리도 나지 않는다.

나. 요구 조건
(1) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 콘텐츠는 모두 해당 콘텐츠와 정확하게 일치하는 텍스트 콘텐츠(text contents)와 함께 제공해야 한다.
(2) 만약, 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 없는 경우는 해당 콘텐츠에 대한 설명을 텍스트로 반드시 제공해야 한다. 이 때, 제공되는 텍스트 콘텐츠는
설명하고자 하는 원래의 콘텐츠의 내용이나 형태 등의 상세한 정보를 제공해야한다.
(3) 텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트는 콘텐츠 제작자가 원래의 콘텐츠를 사용해 표현하고자 했던 의미나 기능도 포함하여 설명
해야 한다.
(4) 텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트를 읽어줌으로 인하여 의미의 혼동을 줄 경우에는 빈 문자(blank text)를 대체 텍스트로 사용해야 한다.

다. 적용시 장점
(1) 시각장애 또는 인지장애 등으로 인해 시각으로 정보를 습득하는 데에 어려움을 겪는 사용자들이 스크린 리더(screen reader)와 같은 보조기술을 사용하여 텍스트 콘텐츠를 음성을 통해 읽음으로써 접근권을 보장받을 수 있게 된다.
(2) 청각장애나 다른 이유로 음향 정보를 알아들을 수 없는 사용자들을 위해 그 내용을 텍스트로 표시하거나 수화로 해당 내용을 번역함으로써 접근이 가능하게된다.
(3) 시각장애인은 물론 시각장애와 청각장애를 함께 갖고 있는 사용자 역시 해당 콘텐츠를 점자로 변환해 읽음으로써 접근권을 보장받을 수 있게 된다.
(4) 몇 개의 자료를 순서대로 나열하는 목록 등 해당 이미지가 단순히 홈페이지를 아름답게 꾸미기 위해 사용된 경우에는 이미지에 대한 대체 텍스트(alt-text)로 빈 문자를 사용하면 의미의 불필요한 혼동을 줄일 수 있다.

라. 적용 예
(1) 버튼으로 사용된 이미지 : 간단한 기능 설명부가 슬라이드 쇼에서 다음 슬라이드로 넘어가는 역할을 하도록 만든 오른쪽 화살표 모양의 이미지 링크(image link)의 경우에 이 버튼 이미지와 함께 "다음 슬라이드"라는 대체 텍스트를 함께 제공한다면 스크린 리더는 이 이미지 버튼을 "링크 - 다음 슬라이드"라고 읽어줄 수 있게 된다.
(2) 데이터 차트 : 간단한 레이블과 충분한 설명을 함께 제공
예를 들어 어떤 상품의 6월, 7월 및 8월의 판매실적을 비교해 보여주는 차트에 "그림 1 : 6월, 7월 및 8월의 판매 현황"이라는 간단한 레이블(label)을 붙이고, 차트에 대한 보다 긴 설명문(longdesc)을 붙인다면 해당 차트의 내용과 해당 차트가 표시하고
있는 정보를 사용자에게 전달할 수 있다.
(3) 애니메이션 : 간단한 레이블과 충분한 설명을 함께 제공
예를 들어 매듭을 짓는 방법을 보여주는 애니메이션의 경우에 "매듭을 만드는 형태를 보여주는 애니메이션"이라는 간단한 레이블과 함께 매듭짓기 위하여 손놀림하는 동작을 자세하게 설명하는 설명문을 붙인다면 매듭을 만드는 전 과정을 이용자가 자세하
게 알 수 있다.
(4) 연설 녹음자료 : 간단한 레이블과 긴 설명을 함께 제공웹 페이지에 음성 데이터가 포함되어 있는 경우에 이 데이터와 함께 간단한 제목을 레이블로 구성하고 음성 데이터의 내용에 대한 텍스트를 함께 제공한다면 청각장애인의 경우에도 모든 정보를 얻을 수 있다.
(5) 음악 자료 : 간단한 레이블 제공
예를 들어 베토벤의 교향곡 제 5번의 연주실황을 제공하는 음악 파일을 웹 페이지에서 제공하고 있는 경우에 이 음악 파일과 함께"베토벤 교향곡 제5번, 빈 필하모닉 오케스트라의 연주"라는 레이블을 함께 제공한다면 청각장애인의 경우에 음악 파일이 무슨 내용을 담고 있는지를 쉽게 알 수 있다.

항목 1.2 (영상매체의 인식) 시간에 따라 변화하는 영상매체는 해당 콘텐츠와 동기 되는 대체 매체를 제공해야 한다.

가. 용어정리
(1) 시간에 따라 변화하는 영상매체(time-dependent presentation)란 영화와 같이 소리와 영상정보가 동시에 제공되는 경우 혹은 콘텐츠 재생 과정의 특정 시점에서 사용자와의 상호작용 또는 대화가 필요한 매체를 말한다.
(2) 대체 매체(equivalent media)란 영상매체의 음향정보를 캡션과 같이 시각적으로 보여주거나 영상의 기본적인 내용을 화면해설 형태로 제공하는 매체를 의미한다.
(3) 화면해설(audio descriptions)이란 영상의 광경, 동작, 비언어적 표현, 그래픽 등의 상태나 변화를 음향정보로 나타내거나 텍스트로 제공하여 필요한 설명을 제공하는 것을 의미한다.화면해설은 해당 이벤트와 동기 되어 진행되어야 한다.
(4) 캡션(Captions)이란 영상매체에 포함된 말, 음향 및 주변소리 등을 텍스트로 표현한 매체를 의미한다. 따라서 캡션은 영상매체의 진행에 따라 해당 이벤트와 동기되어야 한다.

나. 요구조건
(1) 음향 정보로부터 사용자가 충분한 정보를 얻을 수 없는 모든 영상매체는 캡션을 함께 제공해야 한다.
(2) 캡션은 영상매체나 음향매체와 동기 되어야 한다.
(3) 모든 생방송은 캡션을 실시간으로 제공해야 한다. 단 음성이 없는 음악 방송의 경우에는 예외로 한다.
(4) 콘텐츠는 사용자가 캡션과 영상정보를 동시에 접해야 그 내용을 이해할 수 있도록 구성되어서는 안 된다. 즉, 캡션과 영상정보는 서로 보완관계가 되지 않아야
한다.

다. 적용시 장점
(1) 청각장애인은 음향매체와 함께 제공되는 캡션을 통해 음성이나 음향 정보에 접근이 가능하게 된다. 또한, 캡션을 활용하면 해당 콘텐츠에 대한 인덱스를 작성
하거나 내용을 검색할 때에도 유용하게 사용될 수 있다.
(2) 장애인이 아닌 경우에도 영상매체와 함께 동기 되는 대체 매체가 제공되는 경우에 보다 편리하게 콘텐츠를 활용할 수 있다. 예를 들어 캡션은 소란한 환경이나
오디오 재생기능이 갖추어져 있지 않은 경우 유용하며, 외국어 습득과 같이 언어능력이나 읽기 능력을 높이는데 활용될 수 있다.
(3) 화면해설의 경우에는 화면을 보지 않더라도 중요한 정보를 음성으로 알 수 있게 해주므로 시각을 통해 사물을 인식하기 어려운 장애인의 경우에는 화면해설을
통해 화상정보를 인지할 수 있다. 그러나 화면해설은 필수사항으로 분류하지 않는다.

라. 적용 예
(1) 동영상 : 화면해설과 캡션 활용
예를 들어, 한 아이가 강아지를 자신의 침대로 오도록 과자를 늘어놓고는 강아지에게 웅얼거리며 무언가를 말하고 있는 장면을 가정한다면, 화면을 볼 수 없는 사람은 이 장면을 이해할 수 없다.따라서 이 경우에"이 아이가 계단으로부터 자기 침실에 이르는 계단마다 과자를 하나씩 늘어놓았다"라는 화면해설과"아이가 웅얼거린다"라는 캡션을 제공한다면 청각장애인이나 시각장애인 모두 그 내용을 정확히 이해할 수 있다.
(2) 뉴스 동영상 : 영상과 동기되는 캡션 제공
예를 들어, 홍수가 난 대도시의 광경을 기자가 설명하고 있다고 가정할 경우에 기자가 하는 말을 캡션으로 표시하면 청각장애인이 기자의 이야기를 인식할 수 있게 된다.
(3) 무언극 : 장면별로 장면소개 텍스트 제공
예를 들어, 사다리를 올라가는 무언극(팬터마임 : pantomime)의 한 장면을 애니메이션으로 구성하였을 경우에“사다리를 올라가는 장면”이라는 대체 텍스트를 애니메이션에 포함시키면 이로써 충분한 정보를 사용자에게 제공할 수 있다.

항목 1.3 (색상에 무관한 인식) 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.

가. 용어정리
(1) 고 대비(high contrast) 모드란 흑백과 같이 대비차가 매우 크도록 조정하여 화면에 표시하는 방식을 의미한다.

나. 요구사항
(1) 콘텐츠가 제공하는 텍스트나 그래픽 정보는 색상을 제거하더라도 그 내용을 인지할 수 있어야 한다.
(2) 웹 페이지에서 보여주는 정보와 배경색 간에는 충분히 대비가 되어야 한다. 특히 웹 페이지의 내용을 고 대비(high contrast) 모드로 표시했을 때에도 충분히
명암대비가 되도록 콘텐츠를 설계하여야 한다.

다. 적용시 장점
(1) 색상의 차이가 정보의 다름을 나타내지 않으므로 색각(색맹 또는 색약) 이상자의 경우에도 혼동을 일으킬 염려가 없게 된다.
(2) 도표 등의 경우에 사용하는 색상의 명암 대비가 충분하므로 약시자의 경우에도 도표를 정확히 인지할 수 있다.
(3) 고대비 모드를 사용할 수밖에 없는 사용자들도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있다.

라. 적용 예
(1) 그래프 및 차트 : 색깔보다는 무늬를 이용한 표현 권장
파이 차트, 막대그래프나 꺾은 선 그래프 등을 이용하여 정보를 표시하는 경우에 각각의 영역을 색깔로 구분하기보다는 여러 가지 무늬를 이용하여 표시하면 색상을 인식할 수 없는 사용자들,예를 들면 약시자나 색각이상자가 쉽게 이해할 수 있다.
(2) 중요한 항목 표시 : 색깔보다는 특수기호 사용 권장
예를 들어,가입자의 신상 정보를 입력하는 웹 페이지에서 필수항목을 색깔(예를들어 빨간색)을 사용하여 표시하는 경우에 이 색깔을 인지하지 못하는 색각 이상자의 경우에는 이 항목의 중요도를 인지할 수 없다.따라서 색깔 대신 특수 기호(예를 들어별표)를 이 항목에 추가하면 대부분의 사용자가 이 항목이 중요한 항목인지를 쉽게 인지할 수 있다.

지침 2 운용의 용이성 - 웹 콘텐츠에 포함된 모든 요소들의 기능은 누구나 쉽게 사용할 수 있어야 한다.

항목 2.1 (이미지 맵 기법 사용 제한) 이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하며 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.

가. 용어 정리
(1) 이미지 맵(image map)이란 이미지의 일부 영역에 링크를 두어 사용자에게 해당 정보를 제공할 수 있는 페이지로 이동하도록 만드는 프로그램 기법이다.
(2) 서버측 이미지 맵(server-side image map)이란 이미지 맵을 구현하는 프로그램이 서버측에 존재하여 사용자의 웹 브라우저가 이미지 맵 상의 어떤 그림 위에 마우스를 위치시키고 클릭하면 클라이언트가 마우스의 위치정보를 서버로 제공하고, 서버는 전달되어온 마우스의 위치에 해당하는 이미지 맵의 영역이 지시하는
링크로 이동한 결과를 클라이언트에 표시하는 방식의 프로그램 기법이다.
(3) 클라이언트측 이미지 맵(client-side image map)이란 HTML 태그를 이용하여 사용자의 브라우저에서 이미지 맵의 영역을 식별하여 직접 해당 영역이 지시하는
링크로 이동하도록 하는 프로그램 기법이다.

나. 요구조건
(1) 구성하려는 이미지 맵의 형태를 클라이언트측에서 기하학적으로 표현하기 어려운 경우가 아니면 서버측 이미지 맵을 사용하지 않는다.
(2) 서버측 이미지 맵 기법을 사용할 경우에는 이미지 맵의 영역에 대응하는 텍스트 링크를 별도로 제공해야 한다(항목 1.1 참조).
(3) 클라이언트측 이미지 맵을 사용할 경우에는 이미지 맵의 영역에 대한 충분한 대체 텍스트를 제공하여야 한다(항목 1.1 참조).

다. 적용시 장점
(1) 서버측 이미지 맵 방식에서 서버는 해당 영역에 대한 대체 텍스트를 사용자에게 제공하지 못하며,단지 컴퓨터 화면상에 표시할 뿐이다.따라서 이 항목을 적용
하면 대체 텍스트 링크가 없는 서버측 이미지 맵의 사용을 제한하므로 시각장애인의 접근성을 높일 수 있게 된다.
(2) 클라이언트측 이미지 맵을 사용하는 경우에도 영역을 표시하는 부분에 대체 텍스트를 함께 표시한다면 이미지 맵의 영역을 읽어주므로 시각장애인들이 이미지
맵의 어느 영역을 가리키고 있는지를 확인할 수 있다(항목 1.1 참조).

라. 적용 예
(1) 클라이언트측 이미지맵 : 대체 텍스트 지원
태그를 사용하여 클라이언트측 이미지 맵을 작성할 경우 대체 텍스트를 해당 영역에서 제공하여야 한다.
(2) 서버측 이미지맵 : 링크목록 제공
서버측 이미지 맵을 사용할 경우에는 대체 텍스트로 구성된 링크목록을 같은 페이지에 제공하면 시각장애인들이 텍스트 링크를 사용하여 필요한 작업을 할 수 있
다(항목 1.1 참조).

항목 2.2 (프레임의 사용 제한) 콘텐츠를 구성하는 프레임의 수는 최소한으로 하며, 프레임을 사용할 경우에는 프레임별로 제목을 붙여야 한다.

가. 용어 정리 : 없음

나. 요구조건
(1) 웹 콘텐츠에는 가급적 프레임을 사용하지 않아야 한다. 만일 프레임을 사용하는 경우에도 사용하는 프레임의 수를 최소한으로 줄여야 한다.
(2) 프레임을 사용할 경우에는 프레임 별로 서로 독특한(중복되지 않는) 제목을 부여하여 프레임을 식별할 수 있어야 한다.

다. 적용시 장점
(1) 화면을 볼 수 있는 사용자는 한 페이지를 여러 개의 영역으로 구분한 프레임을 볼 수 있다. 그러나 화면을 볼 수 없는 시각장애인에게 여러 개의 프레임으로 구성된 페이지는 모든 프레임의 내용을 인지하기 어렵다. 따라서 여러 개의 프레임으로 구성된 웹 페이지에서 각각의 프레임에 제목을 부여하면 활성화된 프레임
의 제목을 읽어주기 때문에 프레임간의 이동이 매우 편리하다.

라. 적용 예
(1) 프레임 : 프레임별 제목 부여
여러 개의 프레임으로 구성된 웹 콘텐츠에서 각각의 프레임에 제목을 부여할 수있다. 예를 들어, 두개의 프레임으로 구성된 웹 페이지의 경우에 각각의 프레임 제
목을 “순이”와 “철수”라고 명명한다면 현재 활성화된 프레임의 이름을 읽어 볼 수 있으므로 엉뚱한 프레임에서 작업하는 잘못을 방지할 수 있다.

항목 2.3 (깜박거리는 객체 사용 제한) 콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.

가. 용어 정리
(1) 스크립트(script)란 컴퓨터에 자동으로 처리를 실행하기 위한 명령을 나열한 파일로 일반적으로 텍스트 파일 형식으로 제공되는 것이다.

나. 요구조건
(1) 웹 콘텐츠에는 애니메이션 등과 같이 깜빡거리는 주파수의 범위가 3 Hz에서 49Hz 사이인 콘텐츠 요소들을 포함하지 않아야 한다.
(2) 만일 위의 (1)에서 명시한 요구조건을 만족할 수 없는 웹 콘텐츠는 깜빡거림이 있는 웹 페이지로 이동하기 전에 이 페이지에 깜빡거림이 있음을 사전에 사용자
에게 경고해주어야 한다. 또한, 스크린의 깜빡거림이 배제된 대체 페이지를 별도로 제공하여야 한다(항목 1.1 참조).

다. 적용시 장점
(1) 광과민성 발작 증세를 지닌 사람들은 빛이 깜빡거리는 것에 반응하여 발작을 일으킨다. 특히 3Hz에서 49 Hz의 사이의 깜빡거림은 발작을 일으키는 원인이 되
며, 20Hz 부근이 발작을 가장 잘 일으키는 주파수이다. 따라서 요구조건 (1)을만족하는 콘텐츠의 경우에는 광과민성 발작중세가 있는 사용자도 접근이 가능하
다.
(2) 정신이 산만한 사람의 경우에는 계속적인 깜빡거림이 있는 콘텐츠를 집중하여 응시할 수 없으므로 이 요구조건을 만족하는 콘텐츠는 정신이 산만한 사람도 접
근이 가능하다.

라. 적용 예
(1) 첫 페이지 구성 : 깜박거리는 개체 배제
웹사이트에 처음 접속했을 때에 스크린에 나타나는 첫 페이지에는 최소한 깜빡거림이 없도록 콘텐츠를 구성하며, 만일 다음 페이지에 깜빡거림이 있는 콘텐츠가
포함되어 있을 경우에는 경고문을 첫 페이지에 표시하고, 깜빡거리는 콘텐츠를 제거한 대체 페이지와 이 페이지로 이동하는 링크를 제공하도록 구성한다.
(2) 스크립트 사용 : 스크립트 동작하지 않도록 설정
스크립트를 이용하여 깜빡이는 텍스트(blinking text)를 구성하면 스크립트가 동작하지 않도록 함으로써 깜빡임을 제거할 수 있다.
(3) 프로그래밍 기법 : 객체를 깜박거리게 하는 태그 사용 배제
또는 태그는 사용하지 않는다.

항목 2.4. (키보드로만 운용 가능) 키보드(또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.

가. 용어정리
(1) 키보드 인터페이스란 키보드 또는 특수한 입력장치로부터 응용프로그램이 필요한 모든 정보를 입력받도록 하는 장치를 의미한다.
(2) 포인팅 디바이스(pointing device)란 마우스나 터치패드와 같이 컴퓨터 화면의 특정한 부위를 직접 지정할 수 있는 장치를 의미한다.
(3) 음성 입력 장치란 음성으로 컴퓨터를 제어할 수 있도록 구성한 시스템 또는 시스템을 구성하도록 하는 프로그램을 의미한다.

나. 요구조건
(1) 웹 콘텐츠는 키보드 또는 장애를 극복하도록 도와주는 여러 가지 입력 장치를 사용하는 경우에도 콘텐츠가 제공하는 모든 기능을 사용할 수 있어야 한다.

다. 적용시 장점
(1) 포인팅 디바이스(pointing device)를 사용할 수 없는 시각장애인들도 웹 콘텐츠나 웹사이트 기능을 키보드만으로 사용할 수 있다.
(2) 키보드 또는 키보드 인터페이스를 사용할 수 없는 지체장애인의 경우에는 키보드 대신 음성 입력 장치를 이용하여 웹 콘텐츠에 접근할 수 있다.

라. 적용 예
(1) 이벤트 발생 방법 : 다양한 입력장치 사용 가능
웹 콘텐츠에서는 포커스인(focus-in), 포커스 아웃(focus-out), 그리고 활성화(activation)의 세 가지 이벤트가 주로 사용된다. 또한, 이들 이벤트는 포인팅 디바
이스(예를 들어 마우스), 키보드, 음성 입력 시스템과 같은 다양한 입력 디바이스로 제어가 가능하다.
(2) 콘텐츠의 제어 : 키보드 또는 키보드 인터페이스 사용 가능 콘텐츠를 구성하는 모든 링크와 데이터 개체의 실행과 선택은 키보드 또는 키보드 인터페이스를 사용하여 수행할 수 있도록 구성한다. 예를 들어, 웹 페이지를 구성하는 콘텐츠 요소들 간의 이동은 탭(tab)키를 사용하여 가능하도록 구성한다.

항목 2.5 (반복 네비게이션 링크(repetitive navigation link)) 웹 콘텐츠는 반복적인네비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도
록 구성하여야 한다.

가. 용어 정리
① 반복적 네비게이션 링크(repetitive navigation link)란 여러 개의 네비게이션 링크들이 연속적으로 나열되어 있는 링크 개체를 의미한다. 스크린 리더는 반복적 네비게이션 링크 개체를 구성하는 모든 링크들을 순서대로 읽어주므로 콘텐츠의 핵심 부분으로 이동하기 위해서는 모든 링크를 읽어주는 시간이 필요하게 된다.

나. 요구조건
(1) 웹 콘텐츠 상에 반복적 네비게이션 링크 개체가 포함되어 있으며 이 링크 객체가 콘텐츠의 핵심부분보다 먼저 읽어주도록 구성된 경우에 이들 링크들의 읽기
를 생략하고 직접 콘텐츠의 메인 부분으로 직접 이동할 수 있는 링크를 제공하여야 한다.
(2) 하나의 긴 문장으로 구성된 웹 페이지는 이 페이지의 문장을 여러 개의 논리적인 절로 구분하고 각 절의 색인을 콘텐츠의 첫 부분에 포함시켜 원하는 절의 시작 부분으로 직접 이동할 수 있도록 웹 페이지를 구성한다.
(3) 모든 웹사이트는 텍스트 또는 대체 텍스트가 포함된 텍스트 아닌 콘텐츠로 구성된 사이트 맵을 제공하여야 한다.

다. 적용시 장점
(1) 이 항목을 만족하는 경우 페이지의 상단이나 좌측 프레임에 반복적 네비게이션 링크개체가 포함되어 있다면 스크린 리더 사용자는 이들 링크 목록을 순서대로읽어준 후에야 필요한 부분을 읽어주므로 매우 지루한 과정이 요구된다. 그러나 이 페이지의 처음에 핵심 부분으로 이동할 수 있는 링크를 제공하면 빠르게 필요한 위치로 이동할 수 있다.
(2) 하나의 긴 문장으로 구성된 콘텐츠 중에서 사용자가 원하는 부분을 찾기 위해서는 처음부터 모두 읽어야 함으로 필요한 부분을 찾는 것은 매우 지루한 일이다.
따라서 문장의 시작 부분에 색인을 제공하여 필요한 부분으로 직접 이동하도록 하는 것은 매우 편리한 기능이다.
(3) 사이트 맵을 제공하면 사용자는 이를 이용하여 필요한 정보가 위치한 페이지로 직접 이동할 수 있다.

라. 적용 예
(1) 메인 콘텐츠로의 직접 이동 : 프레임과 링크 사용 예
만일 웹 콘텐츠를 두 개의 프레임으로 구분하고 왼쪽 프레임을 반복적 네비게이션 링크용 프레임으로, 오른쪽 프레임을 메인 콘텐츠를 제공하도록 구성할 경우를 생각해 보자. 스크린 리더는 왼쪽의 반복적 네비게이션 링크 프레임의 내용을 모두 읽은 후에야 비로소 중앙의 메인 콘텐츠를 읽어주게 된다. 따라서 왼쪽 프레임에 있는 모든 반복적 네비게이션 링크들을 우회하여 직접 메인 콘텐츠로 이동하는 버튼을 두고, 이 버튼에 “메인 콘텐츠로 이동”이라고 레이블을 붙인다면 반복적 네비게이션 링크 개체 모두를 읽지 않고도 메인 콘텐츠 부분으로 직접 이동이 가능하게 된다.
(2) 문서 목차 : 긴 문서의 탐색용이하나의 긴 문서로 구성된 웹 콘텐츠의 시작부분에 이 문서의 목차와 해당 위치로 직접 이동할 수 있는 링크를 제공하고,문서가 나누어지는 부분에 문서의 처음,다음 절, 목차 등으로 이동할 수 있는 링크를 두면 문서를 탐색하는데 매우 편리하다.
(3) 웹사이트 : 사이트 맵의 운영
웹 콘텐츠의 첫 페이지에 사이트 맵으로 이동하는 링크를 제공하면 모든 페이지를 열람하지 않고도 필요한 웹 페이지로 직접 이동이 가능하다.

항목 2.6 (반응시간의 조절기능) 실시간 이벤트나 제한된 시간에 수행하여야 하는 활동등은 사용자가 시간에 구애받지 않고 읽거나, 상호작용을 하거나 응답할 수 있어야 한다.

가. 용어정리
(1) 실시간 이벤트(real-time event)란 콘텐츠의 저자가 시간을 통제할 수 없는 실시간 상황에 벌어지는 이벤트를 의미한다.
(2) 정해진 시간 내에 응답이 필요한 콘텐츠들은 다음과 같다.
(가) 자동적으로 갱신되도록 구성된 콘텐츠
(나) 몇 초 후에 다른 페이지로 이동하도록 구성된 콘텐츠
(다) 깜빡이는 텍스트나 스스로 스크롤 하도록 구성된 텍스트
(라) 짧은 기간 동안 나타났다 일정시간 후에 사라지는 대화창
(마) 일정시간 동안 사용하지 않으면 페이지에 대한 접근이 강제 차단되거나 사용 할 수 없게 되는 콘텐츠
(3) 팝업(Pop-Up) 창이란 활성화되어 있는 웹 브라우저에 담긴 콘텐츠가 어떤 동작에 의하여 또는 자동으로 새로 열린 웹 브라우저 창을 의미한다. 그러나 운영체 제가 표시하는 메시지 창은 팝업 창으로 분류하지 않는다.

나. 요구조건
(1) 웹 콘텐츠의 시간 제약 조건이 최소한 아래의 항목 중 하나는 만족하여야 한다.
(가) 사용자가 시간제한 기능을 동작하지 않도록 할 수 있거나,
(나) 일반적으로 사람들이 선호하는 시간의 10배 이상으로 제한 시간을 늘릴 수 있거나,
(다) 주어진 시간이 종료하기 전에 경고를 발하며, 제한 시간을 늘리기 위하여 최소 한 10초 이상 시간이 주어질 수 있어야 한다.
(2) 그러나 아래의 항목은 예외로 하되, 시간제약이 있음을 이 페이지에서 분명하게 알려 주어야 한다.
(가) 경매 등과 같이 시간 제약이 있으나 다른 대안이 없는 경우거나,
(나) 실시간 게임이나 시간이 정해진 범위에서 작업해야 하는 테스트 등과 같이 시간 제약이 필수적인 경우
(3) 팝업(Pop-Up) 창은 가급적 사용을 피해야 한다. 그러나 꼭 사용해야 하는 경우에는 팝업 창이 열리기 전에 사용자에게 경고를 할 수 있어야 한다. 또한 팝업창이 열리더라도 포커스가 새로 열린 팝업 창으로 이동해서는 안 된다.

다. 적용시 장점
(1) 독서 장애, 인지 장애, 학습 장애를 지닌 사람들은 기록된 문서를 읽고 이해하는 데에 대부분의 사람들보다 더 많은 시간을 필요로 하는 경우가 종종 발생한다.
(2) 지체장애인들은 이동 객체에 대해 반응할 만큼 빠르게 동작하거나 정확하게 움직일 수 없다.
(3) 자주 갱신되는 콘텐츠에서 보조 기술이나 음성 브라우저 등이 정해진 시간 내에 이 콘텐츠를 읽거나 처리하는 것이 곤란한 경우에 시간 제약에 구애받지 않도록 할 필요가 있다.
(4) 팝업 창을 사용하면 시각장애인의 경우에 새로운 창의 열고 닫힘을 잘 알 수 없으므로 매우 불편하다. 그러나 부득이해서 팝업 창을 사용해야만 하는 경우에는 창이 열리기 전에 사용자에게 이를 알려주어 시각장애인들이 팝업 창이 열린다는 것을 사전이 인지하도록 하는 것이 좋다.

라. 적용 예
(1) 시간제약이 없는 콘텐츠 구성
웹 콘텐츠를 구성할 경우에 시간제한을 두지 않도록 한다.
(2) 시간제한이 있는 콘텐츠 구성
시간제한을 둘 경우에는 이러한 사항을 사용자가 충분히 알 수 있도록 공지하도록 한다. 이를 위하여 경과시간과 남은 시간을 화면에 표시하거나 그 값을 스크린리더로 사용자에게 알려줄 수 있다.

지침 3. 이해의 용이성 - 사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.

항목 3.1 (데이터 테이블 구성) 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

가. 용어 정리
(1) 데이터 테이블(data table)이란 테이블을 구성하는 데이터간의 논리적 관계를 표현하기 위하여 사용하는 형태이다.

나. 요구 조건
(1) 데이터 테이블은 테이블의 제목이나 테이블의 내용을 요약하여 제공해야 한다(항목 1.1 참조).
(2) 데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성하여야 한다.

다. 적용시 장점
(1) 데이터 테이블을 요구 조건에 맞추어 제작한 경우에는 임의의 데이터 셀에 대응되는 모든 헤더 값을 알 수 있다.

라. 적용 예
(1) 간단한 데이터 테이블 구성
HTML을 이용하여 간단한 데이터 테이블을 구성하는 경우에 데이터 셀과 헤더는 각각
와 태그를 사용하여 테이블을 구성한다.
(2) 복잡한 데이터 테이블 구성
HTML에서 행을 그룹화 하는데 THEAD, TFOOT, TBODY 등의 속성을 사용하고, 열을 그룹화 하는 데는 COL, COLGROUP 등의 속성을 사용한다. 보다 복잡한 테이블의 구성을 위해서는 “axis", "scope", "headers"등의 속성을 이용한다.
(3) 데이터 테이블 설명
HTML 4.01에 따라 데이터 테이블을 구성하는 경우에 테이블에 대한 설명은 태그를 사용하여 표시할 수 있다. 또한

태그를 사용하여 테이블의 간단한 제목을 표시할 수도 있다. 태그를 사용해도 동일한 효과를 얻을 수 있다. 즉, 데이터 테이블의 제목(title)은 도표의 첫 부분(상단 처음)에 오도록 하여 이어지는 자료가 데이터 테이블임을 알도록 하면 편리하다.

항목 3.2 (논리적 구성) 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야한다.

가. 용어정리
(1) 배치용 테이블(layout table)이란 데이터 테이블과는 달리 문서의 모양을 만들기 위한 목적으로 사용하는 테이블이다.
(2) 스타일 시트(style sheet)란 문서의 표현 형태를 규정하는 일련의 명령문을 의미한다. 스타일 시트는 콘텐츠 제공자가 마련한 것,사용자가 마련한 것, 웹 브라우저에 내장된 형태 등의 세 가지 경우가 있다. CSS(Cascading Style Sheets)레벨2가 스타일 시트의 대표적인 규정이다.

나. 요구사항
(1) 문서의 모양이나 콘텐츠의 배치를 위해서는 스타일 시트(style sheet)를 사용하여야 한다.
(2) 배치용 테이블을 사용하여 콘텐츠의 모양이나 배치를 할 경우에는 테이블을 구성하는 모든 셀들을 왼쪽상단에서 오른쪽 하단에 이르는 순서대로 늘어놓았을때에도 그 내용을 충분히 이해할 수 있도록 구성해야 한다.

다. 적용시 장점
(1) 논리적으로 구성된 웹 콘텐츠는 스타일 시트(style sheet)를 바꾸거나 기능을 제거하더라도 그 내용을 순서대로 읽을 수 있으므로 문서의 의미를 이해하는데 어려움이 없다.
(2) 배치용 테이블은 종종 일정한 형태를 표현하기 위하여 사용된다. 이 경우에도 스크린 리더로 읽어주는 내용의 순서가 화면에 나타난 콘텐츠의 읽는 순서와 같아지게 된다.

라. 적용 예
(1) 배치용 테이블 : 배치용 테이블은 캡션(CAPTION)이나 타이틀(TITLE) 태그를 사용하지 않는다.
(2) 스타일 시트 : 스타일 시트를 사용하여 콘텐츠의 모양이나 배치를 구성할 경우에는 스타일 시트 기능을 제거하거나 다른 스타일 시트를 사용하더라도 그 내용을 이해하기 쉽게 콘텐츠를 구성하여야 한다.

항목 3.3 (온라인 서식 구성) 온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.

가. 용어 정리
(1) 온라인 서식(on-line form)이란 웹 브라우저 상에서 작성하여 제출하도록 제공되는 양식을 의미한다.
(2) 애플릿(applet)이란 웹 페이지에 삽입되는 프로그램을 의미한다.
(3) 플러그인(plug-in)이란 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.

나. 요구 조건
(1) 온라인 서식을 구성하는 모든 서식 제어 요소, 예를 들면, 편집 상자(edit box), 라디오 버튼(radio button), 체크 박스(check box) 등은 레이블과 해당 서식 제어 요소간의 표시 순서가 일정하여야 한다.
(2) 탭(tab)키를 이용하여 서식 제어 요소 간을 이동할 경우에 그 순서가 왼쪽 위에서 오른쪽 아래 부분으로 순차적인 이동이 가능하여야 한다.
(3) 서식을 구성할 때에 보조기술을 사용하면 접근이 가능한 경우에만 스크립트, 애플릿,플러그인 또는 다른 프로그램 요소를 사용한다.만일 이것이 불가능할 경우에는 스크립트, 애플릿(applet), 플러그인(plug-in) 등 프로그램 요소의 기능을 정지시켜도 온라인 서식을 작성할 수 있어야 한다(항목 4.1 참조).

다. 적용시 장점
(1) 요구조건을 만족하는 경우에는 온라인 양식을 작성함에 있어서 모든 서식 제어요소의 레이블과 서식 제어 요소간의 관계가 일관성을 가지게 되므로 사용자는 혼란을 피할 수 있게 된다.

라. 적용 예
(1) 편집 박스 프로그래밍 예 : 예를 들어, 레이블 다음에 편집 박스(edit box)가 위치하는 경우에는 다음과 같이 프로그래밍을 하면 된다.
이름:

이 경우에 커서가 편집 박스에 위치하면,스크린 리더는‘이름’이라고 읽어준다.
(2) 편집 박스의 기본값 제공 : 편집 박스는 기본값을 가능한 한 제공한다.
(3) 편집 박스 테이블 구성 : 편집 박스를 데이터 테이블 형태로 구성할 경우에는 편집 박스별로 테이블 헤더를 읽어주도록 구성한다.

지침4기술적 진보성-구성한 콘텐츠는 웹 브라우저의 종류, 버전 등에 관계없이 사용될 수 있어야 한다.

항목 4.1 (신기술의 사용) 스크립트,애플릿 또는 플러그 인(plug-in) 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의 내용을 사용자에게 전달해줄 수 있을 경우에만 사용하여야 한다.

가. 용어 정리
(1) 애플릿(Applet)이란 웹 페이지에 삽입되는 프로그램을 의미한다.
(2) 플러그인(plug-in)이란 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.

나. 요구 조건
(1) 콘텐츠를 나타내기(display) 위해 혹은 인터페이스 요소를 만들기 위해 스크립트 언어를 이용할 경우에는 스크립트에 의해 제공되는 중요한 정보는 최신의 보조기술을 이용해 읽을 수 있어야 한다. 만일 이것이 불가능할 경우에는 스크립트의 동작을 정지시켜도 웹 콘텐츠의 내용을 읽을 수 있어야 한다.
(2) 애플릿, 플러그인(plug-in) 혹은 다른 응용 프로그램을 이용하여 웹 콘텐츠를 구성하였을 때에는 이들 프로그램 요소에 의해 제공되는 중요한 정보는 보조기술을 이용해 읽을 수 있어야 한다. 만일 이것이 불가능할 경우에는 이들 프로그램 요소의 동작을 정지시켜도 웹 콘텐츠의 내용을 읽을 수 있어야 한다.
(3) 스크립트, 애플릿과 플러그인은 키보드 또는 대체 키보드 인터페이스를 이용하여 사용할 수 있어야 한다.

다. 적용시 장점
(1) 보조기술이 지원되는 경우가 아니면 애플릿, 플러그인, 스크립트 등의 프로그램 요소를 사용하지 않도록 제한하므로 장애인들이 이들 프로그램 요소에 의하여 접근이 차단되는 일을 방지할 수 있다. 만일 Javascript 기능을 지원하지 않는 웹사이트에서 Javascript 기능을 정지시켰을 때에도 사용자에게는 필요한 정보가 차단되지 않는다.

라. 적용 예
(1) 플래시(Flash)에 대한 대체 텍스트를 현재까지 개발된 스크린 리더가 읽을 수 없다면 플래시를 사용하지 않도록 한다.

항목 4.2 (별도 웹사이트 제공) 콘텐츠가 항목 1.1에서 4.1에 이르는 13개 검사 항목을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면 텍스트만의 콘텐츠를 제공하는 웹 페이지(또는 웹사이트)를 별도로 제공해야 한다.

가. 용어 정리
(1) 텍스트만의 콘텐츠(text-only contents)란 텍스트 아닌 콘텐츠가 포함되지 않고 텍스트로만 구성된 콘텐츠를 의미한다.

나. 요구 조건
(1) 가능한 보조기술 수준이 미흡하여 장애인이 접근 가능한 웹 콘텐츠를 제작할 수 없는 경우에는 텍스트로만 구성된 대체 페이지를 마련하고 기존의 웹 콘텐츠의 첫 페이지에 대체 페이지로 이동하는 링크를 제공하여야 한다.
(2) 제공하는 대체 페이지는 기존의 웹 콘텐츠가 포함한 정보나 기능을 모두 포함하여야 한다.
(3) 제공하는 대체 페이지는 기존의 웹 콘텐츠의 개정 주기에 맞추어 개정되어야 한다.

다. 적용시 장점
(1) 새로운 웹 콘텐츠 제작기술의 개발로 인하여 아무리 노력하여도 원래의 웹 콘텐츠에 포함된 일부 또는 모든 콘텐츠 요소들을 장애인의 접근이 가능한 콘텐츠로 수정할 수 없을 경우가 있다. 이 경우 대체 텍스트로 구성한 페이지를 별도로 구성하여 운영하면 장애인의 접근성이 충분히 지원된다.

라. 적용 예
(1) 한글97 문서 : 별도의 웹 페이지로 구성
한글97로 작성된 문서를 콘텐츠로 제공하는 사이트의 경우, 스크린 리더를 통하여 한글97 문서를 읽을 수 없다. 이 경우에 동일한 내용을 별도의 HTML 문서로 제작하여 링크한다면 이러한 문제점이 해소된다.

tag : 접근성, 웹접근성 지침, 실태조사

전자정부 웹 표준 준수지침(2008. 4)

2008-09-26T18:42:14Z

전자정부 웹 표준 준수지침

1) 내용의 문법 준수

㉮ 모든 웹 문서는 적절한 문서타입을 명시해야 한다.

㉯ 명시한 문서타입에 맞는 문법을 준수해야 한다.

㉰ 모든 페이지는 사용할 인코딩방식을 표기해야 한다.

2) 내용과 표현의 분리

㉮ 논리적인 마크업을 구성하여 구조적인 페이지를 만들어야 한다.

㉯ 사용된 스타일 언어는 표준적인 문법을 준수해야 한다.

3) 동작의 기술 중립성 보장

㉮ 스크립트의 비표준 확장 사용은 배제되어야 한다.

㉯ 스크립트 비 사용자를 위한 대체텍스트나 정보를 제공해야 한다.

4) 플러그인의 호환성

㉮ 플러그인은 다양한 웹 브라우저를 고려해야 한다.

5) 콘텐츠의 보편적 표현

㉮ 메뉴는 다양한 브라우저 사용자도 접근할 수 있어야 한다.

㉯ 다양한 인터페이스(입력기기)로 웹 사이트를 이용할 수 있어야 한다.

6) 운영체제 독립적인 콘텐츠 제공

㉮ 제공되는 미디어는 범용적인 포맷을 사용해야 한다.

7) 부가 기능의 호환성 확보

㉮ 인증기능은 다양한 브라우저에서 사용 가능해야 한다.

8) 다양한 프로그램 제공

㉮ 정보를 열람하는 기능은 다양한 브라우저에서 사용 가능해야 한다.

㉯ 별도의 다운로드가 필요한 프로그램은 윈도우, 리눅스, 맥킨토시 중 2개 이상의 운영체제를 지원해야 한다.

tag : 전자정부 웹 준수지침; •
•
•
운전 시간과 운동시간 비만의 상관관계표

나. 데이터 테이블을 의미적으로 이해할 수 있도록 적절히 태그를 사용
• 행딘위 구분을 위한 태그를 제공 *
, , 등
• 열단위 구분을 위한 태그를 제공 *
, 등
• 제목셀과 내용셀의 구분을 위한 태그를 제공 *
운전 시간과 운동시간 비만의 상관관계표

, 등 헤더는 1행과 1열에 배치
• colspan, rowspan이 많이 사용되어 헤더구조가 복잡한 테이블의 경우 적절하게 사용
• 헤더의 긴 내용이 들어갈 경우 abbr 속성을 사용해 약어를 표시

다. 표의 머리글과 내용 칸을 바르게 짝지어야한다.

1. 머리글에 해당하는 td 나 th 요소에 그 머리글이 어디에 영향을 주는지 scope 속성을 붙여서 표시

개인별 시험 성적표
구분 중간고사 기말고사
김철수 50 60
박영희 70 80

소비자물가표

구분 중간고사 기말고사

김철수 50 60

박영희 70 80

2. 머리글을 나타내는 td 나 th 에 고유한 id 속성값을 주고, 그 머리글과 짝지어지는 내용 칸을 나타내는 td 에 id 속성값과 동일한 headers 속성값을 줌

개인별 시험 성적표
구분 중간고사 기말고사
김철수 50 60
박영희 70 80

개인별 시험 성적표

구분 중간고사 기말고사

김철수 50 60

박영희 70 80

라. Col Element 예제

야채 단가표
당근1:500원 토마토1(대구):300원 토마토1(광주):400원 무우1:600원
당근2:550원 토마토2(대구):300원 토마토2(광주):500원 무우1:630원
당근3:570원 토마토3(대구):300원 토마토3(광주):550원 무우3:620원

야채 단가표

당근1:500원 토마토1(대구):300원 토마토1(광주):400원 무우1:600원

당근2:550원 토마토2(대구):300원 토마토2(광주):500원 무우2:630원

당근3:570원 토마토3(대구):300원 토마토3(광주):550원 무우3:620원

tag : 데이터 테이블

2007년 12월 전국장애인 현황

2008-09-27T22:15:02Z

2007년 12월 전국장애인 현황 입니다.

tag : 장애인현황

1. 정보화 사회와 정보취약계층

2008-09-27T19:24:01Z

1. 정보화 사회와 정보취약계층

1.1 정보화 사회란?

1.2 정보취약계층-장애인의 이해

1.3 정보취약계층-노인의 이해

1.4 장애인 IT 환경 체험

학습내용

- 정보화 사회를 이해하기 위하여 개념 및 특징을 알아본다.

- 미국, 영국 등 선진국과 우리나라의 장애에 대한 개념의 비교

및 장애의 유형 등을 통해 정보취약계층에 대하여 이해한다.

- 장애인 IT 환경 체험을 통해 접근성의 필요성을 이해한다.

1.1 정보화 사회란?

1.1.1 정보화 사회

-세계 모든 나라는 정보화를 통한 국가경쟁력 확보에 주력하고 있음

-우리나라는 정보화촉진기본법에서 정보화를 '정보를 생산, 유통 또는 활용하여

사회 각 분야의 활동을 가능하게 하거나 효율화를 도모하는 것'이라고 규정

-정보화 사회란 컴퓨터와 통신 기술이 결합되어 정보의 수집·가공·유통 능력이 확

장되면서, 정보의 가치가 극대화 되는 사회를 의미

-또한 인간이 현대사회를 영위하는데 필요한 정보를 수집, 저장, 가공, 생산 등의

과정을 통해 정보의 유통을 확대시키고 이러한 과정과 유통이 보편화된 사회

-따라서 정보화 사회는 엄청난 양의 정보가 생산되어 빠른 속도로 이동 및 유포되

거나 소비되는 사회를 의미

1.1.2 정보화 사회의 특징

첫째, 정보화 사회는 정보의 사회적 중요성이 극대화되는 사회

둘째, 대량의 정보가 생산·유통되어지는 사회

셋째, 정보·지식의 생산이 산업구조의 중심이 되는 사회

넷째, 정보통신을 활용한 네트워크 커뮤니케이션이 가능한 사회

다섯째, 정보 자체가 중요한 자원이 되는 사회

여섯째, 인간의 지적 창조력이 가장 중요한 사회

1.2 정보취약계층 - 장애인의 이해

1.2.1 각국의 장애인에 대한 정의

- 미국의 장애인법 (ADA, Americans with Disability Acts, 1990)

장애인은 개인의 일상생활 동작 중 한가지 이상에서 현저히 제한 받는 신체적

혹은 정신적 기능장애를 가진 자, 이러한 기능장애의 기록이 있는 자, 이러한

기능장애를 가진 것으로 간주되는 자로 규정

- 미국의 사회보장법 (ASA, Americans with Security Act, 1935)

의학적으로 판정하여 적어도 1년간 지속될 것으로 판정되는 또는 사망에 이를

것으로 판정되는 신체적·정신적 손상으로 인하여 실질적인 소득활동에 참여하

지 못하는 자로 규정

- 영국의 장애인 차별 금지법(DDA, Disability Discrimination Act, 1995)

장애인은 개인의 일상생활 동작 중 한 가지 이상에서 현저히 제한 받는 신체적 혹은 정

신적 기능 장애를 가진 자, 이러한 기능장애를 가진 것으로 간주되는 자

- 호주의 장애인 차별 금지법(DDA, Disability Discrimination Act, 1993)

신체적, 지적, 심리적, 정신적, 감각적, 신경적 장애와 추형, 기형 및 질병을 야기하는

유지체의 존재(예:HIV바이러스) 등을 모두 포함하며, 현재 뿐만 아니라 과거에 존재한

사실이 있거나 미래에 존재할 가능성이 있거나 가진 것으로 인지되는 장애(예: 알콜 및

약물 중독, 당뇨, 암, 에이즈 등)도 포함

- 우리나라의 장애인복지법(1989)

• 장애인은 신체적ㆍ정신적 장애로 인하여 장기간에 걸쳐 일상생활 또는 사회생

활에 상당한 제약을 받는 자

• 신체적 장애는 주요 외부신체기능의 장애, 내부기관의 장애 등을 의미

• 정신적 장애는 정신지체 또는 정신적 질환으로 발생하는 장애를 의미

1.2.2 장애의 유형과 컴퓨터 활용

- 지체장애

• 상지 또는 하지의 일부분을 잃어버린 절단장애, 관절의 강직, 근력의 약화 또

는 마비 등의 관절장애 또는 팔, 다리의 장애와 척추장애와 같은 지체기능장

애로 인하여 신체부위 도달 확장을 위한 장치나 도구가 필요

• 팔 또는 손의 전체 혹은 일부에 장애가 있어 마우스나 키보드를 자유롭게 사

용하지 못하는 사용자의 경우 어떠한 방법으로 컴퓨터를 사용할까?

눈으로 움직이는 마우스(이미지)

헤드마우스(이미지)

- 시각장애

• 중심시력, 시야, 색 지각 또는 양안 기능에 영향을 주는 시 감각에 기능적 이

상으로 인하여 시각을 대체할 수 있는 보조도구가 필요

• 선천적 혹은 후천적 사고로 인하여 시력 및 시각에 문제가 있는 사용자는 모

니터 화면을 볼 수 없는 환경에서 어떻게 컴퓨터를 사용할까?

독서 확대기(이미지)

스크린리더(이미지)

- 청각장애

• 기질적 또는 기능적인 장애가 원인이 되어 듣는 기능이 일시적이거나 영구적

으로 저하되거나 결여된 상태로 의사소통, 소리와 음성 확대, 청각신호를 시

• 각 신호로 전환시켜주는 보조도구가 필요

청력 장애로 들을 수 없는 사용자의 경우 정보통신기기를 어떻게 사용할까?

의사소통 보조기기(이미지)

화상 전화기(이미지)

1.3 정보취약계층 - 노인의 이해

1.3.1 노인의 이해

- 사전적 의미

나이가 들어 늙은 사람

- 사회복지법

65세 이상인 사람

- 국제 노년학회(International Association of Gerontology)

• 환경변화에 적절히 적응할 수 있는 자체조직에서 결손이 있는 사람

• 자신을 통합하려는 능력이 감퇴되어 가는 시기에 있는 사람

• 인체기관, 조직, 기능에 쇠퇴현상이 일어나고 있는 사람

• 생활체 적응성이 정신적으로 결손 되어 가고 있는 사람

• 조직 및 기능저장의 소모로 적응 감퇴현상을 겪고 있는 사람

1.3.2 노인과 인터넷

- 노인의 정보화 활동 장애 요인

[신체적 장애]

• 감각(시각, 청각, 촉각 등) 장애

• 신체(떨림, 신경, 운동 등) 장애

• 인지(지능, 기억, 언어, 학습 등) 장애 및 알러지(접촉, 음식, 호흡기 등)

[환경적 장애]

• 접근성 장애, 물리적 장애, 잘못된 편견 등

인터넷 사용의 장애 원인

• 대부분 노인은 전용 PC를 보유하지 않아 컴퓨터 및 인터넷의 환경에 접근이 어려움

• 시력이 약해 작은 모니터를 통한 정보 획득이 용이하지 못함

• TV나 라디오, 신문 등에 익숙하여 인터넷의 정보접근방식에 적응이 어려움

• 노인을 위한 정보화 관련교육장소가 양과 질적인 면에서 부족

• 인터넷에서 노인이 활용할 수 있는 정보 또한 부족

- 노인의 정보화 수준

• 우리사회가 점차 고령화 사회로 접어듦에 따라 현대사회에서의 노인문제는 가족이나

개인의 문제가 아니라 사회문제이며, 그 중에서도 정보화 격차 문제가 큰 문제로 대두

되고 있음

(표)

구분     2000.3    2000.12    2002.12    2003.12    2004.12    2005.12    2006.6

40 대      18. 6     22.7       38.9       50.8        58.3       67.2        71.0

50 대       3.3       5.7       17.5       23.2        27.6       34.7        37.5

60 대이상   3.3       5.7        3.2        5.1         7.3       11.0        15.2

• 2006년 6월 연령별 인터넷이용률 및 이용자수는 60대 이상의 인터넷이용률이 전년 대비 가장 큰

폭으로 증가

• 60대 이상의 인터넷이용률(15.2%)이 2005년 6월 대비 4.2%p 증가하여 가장 높은 증가 폭을 나

타냄

1.4 장애인 IT 환경 체험

1.4.1 시나리오 안내

- 시각장애 체험

• 전맹 체험

• 약시(저시력) 체험

• 색맹 체험

시야장애 체험

- 지체장애 체험

• 헤드 마우스 환경 체험

• 손가락 및 손 장애 체험

1.4.2 시나리오에 의한 체험

- 시각장애 체험 (전맹 체험)

준비물 : 안대 등과 같은 앞을 볼 수 없는 눈 가리개

실습사항

• 키보드 등과 같은 장치의 특정 버튼(Key)를 찾고 그 기능을 이해할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 특정 기능(전화걸기 또는 문자 송수신 등)에 대하여 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간은 얼마의 차이가 있는가를 알아보자

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (약시 체험)

준비물 : 안개막 등으로 제작된 안대 또는 시야를 많이 흐리게 할 수 있는 눈 가리개

실습사항

• 키보드 등과 같은 장치의 특정 버튼(Key)를 찾고 그 기능을 이해할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 특정 기능(전화걸기 또는 문자 송수신 등)에 대하여 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간은 얼마의 차이가 있는가를 알아보자

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (색맹 체험)

준비물 : 셀로판지(빨강, 파랑) 등으로 제작된 안대 또는 동일한 환경제공이 가능한

눈 가리개

실습사항

• 색상구분이 어려운 상황에서 정확한 내용을 이해할 수 있는가?

실습내용1

• 1. 실습자는 웹 브라우저를 활용하여 다양한 사이트를 방문한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 웹 사이트의 화면을 정확히 인식할 수 있는가를 알아보자.

인지하기 힘들거나 인지가 불가능 하다면 어느 부분이며, 어떠한 이유 때문인지를 확인해 보자.

• 3. 다양한 웹 사이트를 방문하며 셀로판지 색상에 따른 어려움을 알아보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 휴대폰 화면을 정확히 인지할 수 있는가를 알아보자.

문자 송수신 등 화면을 통한 기능 수행은 원활히 수행할 수 있는지를 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 시각장애 체험 (시야장애 체험)

준비물 : 조그만 구멍(반지름: 0.25~0.3cm)이 뚫린 안대 또는 동일한 환경제공이

가능한 눈 가리개

실습사항

• 시야확보가 어려운 상황에서 정확한 내용 이해 및 기능 수행을 할 수 있는가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간에 대한 차이를 확인해 보자.

• 3. 다양한 단축키에 대하여 실습을 여러 번 진행해 보자.

• 4. 실습자는 웹 브라우저를 활용하여 다양한 사이트를 방문한다.

• 5. 준비한 안대 또는 눈 가리개를 착용한 후 해당 웹 사이트의 화면을 정확히 인식할 수 있는가를 알아보자.

인지하기 힘들거나 인지가 불가능 하다면 어느 부분이며, 어떠한 이유 때문인지를 확인해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 안대 또는 눈 가리개를 착용한 후 휴대폰 화면을 정확히 인지할 수 있는가를 알아보자.

문자 송수신 등 화면을 통한 기능 수행은 원활히 수행할 수 있는가를 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (헤드 마우스 체험)

준비물 : 나무 또는 플라스틱 막대 (굵기 : 나무젓가락 정도, 길이 : 30~35cm)

실습사항

• 손을 사용하지 않고 머리 또는 목을 사용하여 키보드 등과 같은 장치에 대한 기능 수행이 가능한가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비한 막대를 사용(머리 위 또는 턱 아래에 손으로 고정)하여 해당 기능을 원활히 수행할 수 있는가를

알아보자. 가능하다면 손으로 수행할 때와의 시간 차이는 얼마인지 확인해 보자.

• 3. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비한 막대를 사용(머리 위 또는 턱 아래에 손으로 고정)하여 특정 기능(전화걸기 또는 문자 송수신 등)

에 대하여 원활히 수행할 수 있는가를 알아보자.

가능하다면 손으로 수행할 때와의 시간 차이는 얼마인지 확인해 보자.

• 3. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (손가락 및 손 장애 체험)

준비물 : 손 또는 손가락을 묶을 수 있는 고무줄이나 압박붕대

실습사항

• 손을 사용하지 않고 머리 또는 목을 사용하여 키보드 등과 같은 장치에 대한 기능 수행이 가능한가?

실습내용1

• 1. 실습자는 특정 프로그램(예: 아래한글 또는 웹 브라우저 등)에서 어떤 기능 수행을 위한 단축키 및 기능키

몇 개를 숙지한다.

• 2. 준비물을 사용하여 손가락을 묶은 후(중지, 인지, 약지 : 3~5번째 손가락) 해당 기능을 원활히 수행할 수

있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 3. 준비물을 사용하여 손가락을 묶은 후(검지와 중지 :2,3번째 손가락, 인지와 약지 :4~5번째 손가락) 해당

기능을 원활히 수행할 수 있는지 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 4. 준비물을 사용하여 모든 손가락을 묶은 후(주먹을 쥐거나 편 상태) 해당 기능을 원활히 수행할 수 있는가를

알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 5. 다양한 단축키 및 기능키에 대하여 실습을 여러 번 진행해 보자.

- 지체장애 체험 (손가락 및 손 장애 체험)

실습내용2

• 1. 옆자리의 친구 또는 앞뒤자리의 친구와 서로의 휴대폰을 교환 하자.

(자신이 잘 모르는 환경에서 실습을 진행함을 목적)

• 2. 준비물을 사용하여 손가락을 묶은 후(중지, 인지, 약지 : 3~5번째 손가락)해당 기능을 원활히

수행할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 3. 준비물을 사용하여 손가락을 묶은 후(검지와 중지 :2,3번째 손가락, 인지와 약지 :4~5번째

손가락) 해당 기능을 원활히 수행할 수 있는가를 알아보자.

가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 4. 준비물을 사용하여 모든 손가락을 묶은 후(주먹을 쥐거나 편 상태) 해당 기능을 원활히 수행

할 수 있는가를 알아보자. 가능하다면 착용 전후의 수행 시간 차이를 확인해 보자.

• 5. 다양한 휴대폰에 대하여 실습을 여러 번 진행해 보자.

[과제]

개인과제

장애인 IT 체험 후기 작성

• 시각장애 체험 후 불편한 점 등에 대하여 알아보자

• 지체장애 체험 후 불편한 점 등에 대하여 알아보자

정보취약계층과 관련된 다양한 통계자료를 찾아보고 그 시사점을 논의해 보자

tag : 교안

마크업의 기초 DTD

2008-09-27T18:59:01Z

HTML 4.01 표준 문서 형식

"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 표준 문서 형식
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 표준 문서 형식
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
표준 문서 형식(Doctype)을 기반한 웹페이지에 대한 정확한 사용법은 다음과 같다.
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

...

...

tag : dtd

인터넷 웹 콘텐츠 접근성 지침(2005.12)

2008-09-26T19:16:50Z

인터넷 웹 콘텐츠 접근성 지침

1. 개 요
이 문서는 장애를 가진 사람들이 접근할 수 있도록 웹 콘텐츠를 제작하는 방법에 관하여 기술하고 있다.특별히 이 문서 내에 포함된 지침들은 웹 콘텐츠 저자,웹사이트
설계자 및 웹 콘텐츠 개발자들이 접근성(Accessibility)을 준수한 웹 콘텐츠를 쉽게 만들 수 있도록 도움을 주기 위하여 기획되었다.
이 지침을 제정하는 가장 큰 목적은 웹 콘텐츠에 접근하려는 모든 사람들이 어떤 컴퓨터나 운영체제, 또는 웹 브라우저(web browser)를 사용하든지, 또는 어떠한 환경에 처해 있는지에 구애받지 않고 접근할 수 있는 웹 콘텐츠를 제작할 수 있도록 도와주는것이다. 그렇다고 해서 이 지침이 장애인들의 접근권을 위하여 그래픽 이미지나 비디오 자료와 같이 장애인들이 접근하기 어려운 콘텐츠를 사용하지 못하도록 제한하는 것은 아니며, 이들 멀티미디어 콘텐츠들도 보다 광범위한 부류의 사람들이 용이하게 접근할 수 있도록 콘텐츠를 구성하는 방안을 제시하는데 주목적이 있다.
이 지침은 한국 정보통신접근성향상표준화포럼 산하 웹접근성분과위원회가 주축이 되어 제안하는 것으로 국제 표준화 기구인 W3C(World Wide Web Consortium)의
WAI(Web Accessibility Initiative)에서 1999년 5월 제정한 웹 콘텐츠 접근성 가이드라인(WCAG : Web Content Accessibility Guidelines 1.0)과 WCAG 2.0 초안 (2003년 6월 24일판)을 참고하였으며, 부분적으로 미국 재활법 508조를 참고하여 작성한것이다. 특히 제정시점을 기준으로 국내의 웹 환경 및 관련 보조기술의 실태를 조사하고 그 결과를 토대로 표준(안)을 마련하였다.

2. 표준의 구성 및 범위

2.1 지침 제정 목적
이 문서는 접근이 가능한 웹 콘텐츠를 만들기 위한 설계 원리를 개괄한다. 만일 이문서에서 제시하는 원리를 무시한 채로 웹 콘텐츠를 제작한다면 장애를 가진 사람들은 웹 콘텐츠에 접근할 수 없거나 접근하는 데에 어려움이 따르게 된다. 반면에 이 문서 에서 제시한 원리에 따라 웹 콘텐츠를 제작한다면 적절한 보조기술을 사용하는 장애인들은 해당 콘텐츠에 충분히 접근할 수 있을 것이다. 웹 문서를 설계함에 있어서 고려해야 하는 접근권의 유형은 다음과 같다.

1) 시각을 통하여 정보를 인지할 수 없거나 인지 능력이 떨어지는 시각장애가 있는경우
2) 청각을 통하여 음향 정보를 인지하지 못하는 청각장애가 있는 경우
3) 신경계의 마비, 근골격계의 마비 또는 선천성 기형 등으로 신체의 움직임에 제한
이 있는 지체장애가 있는 경우
4) 읽기나 문장 이해력이 떨어지는 언어장애가 있는 경우
5) 키보드나 마우스를 사용할 수 없는 장애가 있는 경우
6) 문서에 적용된 언어에 따라 말하거나 이해하는데 어려움이 있는 장애가 있는 경우 - 예를 들면 외국어로 작성된 콘텐츠를 이해하지 못하는 경우
7) 시각, 청각 또는 손을 사용하고 있어서 필요로 하는 일을 할 수 없는 경우 - 예를 들어 운전 중이나 소음이 많은 곳에서 일하는 경우로 장애라기보다는 처한 환
경에 따라 제한 받는 경우
8) 사용하고 있는 웹 브라우저의 종류나 버전이 다름으로 인하여 어려움이 발생하는 경우 등이다. 콘텐츠 제작자는 모든 사용자들이 충분히 접근할 수 있는 콘텐츠를 설계하거나 제작할 필요가 있다. 이 문서에서는 위에 열거한 경우에도 충분히 그 내용을 인지할 수 있도록 하기 위한 웹 콘텐츠의 설계 방법에 대한 지침을 제시할 것이다. 그러나 이 문서는 기본적인 목적이 HTML 문법을 교육시키거나 HTML을 이용하여 웹 문서를 설계하는데 필요한 기초적인 지식을 제공하려는 것은 아니다.

2.2 문서의 구성
이 문서에서는 사람들이 필요한 부분을 빠르게 찾아볼 수 있도록 하기 위해 서로 관계가 있는 항목들을 네 가지 지침으로 분류하였다. 즉, 웹 콘텐츠에 접근하기 위해 갖추어야 할 네 가지 주요 지침은 인식의 용이성,운용의 용이성,이해의 용이성,기술적 진보성의 네 가지이며,네 가지 지침은 각각 몇 개의 검사항목(또는 항목)으로 구성된다. 본 표준에서 제시하는 검사항목은 총 14개이다. 각 검사항목은 요구사항, 용어정의, 해당 항목을 준수함으로써 얻어지는 혜택 및 적용 예 등으로 구성된다.

3.접근성 있는 웹 콘텐츠 설계

이 문서에서 목표로 하는 것을 개괄하면, 모든 사용자가 그 내용을 인지할 수 있으며, 운용할 수 있고, 이해할 수 있는 웹 콘텐츠를 만들 수 있도록 하는 것이다. 이 경우에 현재까지 개발된 보조기술이나 앞으로 개발될 기술을 사용하는 경우도 염두에 두고 있다. 접근성이 준수된 웹 콘텐츠란 아래의 네 가지 지침을 만족하는 경우에 가능하다. 따라서 이 문서에서는 아래의 네 가지 지침에 포함되는 모든 검사항목을 만족해야 접근성이 있다고 하며, 일부분 또는 전체 검사항목을 만족하지 못하는 경우에는 접근성이 없는 웹 콘텐츠라고 정의한다.

가. 인식의 용이성 : 글로 표현할 수 없는 콘텐츠를 제외하고 장애 유형에 관계없이모든 사용자가 콘텐츠를 인지할 수 있도록 제공해야 한다.
나. 운용의 용이성 : 콘텐츠에 포함된 모든 구성 요소들은 장애 유형과 관계없이 모든 사용자가 사용할 수 있어야 한다.
다. 이해의 용이성 : 모든 콘텐츠는 가능한 한 그 내용과 사용 방법을 모든 사용자가 이해하기 쉽도록 구성해야 한다.
라. 기술적 진보성 : 현재 개발된 보조기술로는 접근이 어렵거나 불가능한 웹 콘텐츠는 가용한 보조기술을 이용하여 접근할 수 있도록 대체 콘텐츠를 함께 제공해야 한다.

접근성이 있는 웹 콘텐츠는 장애를 가진 사람들만이 아니라 다양한 사람들에게 도움을 줄 수 있다. 예를 들어 엘리베이터는 휠체어를 타고 있는 사람에게만 유용한 것이 아니라 유모차로 이동하는 사람이나 노약자에게도 유용하다. 마찬가지로 접근성이 있는 웹 콘텐츠는 장애를 가지고 있는 사람이나 그렇지 않은 사람 모두에게 도움을 줄 수 있다. 예를 들어, 소음이 심한 지역에서 웹사이트에 접근하거나 웹 문서상의 음성정보를 이용하는 경우에 캡션이 제공된다면 제한적인 환경에도 불구하고 그 내용을 알수 있을 것이다. 운전중인 경우에는 눈을 다른 데로 돌릴 겨를이 없기 때문에 문서를 읽어 주거나 음성정보를 제공하도록 구성된 콘텐츠가 매우 유용할 것이다. 마찬가지로 영화에 캡션(자막)이 제공된다면 검색 엔진을 활용하여 이 영화로부터 유명한 대사를 쉽게 찾을 수 있는 편리성을 제공하기도 한다.

여기서 고려해야할 장애의 유형과 장애를 극복하기 위하여 사용될 수 있는 대체 수단에 관한 몇 가지 방법을 살펴보자.

가. 들을 수 없는 사람은 일반적으로 소리를 통해 제공되는 정보를 눈으로 보고 싶어한다.
나. 볼 수 없는 사람은 시각적으로 제공되는 정보를 텍스트 또는 점자 정보로의 변환을 통해 듣거나 읽을 수 있기를 원한다.
다. 민첩하거나 용이하게 움직일 수 없는 사람은 가능한 한 적게 움직여서 원하는 일을 하거나 필요한 만큼 충분한 시간동안 작업 할 수 있기를 원한다.
라. 글씨를 잘 읽지 못하는 사람은 그 내용을 음성으로 읽어주기를 원한다.

위에 예로든 네 가지 경우는 모든 장애 유형이나 경우를 망라한 것이 아니며, 자주접하게 되는 경우에 이에 대한 대책을 예로 든 것이다. 따라서 보다 복잡한 경우에는 또 다른 접근 방법을 마련해야 한다. 만약 어떤 웹 콘텐츠가 이 문서에서 제시하는 항목에 따라 제작된다면 사용자는 보조기술을 사용하여 웹 콘텐츠에 쉽게 접근할 수 있다.예를 들어 스크린 리더(screenreader)와 적당한 웹 브라우저(web browser)를 사용하면 웹 페이지의 내용을 음성으로 읽어줄 수 있어서 음성으로 그 내용을 읽어주기 원하는 모든 사람들의 접근권을 보장할 수 있다. 스크린 리더와 같이 장애유형별로 웹 콘텐츠에 접근할 수 있도록 도와주는 많은 보조기술들이 개발되어 있으므로 장애 유형과 필요한 보조기술을 활용하여 웹 콘텐츠에의 접근성을 향상시킬 수 있다. 이와 관련한 사항은 관련 장애인 단체에서
제공하는 정보나 웹사이트를 참고하라.

지침 1. 인식의 용이성 - 웹사이트에서 서비스하고 있는 모든 콘텐츠는 누구나 쉽게 인식할 수 있도록 설계되어야 한다.

항목 1.1 (텍스트 아닌 콘텐츠(non-text contents)의 인식) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.

가. 용어 정리
(1) 텍스트 아닌 콘텐츠(non-text contents)란 그림,이미지 등으로 제작된 텍스트,애니메이션, 아스키(ASCII) 그림문자, 목록표시 이미지, 그래픽 버튼, 음성음향자료 또는 비디오 자료 등의 오디오와 영상과 같이 표준 문자(부호) 체계가 아닌, 시각적 또는 청각적 정보가 포함된 콘텐츠를 의미한다. 한글 부호의 경우에는 유니코드, 조합형 또는 완성형 부호체계를 사용하여 작성된 텍스트 외의 모든 경우를 의미한다.
(2) 빈 문자(blank text)란 아무런 정보도 가지고 있지 않은 문자열을 의미한다.
HTML 등의 문법에서 빈 문자는 “”을 가리킨다. 즉, 빈 문자를 스크린 리더에서 읽으면 아무런 소리도 나지 않는다.

나. 요구 조건
(1) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 콘텐츠는 모두 해당 콘텐츠와 정확하게 일치하는 텍스트 콘텐츠(text contents)와 함께 제공해야 한다.
(2) 만약, 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 없는 경우는 해당 콘텐츠에 대한 설명을 텍스트로 반드시 제공해야 한다. 이 때, 제공되는 텍스트 콘텐츠는
설명하고자 하는 원래의 콘텐츠의 내용이나 형태 등의 상세한 정보를 제공해야한다.
(3) 텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트는 콘텐츠 제작자가 원래의 콘텐츠를 사용해 표현하고자 했던 의미나 기능도 포함하여 설명
해야 한다.
(4) 텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트를 읽어줌으로 인하여 의미의 혼동을 줄 경우에는 빈 문자(blank text)를 대체 텍스트로 사용해야 한다.

다. 적용시 장점
(1) 시각장애 또는 인지장애 등으로 인해 시각으로 정보를 습득하는 데에 어려움을 겪는 사용자들이 스크린 리더(screen reader)와 같은 보조기술을 사용하여 텍스트 콘텐츠를 음성을 통해 읽음으로써 접근권을 보장받을 수 있게 된다.
(2) 청각장애나 다른 이유로 음향 정보를 알아들을 수 없는 사용자들을 위해 그 내용을 텍스트로 표시하거나 수화로 해당 내용을 번역함으로써 접근이 가능하게된다.
(3) 시각장애인은 물론 시각장애와 청각장애를 함께 갖고 있는 사용자 역시 해당 콘텐츠를 점자로 변환해 읽음으로써 접근권을 보장받을 수 있게 된다.
(4) 몇 개의 자료를 순서대로 나열하는 목록 등 해당 이미지가 단순히 홈페이지를 아름답게 꾸미기 위해 사용된 경우에는 이미지에 대한 대체 텍스트(alt-text)로 빈 문자를 사용하면 의미의 불필요한 혼동을 줄일 수 있다.

라. 적용 예
(1) 버튼으로 사용된 이미지 : 간단한 기능 설명부가 슬라이드 쇼에서 다음 슬라이드로 넘어가는 역할을 하도록 만든 오른쪽 화살표 모양의 이미지 링크(image link)의 경우에 이 버튼 이미지와 함께 "다음 슬라이드"라는 대체 텍스트를 함께 제공한다면 스크린 리더는 이 이미지 버튼을 "링크 - 다음 슬라이드"라고 읽어줄 수 있게 된다.
(2) 데이터 차트 : 간단한 레이블과 충분한 설명을 함께 제공
예를 들어 어떤 상품의 6월, 7월 및 8월의 판매실적을 비교해 보여주는 차트에 "그림 1 : 6월, 7월 및 8월의 판매 현황"이라는 간단한 레이블(label)을 붙이고, 차트에 대한 보다 긴 설명문(longdesc)을 붙인다면 해당 차트의 내용과 해당 차트가 표시하고
있는 정보를 사용자에게 전달할 수 있다.
(3) 애니메이션 : 간단한 레이블과 충분한 설명을 함께 제공
예를 들어 매듭을 짓는 방법을 보여주는 애니메이션의 경우에 "매듭을 만드는 형태를 보여주는 애니메이션"이라는 간단한 레이블과 함께 매듭짓기 위하여 손놀림하는 동작을 자세하게 설명하는 설명문을 붙인다면 매듭을 만드는 전 과정을 이용자가 자세하
게 알 수 있다.
(4) 연설 녹음자료 : 간단한 레이블과 긴 설명을 함께 제공웹 페이지에 음성 데이터가 포함되어 있는 경우에 이 데이터와 함께 간단한 제목을 레이블로 구성하고 음성 데이터의 내용에 대한 텍스트를 함께 제공한다면 청각장애인의 경우에도 모든 정보를 얻을 수 있다.
(5) 음악 자료 : 간단한 레이블 제공
예를 들어 베토벤의 교향곡 제 5번의 연주실황을 제공하는 음악 파일을 웹 페이지에서 제공하고 있는 경우에 이 음악 파일과 함께"베토벤 교향곡 제5번, 빈 필하모닉 오케스트라의 연주"라는 레이블을 함께 제공한다면 청각장애인의 경우에 음악 파일이 무슨 내용을 담고 있는지를 쉽게 알 수 있다.

항목 1.2 (영상매체의 인식) 시간에 따라 변화하는 영상매체는 해당 콘텐츠와 동기 되는 대체 매체를 제공해야 한다.

가. 용어정리
(1) 시간에 따라 변화하는 영상매체(time-dependent presentation)란 영화와 같이 소리와 영상정보가 동시에 제공되는 경우 혹은 콘텐츠 재생 과정의 특정 시점에서 사용자와의 상호작용 또는 대화가 필요한 매체를 말한다.
(2) 대체 매체(equivalent media)란 영상매체의 음향정보를 캡션과 같이 시각적으로 보여주거나 영상의 기본적인 내용을 화면해설 형태로 제공하는 매체를 의미한다.
(3) 화면해설(audio descriptions)이란 영상의 광경, 동작, 비언어적 표현, 그래픽 등의 상태나 변화를 음향정보로 나타내거나 텍스트로 제공하여 필요한 설명을 제공하는 것을 의미한다.화면해설은 해당 이벤트와 동기 되어 진행되어야 한다.
(4) 캡션(Captions)이란 영상매체에 포함된 말, 음향 및 주변소리 등을 텍스트로 표현한 매체를 의미한다. 따라서 캡션은 영상매체의 진행에 따라 해당 이벤트와 동기되어야 한다.

나. 요구조건
(1) 음향 정보로부터 사용자가 충분한 정보를 얻을 수 없는 모든 영상매체는 캡션을 함께 제공해야 한다.
(2) 캡션은 영상매체나 음향매체와 동기 되어야 한다.
(3) 모든 생방송은 캡션을 실시간으로 제공해야 한다. 단 음성이 없는 음악 방송의 경우에는 예외로 한다.
(4) 콘텐츠는 사용자가 캡션과 영상정보를 동시에 접해야 그 내용을 이해할 수 있도록 구성되어서는 안 된다. 즉, 캡션과 영상정보는 서로 보완관계가 되지 않아야
한다.

다. 적용시 장점
(1) 청각장애인은 음향매체와 함께 제공되는 캡션을 통해 음성이나 음향 정보에 접근이 가능하게 된다. 또한, 캡션을 활용하면 해당 콘텐츠에 대한 인덱스를 작성
하거나 내용을 검색할 때에도 유용하게 사용될 수 있다.
(2) 장애인이 아닌 경우에도 영상매체와 함께 동기 되는 대체 매체가 제공되는 경우에 보다 편리하게 콘텐츠를 활용할 수 있다. 예를 들어 캡션은 소란한 환경이나
오디오 재생기능이 갖추어져 있지 않은 경우 유용하며, 외국어 습득과 같이 언어능력이나 읽기 능력을 높이는데 활용될 수 있다.
(3) 화면해설의 경우에는 화면을 보지 않더라도 중요한 정보를 음성으로 알 수 있게 해주므로 시각을 통해 사물을 인식하기 어려운 장애인의 경우에는 화면해설을
통해 화상정보를 인지할 수 있다. 그러나 화면해설은 필수사항으로 분류하지 않는다.

라. 적용 예
(1) 동영상 : 화면해설과 캡션 활용
예를 들어, 한 아이가 강아지를 자신의 침대로 오도록 과자를 늘어놓고는 강아지에게 웅얼거리며 무언가를 말하고 있는 장면을 가정한다면, 화면을 볼 수 없는 사람은 이 장면을 이해할 수 없다.따라서 이 경우에"이 아이가 계단으로부터 자기 침실에 이르는 계단마다 과자를 하나씩 늘어놓았다"라는 화면해설과"아이가 웅얼거린다"라는 캡션을 제공한다면 청각장애인이나 시각장애인 모두 그 내용을 정확히 이해할 수 있다.
(2) 뉴스 동영상 : 영상과 동기되는 캡션 제공
예를 들어, 홍수가 난 대도시의 광경을 기자가 설명하고 있다고 가정할 경우에 기자가 하는 말을 캡션으로 표시하면 청각장애인이 기자의 이야기를 인식할 수 있게 된다.
(3) 무언극 : 장면별로 장면소개 텍스트 제공
예를 들어, 사다리를 올라가는 무언극(팬터마임 : pantomime)의 한 장면을 애니메이션으로 구성하였을 경우에“사다리를 올라가는 장면”이라는 대체 텍스트를 애니메이션에 포함시키면 이로써 충분한 정보를 사용자에게 제공할 수 있다.

항목 1.3 (색상에 무관한 인식) 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.

가. 용어정리
(1) 고 대비(high contrast) 모드란 흑백과 같이 대비차가 매우 크도록 조정하여 화면에 표시하는 방식을 의미한다.

나. 요구사항
(1) 콘텐츠가 제공하는 텍스트나 그래픽 정보는 색상을 제거하더라도 그 내용을 인지할 수 있어야 한다.
(2) 웹 페이지에서 보여주는 정보와 배경색 간에는 충분히 대비가 되어야 한다. 특히 웹 페이지의 내용을 고 대비(high contrast) 모드로 표시했을 때에도 충분히
명암대비가 되도록 콘텐츠를 설계하여야 한다.

다. 적용시 장점
(1) 색상의 차이가 정보의 다름을 나타내지 않으므로 색각(색맹 또는 색약) 이상자의 경우에도 혼동을 일으킬 염려가 없게 된다.
(2) 도표 등의 경우에 사용하는 색상의 명암 대비가 충분하므로 약시자의 경우에도 도표를 정확히 인지할 수 있다.
(3) 고대비 모드를 사용할 수밖에 없는 사용자들도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있다.

라. 적용 예
(1) 그래프 및 차트 : 색깔보다는 무늬를 이용한 표현 권장
파이 차트, 막대그래프나 꺾은 선 그래프 등을 이용하여 정보를 표시하는 경우에 각각의 영역을 색깔로 구분하기보다는 여러 가지 무늬를 이용하여 표시하면 색상을 인식할 수 없는 사용자들,예를 들면 약시자나 색각이상자가 쉽게 이해할 수 있다.
(2) 중요한 항목 표시 : 색깔보다는 특수기호 사용 권장
예를 들어,가입자의 신상 정보를 입력하는 웹 페이지에서 필수항목을 색깔(예를들어 빨간색)을 사용하여 표시하는 경우에 이 색깔을 인지하지 못하는 색각 이상자의 경우에는 이 항목의 중요도를 인지할 수 없다.따라서 색깔 대신 특수 기호(예를 들어별표)를 이 항목에 추가하면 대부분의 사용자가 이 항목이 중요한 항목인지를 쉽게 인지할 수 있다.

지침 2 운용의 용이성 - 웹 콘텐츠에 포함된 모든 요소들의 기능은 누구나 쉽게 사용할 수 있어야 한다.

항목 2.1 (이미지 맵 기법 사용 제한) 이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하며 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.

가. 용어 정리
(1) 이미지 맵(image map)이란 이미지의 일부 영역에 링크를 두어 사용자에게 해당 정보를 제공할 수 있는 페이지로 이동하도록 만드는 프로그램 기법이다.
(2) 서버측 이미지 맵(server-side image map)이란 이미지 맵을 구현하는 프로그램이 서버측에 존재하여 사용자의 웹 브라우저가 이미지 맵 상의 어떤 그림 위에 마우스를 위치시키고 클릭하면 클라이언트가 마우스의 위치정보를 서버로 제공하고, 서버는 전달되어온 마우스의 위치에 해당하는 이미지 맵의 영역이 지시하는
링크로 이동한 결과를 클라이언트에 표시하는 방식의 프로그램 기법이다.
(3) 클라이언트측 이미지 맵(client-side image map)이란 HTML 태그를 이용하여 사용자의 브라우저에서 이미지 맵의 영역을 식별하여 직접 해당 영역이 지시하는
링크로 이동하도록 하는 프로그램 기법이다.

나. 요구조건
(1) 구성하려는 이미지 맵의 형태를 클라이언트측에서 기하학적으로 표현하기 어려운 경우가 아니면 서버측 이미지 맵을 사용하지 않는다.
(2) 서버측 이미지 맵 기법을 사용할 경우에는 이미지 맵의 영역에 대응하는 텍스트 링크를 별도로 제공해야 한다(항목 1.1 참조).
(3) 클라이언트측 이미지 맵을 사용할 경우에는 이미지 맵의 영역에 대한 충분한 대체 텍스트를 제공하여야 한다(항목 1.1 참조).

다. 적용시 장점
(1) 서버측 이미지 맵 방식에서 서버는 해당 영역에 대한 대체 텍스트를 사용자에게 제공하지 못하며,단지 컴퓨터 화면상에 표시할 뿐이다.따라서 이 항목을 적용
하면 대체 텍스트 링크가 없는 서버측 이미지 맵의 사용을 제한하므로 시각장애인의 접근성을 높일 수 있게 된다.
(2) 클라이언트측 이미지 맵을 사용하는 경우에도 영역을 표시하는 부분에 대체 텍스트를 함께 표시한다면 이미지 맵의 영역을 읽어주므로 시각장애인들이 이미지
맵의 어느 영역을 가리키고 있는지를 확인할 수 있다(항목 1.1 참조).

라. 적용 예
(1) 클라이언트측 이미지맵 : 대체 텍스트 지원
태그를 사용하여 클라이언트측 이미지 맵을 작성할 경우 대체 텍스트를 해당 영역에서 제공하여야 한다.
(2) 서버측 이미지맵 : 링크목록 제공
서버측 이미지 맵을 사용할 경우에는 대체 텍스트로 구성된 링크목록을 같은 페이지에 제공하면 시각장애인들이 텍스트 링크를 사용하여 필요한 작업을 할 수 있
다(항목 1.1 참조).

항목 2.2 (프레임의 사용 제한) 콘텐츠를 구성하는 프레임의 수는 최소한으로 하며, 프레임을 사용할 경우에는 프레임별로 제목을 붙여야 한다.

가. 용어 정리 : 없음

나. 요구조건
(1) 웹 콘텐츠에는 가급적 프레임을 사용하지 않아야 한다. 만일 프레임을 사용하는 경우에도 사용하는 프레임의 수를 최소한으로 줄여야 한다.
(2) 프레임을 사용할 경우에는 프레임 별로 서로 독특한(중복되지 않는) 제목을 부여하여 프레임을 식별할 수 있어야 한다.

다. 적용시 장점
(1) 화면을 볼 수 있는 사용자는 한 페이지를 여러 개의 영역으로 구분한 프레임을 볼 수 있다. 그러나 화면을 볼 수 없는 시각장애인에게 여러 개의 프레임으로 구성된 페이지는 모든 프레임의 내용을 인지하기 어렵다. 따라서 여러 개의 프레임으로 구성된 웹 페이지에서 각각의 프레임에 제목을 부여하면 활성화된 프레임
의 제목을 읽어주기 때문에 프레임간의 이동이 매우 편리하다.

라. 적용 예
(1) 프레임 : 프레임별 제목 부여
여러 개의 프레임으로 구성된 웹 콘텐츠에서 각각의 프레임에 제목을 부여할 수있다. 예를 들어, 두개의 프레임으로 구성된 웹 페이지의 경우에 각각의 프레임 제
목을 “순이”와 “철수”라고 명명한다면 현재 활성화된 프레임의 이름을 읽어 볼 수 있으므로 엉뚱한 프레임에서 작업하는 잘못을 방지할 수 있다.

항목 2.3 (깜박거리는 객체 사용 제한) 콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.

가. 용어 정리
(1) 스크립트(script)란 컴퓨터에 자동으로 처리를 실행하기 위한 명령을 나열한 파일로 일반적으로 텍스트 파일 형식으로 제공되는 것이다.

나. 요구조건
(1) 웹 콘텐츠에는 애니메이션 등과 같이 깜빡거리는 주파수의 범위가 3 Hz에서 49Hz 사이인 콘텐츠 요소들을 포함하지 않아야 한다.
(2) 만일 위의 (1)에서 명시한 요구조건을 만족할 수 없는 웹 콘텐츠는 깜빡거림이 있는 웹 페이지로 이동하기 전에 이 페이지에 깜빡거림이 있음을 사전에 사용자
에게 경고해주어야 한다. 또한, 스크린의 깜빡거림이 배제된 대체 페이지를 별도로 제공하여야 한다(항목 1.1 참조).

다. 적용시 장점
(1) 광과민성 발작 증세를 지닌 사람들은 빛이 깜빡거리는 것에 반응하여 발작을 일으킨다. 특히 3Hz에서 49 Hz의 사이의 깜빡거림은 발작을 일으키는 원인이 되
며, 20Hz 부근이 발작을 가장 잘 일으키는 주파수이다. 따라서 요구조건 (1)을만족하는 콘텐츠의 경우에는 광과민성 발작중세가 있는 사용자도 접근이 가능하
다.
(2) 정신이 산만한 사람의 경우에는 계속적인 깜빡거림이 있는 콘텐츠를 집중하여 응시할 수 없으므로 이 요구조건을 만족하는 콘텐츠는 정신이 산만한 사람도 접
근이 가능하다.

라. 적용 예
(1) 첫 페이지 구성 : 깜박거리는 개체 배제
웹사이트에 처음 접속했을 때에 스크린에 나타나는 첫 페이지에는 최소한 깜빡거림이 없도록 콘텐츠를 구성하며, 만일 다음 페이지에 깜빡거림이 있는 콘텐츠가
포함되어 있을 경우에는 경고문을 첫 페이지에 표시하고, 깜빡거리는 콘텐츠를 제거한 대체 페이지와 이 페이지로 이동하는 링크를 제공하도록 구성한다.
(2) 스크립트 사용 : 스크립트 동작하지 않도록 설정
스크립트를 이용하여 깜빡이는 텍스트(blinking text)를 구성하면 스크립트가 동작하지 않도록 함으로써 깜빡임을 제거할 수 있다.
(3) 프로그래밍 기법 : 객체를 깜박거리게 하는 태그 사용 배제
또는 태그는 사용하지 않는다.

항목 2.4. (키보드로만 운용 가능) 키보드(또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.

가. 용어정리
(1) 키보드 인터페이스란 키보드 또는 특수한 입력장치로부터 응용프로그램이 필요한 모든 정보를 입력받도록 하는 장치를 의미한다.
(2) 포인팅 디바이스(pointing device)란 마우스나 터치패드와 같이 컴퓨터 화면의 특정한 부위를 직접 지정할 수 있는 장치를 의미한다.
(3) 음성 입력 장치란 음성으로 컴퓨터를 제어할 수 있도록 구성한 시스템 또는 시스템을 구성하도록 하는 프로그램을 의미한다.

나. 요구조건
(1) 웹 콘텐츠는 키보드 또는 장애를 극복하도록 도와주는 여러 가지 입력 장치를 사용하는 경우에도 콘텐츠가 제공하는 모든 기능을 사용할 수 있어야 한다.

다. 적용시 장점
(1) 포인팅 디바이스(pointing device)를 사용할 수 없는 시각장애인들도 웹 콘텐츠나 웹사이트 기능을 키보드만으로 사용할 수 있다.
(2) 키보드 또는 키보드 인터페이스를 사용할 수 없는 지체장애인의 경우에는 키보드 대신 음성 입력 장치를 이용하여 웹 콘텐츠에 접근할 수 있다.

라. 적용 예
(1) 이벤트 발생 방법 : 다양한 입력장치 사용 가능
웹 콘텐츠에서는 포커스인(focus-in), 포커스 아웃(focus-out), 그리고 활성화(activation)의 세 가지 이벤트가 주로 사용된다. 또한, 이들 이벤트는 포인팅 디바
이스(예를 들어 마우스), 키보드, 음성 입력 시스템과 같은 다양한 입력 디바이스로 제어가 가능하다.
(2) 콘텐츠의 제어 : 키보드 또는 키보드 인터페이스 사용 가능 콘텐츠를 구성하는 모든 링크와 데이터 개체의 실행과 선택은 키보드 또는 키보드 인터페이스를 사용하여 수행할 수 있도록 구성한다. 예를 들어, 웹 페이지를 구성하는 콘텐츠 요소들 간의 이동은 탭(tab)키를 사용하여 가능하도록 구성한다.

항목 2.5 (반복 네비게이션 링크(repetitive navigation link)) 웹 콘텐츠는 반복적인네비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도
록 구성하여야 한다.

가. 용어 정리
① 반복적 네비게이션 링크(repetitive navigation link)란 여러 개의 네비게이션 링크들이 연속적으로 나열되어 있는 링크 개체를 의미한다. 스크린 리더는 반복적 네비게이션 링크 개체를 구성하는 모든 링크들을 순서대로 읽어주므로 콘텐츠의 핵심 부분으로 이동하기 위해서는 모든 링크를 읽어주는 시간이 필요하게 된다.

나. 요구조건
(1) 웹 콘텐츠 상에 반복적 네비게이션 링크 개체가 포함되어 있으며 이 링크 객체가 콘텐츠의 핵심부분보다 먼저 읽어주도록 구성된 경우에 이들 링크들의 읽기
를 생략하고 직접 콘텐츠의 메인 부분으로 직접 이동할 수 있는 링크를 제공하여야 한다.
(2) 하나의 긴 문장으로 구성된 웹 페이지는 이 페이지의 문장을 여러 개의 논리적인 절로 구분하고 각 절의 색인을 콘텐츠의 첫 부분에 포함시켜 원하는 절의 시작 부분으로 직접 이동할 수 있도록 웹 페이지를 구성한다.
(3) 모든 웹사이트는 텍스트 또는 대체 텍스트가 포함된 텍스트 아닌 콘텐츠로 구성된 사이트 맵을 제공하여야 한다.

다. 적용시 장점
(1) 이 항목을 만족하는 경우 페이지의 상단이나 좌측 프레임에 반복적 네비게이션 링크개체가 포함되어 있다면 스크린 리더 사용자는 이들 링크 목록을 순서대로읽어준 후에야 필요한 부분을 읽어주므로 매우 지루한 과정이 요구된다. 그러나 이 페이지의 처음에 핵심 부분으로 이동할 수 있는 링크를 제공하면 빠르게 필요한 위치로 이동할 수 있다.
(2) 하나의 긴 문장으로 구성된 콘텐츠 중에서 사용자가 원하는 부분을 찾기 위해서는 처음부터 모두 읽어야 함으로 필요한 부분을 찾는 것은 매우 지루한 일이다.
따라서 문장의 시작 부분에 색인을 제공하여 필요한 부분으로 직접 이동하도록 하는 것은 매우 편리한 기능이다.
(3) 사이트 맵을 제공하면 사용자는 이를 이용하여 필요한 정보가 위치한 페이지로 직접 이동할 수 있다.

라. 적용 예
(1) 메인 콘텐츠로의 직접 이동 : 프레임과 링크 사용 예
만일 웹 콘텐츠를 두 개의 프레임으로 구분하고 왼쪽 프레임을 반복적 네비게이션 링크용 프레임으로, 오른쪽 프레임을 메인 콘텐츠를 제공하도록 구성할 경우를 생각해 보자. 스크린 리더는 왼쪽의 반복적 네비게이션 링크 프레임의 내용을 모두 읽은 후에야 비로소 중앙의 메인 콘텐츠를 읽어주게 된다. 따라서 왼쪽 프레임에 있는 모든 반복적 네비게이션 링크들을 우회하여 직접 메인 콘텐츠로 이동하는 버튼을 두고, 이 버튼에 “메인 콘텐츠로 이동”이라고 레이블을 붙인다면 반복적 네비게이션 링크 개체 모두를 읽지 않고도 메인 콘텐츠 부분으로 직접 이동이 가능하게 된다.
(2) 문서 목차 : 긴 문서의 탐색용이하나의 긴 문서로 구성된 웹 콘텐츠의 시작부분에 이 문서의 목차와 해당 위치로 직접 이동할 수 있는 링크를 제공하고,문서가 나누어지는 부분에 문서의 처음,다음 절, 목차 등으로 이동할 수 있는 링크를 두면 문서를 탐색하는데 매우 편리하다.
(3) 웹사이트 : 사이트 맵의 운영
웹 콘텐츠의 첫 페이지에 사이트 맵으로 이동하는 링크를 제공하면 모든 페이지를 열람하지 않고도 필요한 웹 페이지로 직접 이동이 가능하다.

항목 2.6 (반응시간의 조절기능) 실시간 이벤트나 제한된 시간에 수행하여야 하는 활동등은 사용자가 시간에 구애받지 않고 읽거나, 상호작용을 하거나 응답할 수 있어야 한다.

가. 용어정리
(1) 실시간 이벤트(real-time event)란 콘텐츠의 저자가 시간을 통제할 수 없는 실시간 상황에 벌어지는 이벤트를 의미한다.
(2) 정해진 시간 내에 응답이 필요한 콘텐츠들은 다음과 같다.
(가) 자동적으로 갱신되도록 구성된 콘텐츠
(나) 몇 초 후에 다른 페이지로 이동하도록 구성된 콘텐츠
(다) 깜빡이는 텍스트나 스스로 스크롤 하도록 구성된 텍스트
(라) 짧은 기간 동안 나타났다 일정시간 후에 사라지는 대화창
(마) 일정시간 동안 사용하지 않으면 페이지에 대한 접근이 강제 차단되거나 사용 할 수 없게 되는 콘텐츠
(3) 팝업(Pop-Up) 창이란 활성화되어 있는 웹 브라우저에 담긴 콘텐츠가 어떤 동작에 의하여 또는 자동으로 새로 열린 웹 브라우저 창을 의미한다. 그러나 운영체 제가 표시하는 메시지 창은 팝업 창으로 분류하지 않는다.

나. 요구조건
(1) 웹 콘텐츠의 시간 제약 조건이 최소한 아래의 항목 중 하나는 만족하여야 한다.
(가) 사용자가 시간제한 기능을 동작하지 않도록 할 수 있거나,
(나) 일반적으로 사람들이 선호하는 시간의 10배 이상으로 제한 시간을 늘릴 수 있거나,
(다) 주어진 시간이 종료하기 전에 경고를 발하며, 제한 시간을 늘리기 위하여 최소 한 10초 이상 시간이 주어질 수 있어야 한다.
(2) 그러나 아래의 항목은 예외로 하되, 시간제약이 있음을 이 페이지에서 분명하게 알려 주어야 한다.
(가) 경매 등과 같이 시간 제약이 있으나 다른 대안이 없는 경우거나,
(나) 실시간 게임이나 시간이 정해진 범위에서 작업해야 하는 테스트 등과 같이 시간 제약이 필수적인 경우
(3) 팝업(Pop-Up) 창은 가급적 사용을 피해야 한다. 그러나 꼭 사용해야 하는 경우에는 팝업 창이 열리기 전에 사용자에게 경고를 할 수 있어야 한다. 또한 팝업창이 열리더라도 포커스가 새로 열린 팝업 창으로 이동해서는 안 된다.

다. 적용시 장점
(1) 독서 장애, 인지 장애, 학습 장애를 지닌 사람들은 기록된 문서를 읽고 이해하는 데에 대부분의 사람들보다 더 많은 시간을 필요로 하는 경우가 종종 발생한다.
(2) 지체장애인들은 이동 객체에 대해 반응할 만큼 빠르게 동작하거나 정확하게 움직일 수 없다.
(3) 자주 갱신되는 콘텐츠에서 보조 기술이나 음성 브라우저 등이 정해진 시간 내에 이 콘텐츠를 읽거나 처리하는 것이 곤란한 경우에 시간 제약에 구애받지 않도록 할 필요가 있다.
(4) 팝업 창을 사용하면 시각장애인의 경우에 새로운 창의 열고 닫힘을 잘 알 수 없으므로 매우 불편하다. 그러나 부득이해서 팝업 창을 사용해야만 하는 경우에는 창이 열리기 전에 사용자에게 이를 알려주어 시각장애인들이 팝업 창이 열린다는 것을 사전이 인지하도록 하는 것이 좋다.

라. 적용 예
(1) 시간제약이 없는 콘텐츠 구성
웹 콘텐츠를 구성할 경우에 시간제한을 두지 않도록 한다.
(2) 시간제한이 있는 콘텐츠 구성
시간제한을 둘 경우에는 이러한 사항을 사용자가 충분히 알 수 있도록 공지하도록 한다. 이를 위하여 경과시간과 남은 시간을 화면에 표시하거나 그 값을 스크린리더로 사용자에게 알려줄 수 있다.

지침 3. 이해의 용이성 - 사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.

항목 3.1 (데이터 테이블 구성) 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

가. 용어 정리
(1) 데이터 테이블(data table)이란 테이블을 구성하는 데이터간의 논리적 관계를 표현하기 위하여 사용하는 형태이다.

나. 요구 조건
(1) 데이터 테이블은 테이블의 제목이나 테이블의 내용을 요약하여 제공해야 한다(항목 1.1 참조).
(2) 데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성하여야 한다.

다. 적용시 장점
(1) 데이터 테이블을 요구 조건에 맞추어 제작한 경우에는 임의의 데이터 셀에 대응되는 모든 헤더 값을 알 수 있다.

라. 적용 예
(1) 간단한 데이터 테이블 구성
HTML을 이용하여 간단한 데이터 테이블을 구성하는 경우에 데이터 셀과 헤더는 각각
와 태그를 사용하여 테이블을 구성한다.
(2) 복잡한 데이터 테이블 구성
HTML에서 행을 그룹화 하는데 THEAD, TFOOT, TBODY 등의 속성을 사용하고, 열을 그룹화 하는 데는 COL, COLGROUP 등의 속성을 사용한다. 보다 복잡한 테이블의 구성을 위해서는 “axis", "scope", "headers"등의 속성을 이용한다.
(3) 데이터 테이블 설명
HTML 4.01에 따라 데이터 테이블을 구성하는 경우에 테이블에 대한 설명은 태그를 사용하여 표시할 수 있다. 또한

태그를 사용하여 테이블의 간단한 제목을 표시할 수도 있다. 태그를 사용해도 동일한 효과를 얻을 수 있다. 즉, 데이터 테이블의 제목(title)은 도표의 첫 부분(상단 처음)에 오도록 하여 이어지는 자료가 데이터 테이블임을 알도록 하면 편리하다.

항목 3.2 (논리적 구성) 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야한다.

가. 용어정리
(1) 배치용 테이블(layout table)이란 데이터 테이블과는 달리 문서의 모양을 만들기 위한 목적으로 사용하는 테이블이다.
(2) 스타일 시트(style sheet)란 문서의 표현 형태를 규정하는 일련의 명령문을 의미한다. 스타일 시트는 콘텐츠 제공자가 마련한 것,사용자가 마련한 것, 웹 브라우저에 내장된 형태 등의 세 가지 경우가 있다. CSS(Cascading Style Sheets)레벨2가 스타일 시트의 대표적인 규정이다.

나. 요구사항
(1) 문서의 모양이나 콘텐츠의 배치를 위해서는 스타일 시트(style sheet)를 사용하여야 한다.
(2) 배치용 테이블을 사용하여 콘텐츠의 모양이나 배치를 할 경우에는 테이블을 구성하는 모든 셀들을 왼쪽상단에서 오른쪽 하단에 이르는 순서대로 늘어놓았을때에도 그 내용을 충분히 이해할 수 있도록 구성해야 한다.

다. 적용시 장점
(1) 논리적으로 구성된 웹 콘텐츠는 스타일 시트(style sheet)를 바꾸거나 기능을 제거하더라도 그 내용을 순서대로 읽을 수 있으므로 문서의 의미를 이해하는데 어려움이 없다.
(2) 배치용 테이블은 종종 일정한 형태를 표현하기 위하여 사용된다. 이 경우에도 스크린 리더로 읽어주는 내용의 순서가 화면에 나타난 콘텐츠의 읽는 순서와 같아지게 된다.

라. 적용 예
(1) 배치용 테이블 : 배치용 테이블은 캡션(CAPTION)이나 타이틀(TITLE) 태그를 사용하지 않는다.
(2) 스타일 시트 : 스타일 시트를 사용하여 콘텐츠의 모양이나 배치를 구성할 경우에는 스타일 시트 기능을 제거하거나 다른 스타일 시트를 사용하더라도 그 내용을 이해하기 쉽게 콘텐츠를 구성하여야 한다.

항목 3.3 (온라인 서식 구성) 온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.

가. 용어 정리
(1) 온라인 서식(on-line form)이란 웹 브라우저 상에서 작성하여 제출하도록 제공되는 양식을 의미한다.
(2) 애플릿(applet)이란 웹 페이지에 삽입되는 프로그램을 의미한다.
(3) 플러그인(plug-in)이란 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.

나. 요구 조건
(1) 온라인 서식을 구성하는 모든 서식 제어 요소, 예를 들면, 편집 상자(edit box), 라디오 버튼(radio button), 체크 박스(check box) 등은 레이블과 해당 서식 제어 요소간의 표시 순서가 일정하여야 한다.
(2) 탭(tab)키를 이용하여 서식 제어 요소 간을 이동할 경우에 그 순서가 왼쪽 위에서 오른쪽 아래 부분으로 순차적인 이동이 가능하여야 한다.
(3) 서식을 구성할 때에 보조기술을 사용하면 접근이 가능한 경우에만 스크립트, 애플릿,플러그인 또는 다른 프로그램 요소를 사용한다.만일 이것이 불가능할 경우에는 스크립트, 애플릿(applet), 플러그인(plug-in) 등 프로그램 요소의 기능을 정지시켜도 온라인 서식을 작성할 수 있어야 한다(항목 4.1 참조).

다. 적용시 장점
(1) 요구조건을 만족하는 경우에는 온라인 양식을 작성함에 있어서 모든 서식 제어요소의 레이블과 서식 제어 요소간의 관계가 일관성을 가지게 되므로 사용자는 혼란을 피할 수 있게 된다.

라. 적용 예
(1) 편집 박스 프로그래밍 예 : 예를 들어, 레이블 다음에 편집 박스(edit box)가 위치하는 경우에는 다음과 같이 프로그래밍을 하면 된다.
이름:

이 경우에 커서가 편집 박스에 위치하면,스크린 리더는‘이름’이라고 읽어준다.
(2) 편집 박스의 기본값 제공 : 편집 박스는 기본값을 가능한 한 제공한다.
(3) 편집 박스 테이블 구성 : 편집 박스를 데이터 테이블 형태로 구성할 경우에는 편집 박스별로 테이블 헤더를 읽어주도록 구성한다.

지침4기술적 진보성-구성한 콘텐츠는 웹 브라우저의 종류, 버전 등에 관계없이 사용될 수 있어야 한다.

항목 4.1 (신기술의 사용) 스크립트,애플릿 또는 플러그 인(plug-in) 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의 내용을 사용자에게 전달해줄 수 있을 경우에만 사용하여야 한다.

가. 용어 정리
(1) 애플릿(Applet)이란 웹 페이지에 삽입되는 프로그램을 의미한다.
(2) 플러그인(plug-in)이란 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.

나. 요구 조건
(1) 콘텐츠를 나타내기(display) 위해 혹은 인터페이스 요소를 만들기 위해 스크립트 언어를 이용할 경우에는 스크립트에 의해 제공되는 중요한 정보는 최신의 보조기술을 이용해 읽을 수 있어야 한다. 만일 이것이 불가능할 경우에는 스크립트의 동작을 정지시켜도 웹 콘텐츠의 내용을 읽을 수 있어야 한다.
(2) 애플릿, 플러그인(plug-in) 혹은 다른 응용 프로그램을 이용하여 웹 콘텐츠를 구성하였을 때에는 이들 프로그램 요소에 의해 제공되는 중요한 정보는 보조기술을 이용해 읽을 수 있어야 한다. 만일 이것이 불가능할 경우에는 이들 프로그램 요소의 동작을 정지시켜도 웹 콘텐츠의 내용을 읽을 수 있어야 한다.
(3) 스크립트, 애플릿과 플러그인은 키보드 또는 대체 키보드 인터페이스를 이용하여 사용할 수 있어야 한다.

다. 적용시 장점
(1) 보조기술이 지원되는 경우가 아니면 애플릿, 플러그인, 스크립트 등의 프로그램 요소를 사용하지 않도록 제한하므로 장애인들이 이들 프로그램 요소에 의하여 접근이 차단되는 일을 방지할 수 있다. 만일 Javascript 기능을 지원하지 않는 웹사이트에서 Javascript 기능을 정지시켰을 때에도 사용자에게는 필요한 정보가 차단되지 않는다.

라. 적용 예
(1) 플래시(Flash)에 대한 대체 텍스트를 현재까지 개발된 스크린 리더가 읽을 수 없다면 플래시를 사용하지 않도록 한다.

항목 4.2 (별도 웹사이트 제공) 콘텐츠가 항목 1.1에서 4.1에 이르는 13개 검사 항목을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면 텍스트만의 콘텐츠를 제공하는 웹 페이지(또는 웹사이트)를 별도로 제공해야 한다.

가. 용어 정리
(1) 텍스트만의 콘텐츠(text-only contents)란 텍스트 아닌 콘텐츠가 포함되지 않고 텍스트로만 구성된 콘텐츠를 의미한다.

나. 요구 조건
(1) 가능한 보조기술 수준이 미흡하여 장애인이 접근 가능한 웹 콘텐츠를 제작할 수 없는 경우에는 텍스트로만 구성된 대체 페이지를 마련하고 기존의 웹 콘텐츠의 첫 페이지에 대체 페이지로 이동하는 링크를 제공하여야 한다.
(2) 제공하는 대체 페이지는 기존의 웹 콘텐츠가 포함한 정보나 기능을 모두 포함하여야 한다.
(3) 제공하는 대체 페이지는 기존의 웹 콘텐츠의 개정 주기에 맞추어 개정되어야 한다.

다. 적용시 장점
(1) 새로운 웹 콘텐츠 제작기술의 개발로 인하여 아무리 노력하여도 원래의 웹 콘텐츠에 포함된 일부 또는 모든 콘텐츠 요소들을 장애인의 접근이 가능한 콘텐츠로 수정할 수 없을 경우가 있다. 이 경우 대체 텍스트로 구성한 페이지를 별도로 구성하여 운영하면 장애인의 접근성이 충분히 지원된다.

라. 적용 예
(1) 한글97 문서 : 별도의 웹 페이지로 구성
한글97로 작성된 문서를 콘텐츠로 제공하는 사이트의 경우, 스크린 리더를 통하여 한글97 문서를 읽을 수 없다. 이 경우에 동일한 내용을 별도의 HTML 문서로 제작하여 링크한다면 이러한 문제점이 해소된다.

tag : 접근성, 웹접근성 지침, 실태조사

전자정부 웹 표준 준수지침(2008. 4)

2008-09-26T18:42:14Z

전자정부 웹 표준 준수지침

1) 내용의 문법 준수

㉮ 모든 웹 문서는 적절한 문서타입을 명시해야 한다.

㉯ 명시한 문서타입에 맞는 문법을 준수해야 한다.

㉰ 모든 페이지는 사용할 인코딩방식을 표기해야 한다.

2) 내용과 표현의 분리

㉮ 논리적인 마크업을 구성하여 구조적인 페이지를 만들어야 한다.

㉯ 사용된 스타일 언어는 표준적인 문법을 준수해야 한다.

3) 동작의 기술 중립성 보장

㉮ 스크립트의 비표준 확장 사용은 배제되어야 한다.

㉯ 스크립트 비 사용자를 위한 대체텍스트나 정보를 제공해야 한다.

4) 플러그인의 호환성

㉮ 플러그인은 다양한 웹 브라우저를 고려해야 한다.

5) 콘텐츠의 보편적 표현

㉮ 메뉴는 다양한 브라우저 사용자도 접근할 수 있어야 한다.

㉯ 다양한 인터페이스(입력기기)로 웹 사이트를 이용할 수 있어야 한다.

6) 운영체제 독립적인 콘텐츠 제공

㉮ 제공되는 미디어는 범용적인 포맷을 사용해야 한다.

7) 부가 기능의 호환성 확보

㉮ 인증기능은 다양한 브라우저에서 사용 가능해야 한다.

8) 다양한 프로그램 제공

㉮ 정보를 열람하는 기능은 다양한 브라우저에서 사용 가능해야 한다.

㉯ 별도의 다운로드가 필요한 프로그램은 윈도우, 리눅스, 맥킨토시 중 2개 이상의 운영체제를 지원해야 한다.

tag : 전자정부 웹 준수지침; •; •
운전 시간과 운동시간 비만의 상관관계표; • 열단위 구분을 위한 태그를 제공 *; • 제목셀과 내용셀의 구분을 위한 태그를 제공 *; • colspan, rowspan이 많이 사용되어 헤더구조가 복잡한 테이블의 경우 적절하게 사용; • 헤더의 긴 내용이 들어갈 경우 abbr 속성을 사용해 약어를 표시

퍼블리의 웹표준

2. 보편적설계(Universal Design)

신현석님, 현준호님 인터뷰

longdesc 와 D 링크 사용

form 마스터

본 페이지는 Form Element에 대한 HTML4 규격 한글 번역문이다.

1. 사전 선택 된(pre-selected) 선택 사항

2. LABEL 엘레멘트(element)

3. 폼에 구조 추가: FIELDSET와 LEGEND 엘레멘트

4. 엘레멘트에 초점(focus) 놓기

4.1 탭에 의한 항해(tabbing navigation)

4.2 접속키(access key)

5. 불활성(disabled)과 읽기 전용(read-only) 제어

5.1 불활성(disable) 제어(control)

5.2 읽기 전용(read-only) 제어(control)

6. 폼의 송신

6.1 폼의 송신(submit) 방법

6.2 성공적 제어

6.3 폼 데이터의 처리

일단계: 성공적 제어(successful control)를 인식한다.

이단계: 폼 데이터 세트를 만듬

삼단계: 폼 데이터 세트를 엔코딩

사단계: 엔코딩 된 폼 데이터 세트의 송신

6.4 폼의 컨텐트 타입(content type)

컨텐트 타입 "application/x-www-form-urlencoded"

컨텐트 타입 "multipart/form-data"

웹접근성 정책(초안)

서비스 안내

소개

화면낭독기 사용시 참고사항

웹접근성 향상을 위한 제안

사용자 의견 접수 현황 및 변경 사항

Daum 첫페이지 웹접근성 안내

서비스 안내

소개

화면낭독기 사용시 참고사항

웹접근성 향상을 위한 제안

사용자 의견 접수 현황 및 변경 사항

Daum의 아고라에 대한 의견

부터

을 사용한 의도를 모르겠다. 현재 문서에서

은 유일하게 사용되고 있으며, DAUM 로고 이미지와 연결되어 다음 첫페이지로 이동하기로 되어 있다. 궁금한 것은 굳이 다음 첫 페이지로 이동하기 위한 링크가

메뉴 안내

와

의 구별이 없다. 24시간 뉴스센터 다음에 있는 9개의 링크가 전부 한 그룹이 아닌지? 대안: - 기존의 문서 처음에 있는

과 문서의 끝 부분에 있는

을 삭제한다.- 메뉴 모음, 베스트 글목록 이라고 달린 Alt text를 아고라 핫채널, 아고라 베스트로 바꾼다.- 아고라 핫채널의 토론, 이야기, 즐보드, 청원에

를 적용한다.- 공지사항에

플래시 네비게이션의 웹 접근성 향상 방안

무차별적인 비표준 저가 홈페이지 대책은 없는가

데이터테이블 접근성 가이드라인

운전 시간과 운동시간 비만의 상관관계표

2007년 12월 전국장애인 현황

1. 정보화 사회와 정보취약계층

마크업의 기초 DTD

인터넷 웹 콘텐츠 접근성 지침(2005.12)

전자정부 웹 표준 준수지침(2008. 4)

3. 폼에 구조 추가: `FIELDSET`와 `LEGEND` 엘레멘트

의 구별이 없다. 24시간 뉴스센터 다음에 있는 9개의 링크가 전부 한 그룹이 아닌지?

대안:
- 기존의 문서 처음에 있는

을 삭제한다.
- 메뉴 모음, 베스트 글목록 이라고 달린 Alt text를 아고라 핫채널, 아고라 베스트로 바꾼다.
- 아고라 핫채널의 토론, 이야기, 즐보드, 청원에

를 적용한다.
- 공지사항에