1. 웹 접근성이란?
1-1. 정의
웹 접근성(Web Accessibility)이란 장애인 고령자 등이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것입니다.
1-2. 필요성
웹은 기본적으로 모든 사람이 사용할 수 있도록 설계되어 있습니다. 웹이 이 설계 목표를 달성할 경우 다양한 범위의 청력, 움직임, 시력, 인지 능력을 가진 사람들이 접근할 수 있습니다. 현대 사회에서 웹은 교육, 고용, 정부, 전자상거래, 건강, 여가, 교통 등 삶의 필수적인 자원으로 활용되고 있습니다. 하지만 아직 많은 웹 사이트들이 웹 접근성을 고려하지 않음으로서 장애인과 고령자들의 인터넷 이용률이 비장애인에 비해 크게 낮은 실정입니다. 따라서 모든 사용자가 웹 사이트에서 제공하는 정보를 동등하게 이해하고 접근할 수 있도록 웹 접근성의 준수는 필수적입니다.
웹 접근성 보장은 법률에 명시된 의무사항입니다.
웹 접근성 보장은 과 「장애인 차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」과 「지능정보화기본법」 등 법률에 명시된 의무사항입니다. 특히 장애인차별금지법은 행위자에 대한 단계적 범위를 명확히 하였으며, 불이행 시 처벌 등이 구체적으로 성문화된 법입니다.
웹 접근성은 비장애인들에게도 필요합니다.
- 작은 화면을 가진 휴대전화, 스마트 워치, 스마트TV 등의 사용자.
- 나이가 들어감에 따라 몸의 기능이 쇠퇴한 사람.
- 일시적인 장애를 겪는 사람. 예) 팔이 부러지거나 안경을 잃어버림.
- 현재 위치한 장소나 환경에서 제약이 있는 사람.
1-3. 준수 고려 사항
웹에 접근하는 데에 영향을 주는 장애를 고려해야 합니다.
- 시각 : 실명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애
- 이동성 : 근육 속도 저하, 근육 제어 손실로 손을 쓰기 어려운 상태
- 청각 : 영상 음성 콘텐츠를 대체 수단 없이는 인식할 수 없는 상태
- 인지 : 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 상태
2. 웹 콘텐츠 접근성 가이드라인 (WCAG)
아래 정보는 WCAG 2.1과 WCAG 2.0의 이해를 참고하여 웹 콘텐츠 접근성 지침에 대한 내용을 간단히 정리한 것입니다.
2-1. 인식의 용이성(Perceivable)
정보와 UI 요소는 사용자가 인지할 수 있는 방식으로 제공되어야 한다
대체 텍스트 제공하기
비텍스트 콘텐츠(차트 다이어그램, 오디오 녹음, 그림, 애니메이션 등)에는 대체 텍스트를 제공해 큰 활자나 점자, 음성, 기호, 더 간단한 언어 등 사람들이 필요로 하는 형태로 변환해야 한다.
시간 기반 미디어 대체 수단 제공하기
시간 기반 미디어(오디오 전용, 비디오 전용, 오디오-비디오, 상호 작용(interaction)과 결합한 오디오 및 비디오)가 전달하는 정보를 모든 사용자가 이해할 수 있게 한다.
적응 가능
정보나 구조를 헤치지 않고 다양한 방식으로(예를 들면 더 단순한 레이아웃으로) 표현할 수 있
는 콘텐츠를 제작해야 한다.
식별 가능
배경에서 전경을 분리하는 등 사용자가 좀 더 쉽게 콘텐츠를 보고 들을 수 있게 한다.
2-2. 운용의 용이성(Operable)
UI 요소와 탐색은 조작할 수 있어야 한다.
키보드 접근성
: 모든 기능을 키보드로 이용할 수 있게 하여 키보드 사용자뿐 아니라 음성 입력(음성으로 키보드 입력), 마우스(화상 키보드), 가상의 키 입력 기능을 지원하는 다양한 보조 기술로 기능을 이용할 수 있게 한다.
충분한 시간
사용자가 콘텐츠를 읽고 이용할 수 있도록 충분한 시간을 제공한다. 장애가 있는 사용자는 물리적으로 응답하거나 내용을 읽는 데 더 많은 시간이 걸릴 수 있다.
발작 및 신체적 반응
발작을 일으키는 것으로 알려져 있는 방식으로 콘텐츠를 디자인하지 않는다. (번쩍거림 등)
네비게이션 가능
사용자에게 네비게이션하고, 콘텐츠를 찾고, 현재 위치를 파악할 수 있는 방법을 제공해야 한다.
입력방식
사용자가 키보드 이외의 다양한 입력 장치를 통해 기능들을 보다 쉽게 조작할 수 있도록 해야 한다.
2-3. 이해의 용이성(Understandable)
정보와 UI 조작은 이해할 수 있어야 한다
가독성
텍스트 콘텐츠를 사용자와 보조 기술이 읽을 수 있게 하고 이를 이해하는 데 필요한 정보를 이용할 수 있게 보장한다.
예측 가능성
웹 페이지에서 웹 페이지로 콘텐츠를 예측 가능한 순서로 표현하고 기능적/대화형 컴포넌트의 동작을 예측할 수 있게 해서 장애가 있는 사용자를 돕게 한다.
입력지원
사용자가 실수를 피하고 바로잡을 수 있게 돕는다. 심각하거나 되돌릴 수 없는 오류의 발생 횟수를 줄이고 사용자가 오류를 알아차릴 가능성을 높이며 오류를 바로잡기 위해 사용자가 무엇을 해야 하는지 이해할 수 있게 도와준다.
2-4. 견고성(Robust)
콘텐츠는 보조 기술 등의 다양한 사용자 에이전트를 이용해 확실히 해석할 수 있을 정도로 충분히 견고해야 한다.
즉, 사용자는 기술의 발전에 관계없이 콘텐츠에 접근할 수 있어야 한다
호환성
보조 기술을 포함해, 현재와 미래의 사용자 에이전트와의 호환성을 극대화한다
4. WCAG 반영 예시
웹 접근성을 준수하여 제작되어졌다고 생각하는 서울교통공사의 홈페이지를 예시로 어떠한 부분에서 웹 접근성이 반영되었는지 알아보겠습니다.
우선, 서울 교통 공사 홈페이지는 적절한 대체 텍스트를 제공하고 있습니다.
위 이미지는 홈페이지의 '유실물 센터' 카테고리에 있는 유실물 처리 절차에 대한 이미지 입니다.
<img src="/images/public/p020101002.jpg" alt="※ 유실물 처리절차 안내입니다.
1-1. 역 (유실물등록, LOST112포털)
1-2. 유실자 연락
1-3. 본인인도
--- 익일 ---
2-1. 유실물센터 (7일간 보관)
2-1. 본인인도
--- 7일후 ---
3-1. 경찰서 (9개월 보관)
3-2. 본인인도
--- 9개월후 ---
4. 국가귀속" style="max-width:100%;width:100%">alt 태그를 통해 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공하고 있습니다.
또한 '안전동영상' 카테고리에 있는 비디오에서도 적절한 대체 텍스트를 제공하고 있습니다.
- 대체수단으로 멀티미디어 콘텐츠에 포함된 음성(대사)와 동등한 대본을 제공합니다.
- 또한 자동 재생이 금지 되도록 하였습니다.
데이터 테이블도 접근성을 높여 이해하기 쉽게 작성되어있는것을 확인할 수 있었습니다.
- 표의 내비게이션을 위하여 표의 셀은 제목 셀과 데이터 셀이 구분되도
록 구성하였습니다. 아래는 간단히 요약한 코드 입니다.
<tr>
<th scope="col" 종별></th>
</tr>
<tr>
<td>1단계</td>
</tr>- caption 태그를 통해 사용자에게 데이터 테이블에 대한 설명을 제공합니다.
<caption>
종별, 정기권 운임, 교통카드기준 운임, 비고(이용구간 초과시 추가차감 기준)를 제공하는
거리비례용 종별 운임 테이블입니다.
</caption>모든 기능을 키보드만으로도 사용할 수 있게 합니다.
Tab키를 사용하여 모든 콘텐츠에 접근할 수 있게 하며 관례에 따라 초점이 논리적으로 이동합니다.
페이지 전반적으로 프레임, 콘텐츠 블록에 적절한 제목을 제공합니다.
적절한 제목태그를 사용하여 해당 페이지를 간단 명료하게 설명한 제목을 제공합니다.
<h3 class="page-title">공공데이터개방</h3>5. 결론
서울 교통 공사 홈페이지를 선정하여 실제 사용되고 있는 서비스에서의 웹 접근성반영 요소를 찾아보면서 생각보다 더 섬세하고 꼼꼼하게 반영되어있다는 것을 알게 되었습니다. 위 예시 이외에도 더 많은 부분에 웹 접근성이 적용되어있었습니다. 추후 실제로 웹페이지를 제작할 때 웹 접근성 요소를 고려하여 코드를 작성할 수 있도록 더 공부해야겠다고 생각했습니다. 기존에 div사용을 남발하던 html작성 습관을 버리고 시멘틱 태그를 적극 사용하며 웹접근성에 대한 반영을 필수적으로 해야겠다고 다짐했습니다.
출처
https://www.w3.org/
https://www.w3.org/TR/WCAG21/
http://websoul.co.kr/
http://www.wa.or.kr/index.asp
한국형 웹 콘텐츠 접근성 지침 2.1
WCAG 2.0의 이해
서울교통공사
