널리

웹을 제작함에 있어 점점 더 중요한 이슈로 떠오르고 있는 웹접근성에 대한 W3C의 정의는 아래와 같습니다.

Web accessibility means that people with disabilities can use the Web.

우리팀이나 저의 경우는 몇가지 단어를 덧붙여 아래와 같은 정의를 내리고 있구요-

Web accessibility means that all people include with disabilities can use the Web.

그렇다면, 이번 포스팅에서 말하고자 하는 모바일 웹 접근성의 정의는 아마도 아래와 같을 수 있겠네요.

Mobile Web accessibility means that all people include with disabilities can use the Web through mobile device.
모바일 웹 접근성은 장애를 가지고 있는 사람을 포함한 모든 사람들이 모바일 기기로 웹을 이용할 수 있는 것을 의미한다.

결국, 모바일 웹에서 접근성을 보장한다는 것은 유선 웹에서 접근성을 보장하는 방법에 모바일 기기의 특수성을 조금만 고려하면 되는 셈이죠.
참 쉽져잉~ (개그우먼 박지선Ver.)

모바일 기기의 특수성을 고려한다는 것이 살짝 어렵게 느껴질 수도 있지만,
모바일 환경에서의 사용자 경험은 장애를 가진 사람들의 사용자 경험과 유사점을 많이 갖고 있으며, 실제로 중복되는 측면이 많습니다.

몇가지 예를 들어볼까요?

1. 출근중인 A, 휴대폰으로 웹에 접속하여 어제 중계된 야구경기의 하이라이트 영상을 봅니다. 사람이 북적거리는 지하철 안은 소음이 굉장히 많네요. 이어폰을 특별히 준비하지 않아 동영상 소리가 들리지 않습니다.
2. 장거리 여행중인 B, 모바일 폰으로 다음에 탈 버스를 예약하려고 하는데요, 키패드로 필요한 정보를 입력하는 것이 쉽지 않습니다.

첫번째 예는 청각이, 두번째는 손에 대한 운동능력이 저하되었을 때 겪는 어려움의 형태와 유사합니다.

결론적으로, 웹 접근성을 잘 보장하면 모바일 웹 접근성도 자연스럽게 제공될 수 있다는 것이죠-

웹 접근성을 보장하기 위한 가이드라인은 WCAG2.0¹⁾, KWCAG1.0²⁾ 등, 이미 많은 자료가 존재하고 있으며,
모바일 웹 제작 가이드인 MWBP1.0³⁾를 참고하면 모바일 웹 접근성을 보장하는 데 더 많은 도움이 될 것입니다.

친절하게도, WAI에서는 위에서 소개한 가이드라인을 토대로 모바일 웹 접근성을 제공하기 위한 방법을 더 간편하게 소개하고 있습니다.
원문보기

모바일 웹에서도 WCAG에서 제시하고 있는 네가지 지침(Perceivable, Operable, Understandable,Robust)은 동일하게 적용되는데요, 그 내용을 간략히 정리해보았습니다.
각 항목은 모바일 웹 접근성을 저해하는 요소와 그 이유를 제시하고 있습니다.
(원문을 제 임의대로 이해하여 정리한 것이니 다른 의견이 있으시면 말씀해주세요.)

Perceivable - 인식의 용이성

1. 색상만으로 정보 전달하기

   각 기기마다 동일한 컬러를 표현하지 못할 수도 있으며, 색상 표현 능력이 뛰어난 기기라도 밝은 곳에서는 잘 안보일 수 있다.

2. 큰 페이지, 큰 이미지

   모바일 기기의 스크린은 작기 때문에 큰 페이지를 스크롤링 하다 문맥을 혼동하기 쉽고, 너무 큰 이미지는 찌그러져 정보전달이 어렵다.

3. 캡션이 없는 동영상

   공공장소에서 매너모드로 설정을 해 놓거나, 시끄러운 곳에서 모바일 기기를 이용해야 할 경우, 음성정보를 놓칠 수 있다.

4. 경고, 에러메시지(얼럿창)를 텍스트가 아닌 음성형태(beep)로만 출력하는 경우

   잘못된 인터랙션을 알아차리지 못해 실수를 유발하게 된다.

5. 이미지, 동영상 등의 비문자 콘텐츠에 대체 택스트를 제공하지 않는 경우

   사용자의 모바일 인터넷 사용 환경에 따라 비문자 콘텐츠가 올바르게 표현되지 않을 수 있다. 비문자 형태로 꼭 제공되어야 할 경우, 중요한 정보에는 사용을 피해야한다.

6. 비어있는 인풋박스의 사용

   숫자만 입력해야 하는 인풋박스에 영문입력이 가능한 경우, 똑같은 과정(입력)을 여러번 반복해야 한다.

7. 테이블이나 CSS를 이용하여 콘텐츠의 순서를 구성하거나 정보를 전달하고자 할 경우

   테이블이나 CSS가 바르게 렌더링 되지 못하여 콘텐츠 배치가 올바르지 못할 수 있다.

Operable - 운용의 용이성

1. 마우스 의존적인 인터랙션과 네비게이션

   키패드나 터치스크린의 특성을 고려한 인터랙션과 네비게이팅도 가능해야한다.

2. 콘텐츠 이용에 있어 스크립트나 특정 플러그인이 요구될 경우

   모바일 기기에서 해당 기능이 꺼져있거나, 지원되지 않을 수 있다.

3. 페이지 타이틀이 빠져있거나 적절하지 않은 경우

   작은 스크린에서도 전체 페이지의 개요를 명확하게 이해할 수 있어야 한다.

4. 포커싱이 논리적인 순서대로 움직이지 않을 경우

   논리적인 순서대로 구성되어있지 않는 문서를 순차적으로 방문을 하다보면 전체 내용을 이해하는데 어려울 수 있다.

5. 링크에 충분한 설명이 없을 경우

   링크의 목적지를 예측하기가 어렵다.

Understandable - 이해의 용이성

1. 긴 단어, 복잡한 문장, 은어의 사용

   모바일 기기를 이용하는 환경(주변 잡음, 대화, 움직이는 사물)에 영향을 받아 간단명료하지 않은 표현은 문맥을 놓치게 할 수 있다.

2. 사용자에게 알림없는 화면 전환

   모바일 기기는 윈도우가 제한적이므로, 다중 창이 뜰 경우 정보가 제대로 표현되지 않을 수 있다.

3. 깜빡거리고, 움직이고, 자동으로 업데이트 되는 콘텐츠의 사용

   밝은곳에서 잘 보이지 않고 스크린이 작은 모바일 기기에서는 콘텐츠 이해가 어려울 수 있으며, 자동으로 새로고침이 될 경우, 사용자의 의지와 관계 없이 데이터 사용요금(다운로드에 대한)이 추가된다.

Robust - 기술의 진보성

1. 표준에 맞지 않는 마크업

   모바일 브라우저의 지원을 장담할 수 없어 콘텐츠가 바르게 표시될 수 없는 가능성이 있다.