매우 유익한 정보들이 가득한 웹접근성 (Web-Accessibility) 세미나가 4월 23일 코엑스 그랜드볼룸에서 있었습니다.
주요한 내용들을 요약하면서, 개발자의 입장에서의 생각을 곁들여 정리해 보았습니다.
저처럼 웹표준도 이제 겨우 적응하려 하는데 웹접근성란건 또 왜 튀어나와서 피곤하게 하지? 라고 생각했던 분도 계실거라 생각합니다.
하지만 조금더 생각해 보면 접근성이라는것은 반드시 지키고 고려해야 할 정말 중요한 이슈라는걸 느낄 수 있습니다.
전동휠체어에 앉아 입김작동 마우스 등 여러가지 AT(Assist Technologies) 를 통해 PC 와 인터넷을 이용하는 모습을 세미나에서 직접 보여준 서울대 이상묵 교수님 뿐만 아니라,
루게릭병으로 신체의 대부분이 마비되어 눈동자와 턱관절만을 가지고 AT 를 이용해서 PC 와 웹사이트를 이용하는 프랑스의 한 할머니의 모습이 담긴 동영상도 볼 수 있었습니다.
물론 이런 분들이 사용하는 AT 들은 접근성이 고려되서 디자인된 웹사이트가 아니라면 제대로 사용할 수 없습니다.
접근성이라는게 꼭 장애인들만을 고려하는건 아니지만 이러한 사례를 직접 보면 그 중요성에 대해 새삼 실감하게 됩니다.
우리나라에서도 올해 4.11 부터 시행된 “장애인 차별금지 및 권리구제 등에 관한 법률” 로써 그 당위성은 충분합니다.
영국 bbc 웹사이트에서 서비스하고 있는 “My Web My Way” 는 웹사이트를 누구나 쉽게 접근하고 사용할 수 있는 방법을 잘 설명해 주고 있으며, 웹접근성을 가장 잘 표현해주는 키워드 이기도 합니다.
가끔 잘 만들어진 시설이나 공원에서 길을 가다보면 누구나 쉽게 지나갈 수 있도록 계단도 있지만 그 옆에 경사로도 있는걸 볼 수 있죠.
이런것처럼 웹사이트에도 모든 사용자(어르신,어린이,장애인,왼손잡이 등) 혹은 모든 환경(핸드폰,PDA 등의 모바일기기, 마우스등 보조장치가 없을때, 어둡거나 시끄러울때, 흑백)에게도 정보에 접근할 수 있는 길을 선택할 수 있도록 여러갈래의 길을 열어두는 겁니다.
장애인의 경우 청각장애,지체장애,시력장애,지적장애 등 그 다양한 종류 때문에 고려해야할 부분이 많다는 점이 우리에게 조금은 어려움으로 다가 올 수도 있습니다. (하지만 해내야죠:))
장애인,노인 등 모든사람이 이용할 수 있고 (웹접근성에 준수하고), 손쉽고 편리하게 이용하며, 원하는 정보를 빨리 얻어낼 수 있는 웹사이트 를 만들어야 합니다.
한가지 주의해야 할점은 보여지는 디자인이나 다이내믹하고 화려한 효과의 UI 등에 치중한 나머지 정작 중요한 요소가 묻혀질 수 도 있다는 것입니다.
같은 웹사이트에서 일반사용자는 아름다운 이미지을 보고 있지만, 시각장애자는 스크린리더가 읽어주는 image098.jpg 를 듣게 됩니다.
인터넷은 정보의 바다입니다. 모습보다는 컨텐츠에 더 우선을 두어야 합니다. 여기에 미려한 디자인까지 곁들여진다면 “보기 좋은 떡” 이 되는 것이죠.
새로운 어플리케이션 플랫폼으로 각광 받고 있는 RIA 제품군도 접근성에 대한 노력이 활발합니다.
Microsoft Silverlight 2.0 Beta 부터는 UIA (User Interface Automation) 등을 통해 접근성에 대한 기술적인 지원이 가능해 집니다.
Adobe Flex 3 는 접근성 컴퍼넌트들을 지원하고, Adobe Flash CS3 역시 접근 가능성 패널을 두어서 마우스 없이 키보드만으로도 이용할 수 있도록(tab & reading order) 제작이 가능합니다.
환경부 웹사이트, 경상남도 의성군 웹사이트 가 웹접근성 구축 성공사례로 소개가 되었습니다.
두곳 모두 W3C 의 Markup Language 권고안(HTML 4.01 Transitional/XHTML-1.0-Strict DTD) 과 Style 권고안(CSS2), 그리고 웹접근성 지침(IWCAG/KWCAG) 에 정확히 준수하였습니다.
W3C 의 Markup Validator 와 CSS Validator 로 유효성을 체크하면서 웹표준 작업을 통해 다양한 OS,브라우저로부터의 접근성을 확보하여 어떤 환경에서도 동일하게 사용 가능한 기능을 갖추고 있습니다.
아래는 두사이트에서 소개한 내용들을 정리해 보았습니다.
onmouseover, onclick 등 마우스 이벤트만 고려된 UI 는 Accessible 하지 않습니다.
시각장애자들의 AT 인 Jaws 라는 스크린 리더를 직접 사용해 본다면 우리의 웹사이트들이 얼마나 심각한 수준으로 이기적인지 알 수 있습니다.
네비게이션의 역할하는 부분이나 양식을 입력받는 Form 등에서는 최소한 키보드 이벤트를 기본으로 디자인 해야 합니다.
웹접근성의 기술적인 부분은 약간의 시간과 노력을 투자한다면 어렵지 않게 구현할 수 있지만, 웹사이트의 기획단계에서 접근성에 대한 인식과 고려가 얼마나 잘되었는지가 더더욱 중요합니다.
Jobkorea.co.kr 의 경우 웹표준 작업을 통해서 장비의 비용 절감 효과를 크게 거두었다고 합니다. 이렇듯 웹표준은 비지니스적인 측면에서도 상당한 설득력이 있습니다.
웹접근성 준수에 있어서 기술적인 부분은 웹표준을 통해 상당부분 해결 된다고 봤을때, 장차법이라는 법적인 규제까지 그 의미를 더한다면 “must” 의 동기부여는 충분하다고 생각합니다.
다르게 생각하면 이런 접근성 때문에 Ajax 등의 신기술을 제대로 써먹지 못하고 방해가 된다고 생각할 수도 있겠지만,
신기술의 화려한 효과를 적절히 사용하면서 접근성과 잘 어우러지게 만드는것도 충분히 할 수 있습니다.
웹접근성 구축에 있어서 손발의 역할을 하는 개발자들도 중요하지만, 웹사이트의 정보를 보다 쉽게 전달해 주고자 하는 UI 등의 기획적인 부분을 담당하고 있는 분들이 더 중요합니다.
기획자들은 웹접근성을 고려해서 누구나 쉽게 정보를 전달받을 수 있도록 UI 를 설계해야하고, 웹퍼블리싱 등을 담당하는 개발자들은 이러한 기획안을 감수한 후에 기술적으로 웹접근성을 고려해서 제작하는 것이죠.
웹표준과 시맨틱 웹에 준수하면서 웹접근성까지 고려한 UI 의 디자인이라면 더할 나위 없이 좋은 웹사이트가 되겠죠.
단순히 저런게 있구나 가 아니라 반드시 실행에 옮겨야 한다는 전제로, 앞으로 우리가 준비해야 할 웹사이트 모습의 청사진을 그릴 수 있는 계기가 되었으면 합니다.
한국형 웹 콘텐츠 접근성 지침(KWCAG) 1.0
Korean Web Contents Accessibility Guideline 1.0
지침1. 인식의 용이성 - 웹사이트에서 서비스하고 있는 모든 콘텐츠는 누구나 쉽게 인식할 수 있도록 설계되어야 한다.
항목1.1 (텍스트 아닌 콘텐츠(non-text contents)의 인식) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.
항목1.2 (영상매체의 인식) 시간에 따라 변화하는 영상매체는 해당 콘텐츠와 동기되는 대체 매체를 제공해야 한다.
항목1.3 (색상에 무관한 인식) 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.
지침2. 운용의 용이성 - 웹 콘텐츠에 포함된 모든 요소들의 기능은 누구나 쉽게 사용할 수 있어야 한다.
항목2.1 (이미지 맵 기법 사용 제한) 이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하여 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.
항목2.2 (프레임의 사용 제한) 콘텐츠를 구성하는 프레임의 수는 최소한으로 하여, 프레임을 사용할 경우에는 프레임별로 제목을 붙여야 한다.
항목2.3 (깜박거리는 객체 사용 제한) 콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.
항목2.4 (키보드로만 운용 가능) 키보드 (또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.
항목2.5 (반복 내비게이션 링크(repetitive navigation link)) 웹 콘텐츠는 반복적인 네비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.
항목2.6 (반응시간의 조절기능) 실시간 이벤트나 제한된 시간에 수행하여야 하는 활동 등은 사용자가 시간에 구애 받지 않고 읽거나, 상호작용을 하거나 응답할 수 있어야 한다.
지침3. 이해의 용이성 - 사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.
항목3.1 (데이터 테이블 구성) 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.
항목3.2 (논리적 구성) 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.
항목3.3 (온라인 서식 구성) 온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.
지침4. 기술적 진보성 - 구성한 콘텐츠는 웹 브라우저의 종류, 버전 등에 관계없이 사용될 수 있어야 한다.
항목4.1 (신기술의 사용) 스크립트, 애플릿 또는 플러그 인(plug-in) 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의 내용을 사용자에게 전달해줄 수 있을 경우에만 사용하여야 한다.
항목4.2 (별도 웹사이트 제공) 콘텐츠가 항목 1.1에서 4.1에 이르는 13개 검사 항목을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면 텍스트만의 콘텐츠를 제공하는 웹 페이지(또는 웹사이트)를 별도로 제공해야 한다.
W3C 웹 콘텐츠 접근성 지침(WCAG) 1.0
Web Contents Accessibility Guideline 1.0
지침1. 콘텐츠의 시각적, 청각적 요소에 대하여 동일한 내용의 대체수단을 제공하라.
항목1.1 모든 비 텍스트 요소에 대하여 대체 텍스트를 제공하라.
항목1.2 서버측 이미지 맵의 활성화 영역에 대하여 부가적인 텍스트 링크를 제공하라.
항목1.3 멀티미디어의 시각적 요소에 대한 대체 텍스트를 사용자 도구(웹 브라우저, 스크린리더 등 사용자가 웹 서비스를 이용하기 위한 도구)가 자동으로 읽을 수 없다면, 이 내용의 중요한 정보를 음성으로 제공하라.
항목1.4 시간에 따라 내용이 변하는 멀티미디어와 이에 대한 대체 텍스트는 그 내용을 동기화시켜야 한다.
항목1.5 사용자 도구가 클라이언트측 이미지 맵의 각 활성화 영역 및 링크정보에 대하여 대체 텍스트를 인식하여 처리할 수 없다면, 동일한 내용에 대하여 부가적인 텍스트 링크를 제공하라.
지침2. 색상만을 이용하여 정보를 전달해선 안된다.
항목2.1 색상을 통해 전달하는 모든 정보는 색상 없이도 전달될 수 있어야 한다.
항목2.2 색맹, 색약인 사람이나, 흑백 모니터를 통해 보는 사람들도 정보전달 시 문제가 없도록 전경색과 배경색은 충분한 명암 대비를 가져야 한다.
지침3. 마크업과 스타일시트를 사용하되 적합하게 사용하라.
항목3.1 적절한 마크업 언어가 존재한다면 정보를 전달하기 위해 이미지보다 마크업을 사용하라.
항목3.2 공식 문법에 맞도록 문서를 작성하라.
항목3.3 시각적 요소를 컨트롤하기 위해서는 스타일시트를 사용하라.
항목3.4 마크업 언어 및 스타일시트의 속성값 부여시 절대단위보다는 상대단위를 사용하라.
항목3.5 문서의 구조를 전달하기 위해 헤더요소를 사용하되 정해진 방법에 맞게 사용한다.
항목3.6 리스트 및 리스트 요소 마크업들을 적합하게 사용하라.
항목3.7 인용 마크업을 사용하되 들여쓰기 효과 등을 위해 사용하지 않는다.
지침4. 사용언어를 명시하라.
항목4.1 문서의 텍스트 및 대체 텍스트의 언어의 변화에 대해 분명히 명시하라.
항목4.2 문서에서 약자, 약어 등이 쓰일 경우, 해당 약어가 처음 나타났을 때 이에 대한 전체 내용을 명시하라.
항목4.3 문서의 기본언어를 지정하라.
지침5. 호환성을 지니도록 테이블을 작성하라.
항목5.1 데이터 테이블에 있어 행과 열에 대한 헤더를 구분하라.
항목5.2 행 또는 열에 대하여 두 단계 이상의 논리적 헤더를 갖는 데이터 테이블은 데이터 셀들과 헤더 셀들을 연결시킬 수 있는 마크업을 사용하라.
항목5.3 레이아웃 테이블을 이용한 정보를 선형화시켰을 때 해당 내용이 제대로 전달되지 않는다면 레이아웃 테이블을 사용하지 않는다. 꼭 사용해야 한다면 해당 내용에 대한 대체 정보를 제공하라.
항목5.4 테이블이 레이아웃을 위해 사용되었다면, 이 테이블 작성 시 시각요소 컨트롤을 위해 문서의 구조에 관한 마크업을 사용하지 말아라.
항목5.5 테이블에 대한 요약정보를 제공하라.
항목5.6 헤더 레이블에 대한 요약을 제공하라.
지침6. 신기술을 사용한 페이지는 해당 내용에 대해 호환성을 확보해야 한다.
항목6.1 스타일시트를 사용하지 않아도 읽을 수 있도록 문서를 구성하라.
항목6.2 동적 콘텐츠에 변화가 있을 경우에는 해당 내용에 대한 대체 콘텐츠도 갱신시켜야 한다.
항목6.3 스크립트, 애플릿, 또는 다른 프로그램 객체들이 사용 중지되어 있거나 지원되지 않아도 페이지가 사용 가능해야 한다. 이것이 불가능할 경우에는 별도의 접근가능한 페이지를 통해 정보를 제공해야 한다.