웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Standard
HOME WEBDESK Web Standard
UX 디자이너들의 필수 용어 사전: Accessibility (접근성)
Posted by kimdirector | 2014.11.19 | Hit : 5926
UX 디자이너 Accessibility 접근성 바이널 X
목록보기이전보기

접근성이란?
접근성(Accessibility)이란 시설이나 교통, 제품, 서비스 권리, 정보통신망 등의 환경을 불편함 없이 얼마나 이용할 수 있는지를 나타내는 척도로, 장애인, 노인, 임산부와 같은 취약 계층들이 대중적으로 공개되는 대상에 대해 차별을 받지 않고 이용할 수 있는 권리를 의미합니다.
 
 
웹 접근성
웹 접근성은 이러한 접근성의 개념을 웹 환경에서 바라본 관점으로 모든 사람이 차별 받지 않고 웹 서비스를 이용할 수 있어야 하는 데 의미를 두고 있습니다. 월드와이드웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였습니다.
 


월드 와이드 웹 (World Wide Web)을 창시자 팀 버너스 리(Tim Berners-Lee)
<이미지 출처 : http://bit.ly/UasuZ4>
 
일반적으로 웹 접근성의 대상은 장애인이라고 생각하기 쉬우나, 일반 사람들도 특정한 상황에서(예: 주변이 시끄러울 때, 부상이나 수술로 인한 장애 등) 일시적인 장애를 겪게 됩니다. 결국 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 의미합니다. 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된 것을 예로 들 수 있습니다. 이러한 접근성의 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있습니다.
 
현재 웹 접근성 강화 지침 2.0의 내용은 4항의 원칙, 13가지 지침, 그리고 22개의 검사항목으로 구성되어 있으며 그 요약된 내용은 다음과 같습니다.
 
 
원칙 1. 인식의 용이성(Perceivable) :
모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
 
대체 텍스트 : 텍스트가 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다. (예: 회원가입 버튼, 로그인 버튼 등)

<이미지 출처 : http://bit.ly/1qCtO1l>

 
멀티미디어 대체 수단 : 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다. (자막, 원고 또는 수화 제공)


<이미지 출처 : http://bit.ly/1oCNEqS>
 
명료성 : 콘텐츠는 명확하게 전달되어야 한다.
(색, 모양, 크기, 위치, 소리 등에 관계없이 인식될 수 있어야 함. 텍스트 콘텐츠와 배경의 명도대비는 4:5:1 이상이어야 함. 자동으로 재생되는 배경음은 제어가 가능해야 함.)

 

 
 
원칙 2. 운용의 용이성(Operable):
사용자 인터페이스 구성 요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
 
키보드 접근성 : 콘텐츠는 키보드로 접근할 수 있어야 한다. (모든 기능은 키보드만으로 작동 및 접근이 가능해야 함)


<이미지 출처 :  http://bit.ly/WemccC>

 
충분한 시간 제공 : 콘텐츠를 읽고 사용하는데 충분한 시간을 제공해야 한다.
(시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 하며, 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함)




 
광과민성 발작 예방 : 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다.
(초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠 금지)


<이미지 출처: http://bit.ly/1oCOhR1 >
 
쉬운 내비게이션 : 콘텐츠는 쉽게 네비게이션할 수 있어야 한다.
(콘텐츠의 반복되는 영역은 건너뛸 수 있어야 함. 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공. 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공.)


<이미지 출처 : http://bit.ly/1qCuROY >
 
 
원칙 3. 이해의 용이성(Understandable) :
콘텐츠는 이해할 수 있어야 한다.
 
가독성 : 콘텐츠는 읽고 이해하기 쉬워야 한다. (주로 사용하는 언어를 명시)
예측 가능성 : 콘텐츠의 기능과 실행 결과는 예측 가능해야 한다. (사용자가 의도하지 않은 팝업창, 초점 변화 등은 금지)
콘텐츠의 논리성 : 콘텐츠는 논리적으로 구성해야 한다. (콘텐츠는 논리적인 순서로 제공하며 표는 이해하기 쉽게 구성)
입력 도움 : 입력 오류를 방지하거나 정정할 수 있어야 한다.
(예: 회원가입 시 아이디를 입력 안 했을 경우, “아이디를 입력하세요” 알림창)


<이미지 출처 : http://bit.ly/1kK9Uj3>
 
 
원칙 4. 견고성(Robust) :
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

문법 준수 : 웹 콘텐츠는 프로그래밍 언어(마크업 언어)의 문법을 준수해야 한다.
 
웹 애플리케이션 접근성 : 웹 애플리케이션은 접근성이 있어야 한다.
(예: 플래시 가능할 때, 플래시가 불가능할 때를 선택할 수 있게 제공)


<이미지 출처 : http://bit.ly/1zEdzqz >
 

 
모바일 접근성
 
IT의 트렌드의 주도가 PC에서 스마트폰으로 넘어오면서 모바일에서의 접근성 개념이 이슈가 되고 있습니다. 국내 스마트폰 이용자 수가 3600만명을 넘어서면서 모바일 기기 중심의 정보 이용이 급증하는 반면 정보취약계층의 모바일 정보 접근은 어려운 현실이기 때문입니다. 앞으로 IoT의 발전과 함께 모바일 기기들을 통한 정보 접근이 더욱 많아질 것이기 때문에 모바일 접근성이 더욱 중요해지고 있습니다.


 
모바일은 특성상 웹 환경보다 보조기기를 더 많이 활용할 수 있고, 들고 다닌다는 차이점이 있을 뿐 모바일의 접근성도 웹의 접근성 개념과 크게 다르지 않습니다. 사람이 기기를 조작하고 정보를 얻는 행위에서 발생하는 불편함은 근본적으로 비슷하기 때문입니다.
 
모바일 접근성은 모바일 디바이스(스마트폰, 스마트 태블릿PC 등), 모바일 웹 및 애플리케이션(모바일에서 사용하는 콘텐츠의 접근성), 그리고 모바일 어시스티브 테크놀로지(Assistive Technology - 모바일 디바이스의 이용 편의를 위한 보조 기술)를 모두 포함합니다. 즉, 모바일 디바이스와 모바일에서 작동하는 웹과 애플리케이션 모두 접근성을 준수할 환경이 되어야 하며, 모바일 디바이스와 연동되어 사용자의 편의를 제공하는 어시스티브 테크놀로지 또한 모바일의 접근성의 대상입니다.
 
행정안전부에서는 모바일 애플리케이션의 접근성을 준수사항과 권고사항으로 분류하여 다음과 같이 명시하고 있습니다.
 
모바일 애플리케이션 접근성 준수 지침 [필수사항]
 
대체텍스트 제공​
텍스트가 아닌 콘텐츠의 정보나 의미를 화면낭독 기능이나 프로그램을 통해 동등하게 인식할 수 있도록 대체 텍스트를 제공하여야 합니다.
iOS의 경우 Interface Builder나 UI Accessibility API를 활용하여 label 속성에 대체 텍스트를 제공할 수 있습니다. 안드로이드의 경우 XML을 활용하거나, Java code등을 활용하여 제공 가능합니다.
 
초점제공
초점(Focus)이 적용된 선택된 객체만 화면낭독 프로그램이 읽어줄 수 있기 때문에 모든 의미 있는 객체에는 초점을 제공하여야 하며 그 이동순서는 순차적이어야 합니다.
Accessibility 속성(iOS) 및 focusable 속성(안드로이드)등을 활성화함으로써 초점을 제공할 수 있습니다.
 
운영체제 접근성 기능 지원
모바일 보조기기 등과의 호환을 위해 모바일 운영체제가 제공하는 접근성 기능 및 속성을 활용해야 합니다.
ex) iOS에서 제공하는 UI Accessibility 속성 - Label, Traits, Hint, Frame, Value
 
누르기 동작 지원
모든 컨트롤은 누르기 동작으로 제어할 수 있도록 구현해야 합니다. 다중누르기, 슬라이드, 끌기와 놓기 등의 복잡한 누르기 동작도 단순한 누르기 동작으로 대체할 수 있도록 방법을 제공해야 합니다.
 
색에 무관한 인식
색각이상자도 색상을 배제하더라도 정보에 동등하게 접근할 수 있도록 무늬, 패턴 등을 함께 제공해야 합니다.
 
명도 대비
저시력자, 고령자 등을 위해 화면에 표시되는 모든 정보에 전경과 배경이 구분될 수 있도록 고대비를 제공해야 합니다.
 
자막 제공청각장애인의 정보 이용을 위해 음성제공 콘텐츠에는 동등한 자막이나, 원고 또는 수화를 제공해야 합니다. 또한 유의미한 음성정보 없이 영상정보만 제공되거나, 화면 내에 자막 등으로만 정보를 제공하는 경우 별도의 텍스트나 음성으로 해당정보를 제공하여야 합니다.

 
모바일 애플리케이션 접근성 준수 지침 [권고사항]
 
기본 사용자 인터페이스 컴포넌트
모바일 운영체제에서 제공하는 기본 사용자 인터페이스 컴포넌트(Native UI Component)를 최대한 이용하는 것이 바람직합니다.
 
컨트롤 간 충분한 간격
사용자 의도와 다른 컨트롤을 누르지 않도록 컨트롤 간 충분한 간격으로 배치하는 것이 바람직합니다.
 
알림기능
사용자에게 알림을 제공할 때에는 진동, 시각, 소리 등 최대한 다양한 방법으로 사용자가 선택할 수 있도록 제공하는 것이 바람직합니다.
 
범용 폰트 이용
사용자의 선호에 따라 폰트의 크기 조절, 확대 기능을 제공하거나 운영체제에서 제공하는 관련기능을 활용할 수 있는 방법을 제공하는 것이 바람직합니다.
 
사용자 인터페이스의 일관성
인터페이스 요소를 사용자가 다시 학습하지 않아도 되도록 일관성 있게 배치하는 것이 바람직합니다.
 
깜빡거림의 사용 제한
광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않는 것이 바람직합니다.
 
배경음 사용 금지
음성에 의존하는 시각장애인 등을 위해 자동으로 재생되는 배경음을 사용하지 않는 것이 바람직합니다.
 
장애인 사용자 평가
애플리케이션 개발 시 다양한 모바일 기기에서의 이용 가능여부를 점검해야 하며, 장애인 사용자를 대상으로 사용자 평가를 수행하는 것이 바람직합니다.
 
출처 :  행정안전부 홈페이지 http://www.mopas.go.kr
 
 
모두가 손쉽게 정보를 공유할 권리
 
접근성은 정보에 접근하는데 발생하는 모든 장애요소를 포함하고 있습니다. 특히 장애를 가진 사람들은 웹과 모바일의 발전으로 인해 사회적 활동이 가능하게 되었습니다. 하지만 디자이너들이 접근성의 주요 원칙들에 대해 모르거나 접근성의 중요성을 이해하지 못하면 많은 사람들이 웹이나 모바일로부터 정보를 사용할 권리를 누리지 못하게 됩니다.




 
접근성을 준수하지 않으면 웹이나 모바일의 사용이 불편해지기도 하지만 법적인 처벌을 받을 수도 있습니다. 웹 접근성 지침이 위반되는 경우 국가인권위원회에 문제제기를 하면 인권위에서 이를 심사하여 법무부에 보냅니다. 법무부에서는 시정조치를 내리고 이를 받고도 이행하지 않을 경우 3000만원 이하 벌금이나 3년이하 징역에 처하게 됩니다. 그 사례로, 2012년 11월 30일 시각장애인 10명이 웹사이트 이용에 차별을 받았다는 이유로 서울도시철도공사, 대한한공, 한전병원, 서울장애인종합복지관을 상대로 한 명당 500만원 상당의 손해배상청구소송을 제기했습니다. 모두가 손쉽게 정보를 공유할 권리를 위해 디자이너는 사회적 책임을 가지고 웹과 모바일, 그리고 미래에 접하게 될 또 다른 플랫폼에 대한 접근성에 대해 숙지하고 시행하기 위해 노력해야 합니다.
 
참고자료
Posted by kimdirector | 2014.11.19 | Hit : 5926
Origin http://blog.naver.com/PostView.nhn?blogId=vinylx&logNo=220061167451
Tags UX 디자이너 Accessibility 접근성 바이널 X
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=107

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
로고 자바스크립트 로고 에버노트 Draft 무료 스크롤 크롬 트위터 타이포그래피 디자인 메타포 제스처 솔루션 스마트폰 프로젝트 웹기획 디자인 Caliper 사업 기능성 삼성전자 UI 애플 안드로이드 모바일 레이아웃 성공 로고디자인 스마트폰 emeco LG전자 프로젝트 매니저 저작권 천안외국어대학 플래시 탐구 서비스 홈페이지 쇼핑몰