웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UX Planner & Designer


웹을 통해 새로운 창조를 꿈꾸는 인간
Humans dreaming of new creation through the web
WEBDESK
Web Standard
HOME WEBDESK Web Standard
모바일 웹 접근성 지키기
Posted by kimdirector | 2009.09.12 | Hit : 1563
목록보기이전보기

모바일웹을 제작함에 있어 점점 더 중요한 이슈로 떠오르고 있는 웹접근성에 대한 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.
모바일 웹 접근성은 장애를 가지고 있는 사람을 포함한 모든 사람들이 모바일 기기로 웹을 이용할 수 있는 것을 의미한다.

결국, 모바일 웹에서 접근성을 보장한다는 것은 유선 웹에서 접근성을 보장하는 방법에 모바일 기기의 특수성을 조금만 고려하면 되는 셈이죠.

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

몇가지 예를 들어볼까요?

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

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

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

친절하게도, 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.표준에 맞지 않는 마크업
모바일 브라우저의 지원을 장담할 수 없어 콘텐츠가 바르게 표시될 수 없는 가능성이 있다.

용어정리
1.WCAG2.0 Web Contents Accessibility Guidelines2.0. 2008년 W3C에서 발표한 웹접근성 지침.
2.KWCAG1.0 Korean Web Contents Accessibility Guidelines 1.0. 한국형 웹 콘텐츠 접근성 지침.
3.MWBP1.0 Mobile Web Best Practices 1.0. 모바일 기기에서의 웹 콘텐츠 전달을 위한 모범 사례.

Posted by kimdirector | 2009.09.12 | Hit : 1563
Origin http://html.nhndesign.com/1998
Tags 모바일 마크업 웹 접근성
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=35

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Tags
브라우저 스마트폰 디자인 이미지 로고디자인 다운로드 Resource Website 브라우저 무료 메일폼 포트폴리오 글꼴 클라우드 kimdirector 솔루션 iPhone 소프트웨어 배경이미지 웹기획자 IA 자기계발 영향력 가이드 CIP 디지털 혁명 구글 사이트 취업 페이스북 웹 기획 악성코드 무료 CSS UI Kit 리소스 레지스트리 인터페이스 디자인 HTML5 포토샵CS6 모바일웹 SNS 모바일 아이콘 리더 네이티브앱 리더십 웹디자인 애플 웹표준 IT 윈도우폰7 PC 기획자 홈페이지 UX 디자이너 사용성 회사소개서 리소스 구글 라이브러리 JQuery 명언
Tags
Parallax 소통 로고 윈도우7 폰트 스타일 웹디자인 무료 소스 기술자 홈페이지 미래 글꼴 스토리두잉 태블릿 셔터스톡 html5 홈페이지 SNS 소프트웨어뱅크 워드 로고디자인 폰트 크롬 무료 디자인 정글 인터넷 facebook 사용자 애플리케이션 IT world 스토리 디자인 체크포인트 안드로이드 패러다임 HTML5 페이스북 디자인 브랜드 안드로이드 인포그래픽 쇼핑몰 프로젝트
Category Cloud
About us Review Portfolio Design Review 
Leaders Story Mobile UXD IT Information
Web Identity Everyday Story Mobile Life
Webdesign Report Web Standard Homepage Work
Web Plan Report Practical Use Tip Design Inspiration
Dowmload Review Recommend Site
Search
Contact us
Phone : 010-8555-0503
E-mail : kimdirector@gmail.com