모바일 UI 디자인 - 접근성Accessibility
UI/UX 디자이너를 위한 접근성 가이드
웹 접근성(Web Accessibility - 이하 접근성)은 내용이 방대하여 이해하기 어렵고 실무에 어떻게 반영해야 할지 막막했다. 이 글은 디자이너가 쉽게 이해하고 실무에 반영할 수 있는 모바일 UI 접근성 가이드를 목표로 한다.
- 모바일 웹/앱에 중점을 두고 작성했다.(데스크톱에 관한 내용은 생략됐거나 비중이 떨어진다)
접근성이란?
접근성이란 ‘모든 사용자가 신체적·환경적 조건에 관계없이 앱과 웹에 접근하여 사용하고 즐길 수 있도록 보장하는 것’이다.
2008년 4월 11일부터 시행된 「장애인 차별금지 및 권리구제 등에 관한 법률 」(이하 ‘장차법’) 제21조 및 동법 시행령 제14조에 의거하여 공공 및 민간 웹 사이트의 웹 접근성 준수가 의무화되었다.
접근성 원칙
접근성의 국제 기준은 WCAG (Web content accessibility guideline)이다. 이를 기반으로 한 "한국형 웹 콘텐츠 접근성 지침 2.1"에서 제시하는 4가지 핵심원리를 기준으로 접근성 원칙을 설명한다.
인식의 용이성(Perceivable)
모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
운용의 용이성(Operable)
사용자 인터페이스의 구성요소(이하 컴포넌트로 통일)를 조작 가능하고 내비게이션 할 수 있어야 한다.
이해의 용이성(Understandable)
콘텐츠는 이해할 수 있어야 한다.
견고성(Robust)
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
인식의 용이성
인식의 용이성은 사용자가 장애 유무 등에 관계없이 모바일 웹/앱에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미한다. 주로 저시력자나 시력이 없는 사용자를 대상으로 한다. 화면의 콘텐츠와 UI 컴포넌트(UI Compont) - 이하 컴포넌트 - 를 스크린 리더가 제대로 인식할 수 있도록 디자인 또는 개발하는 방법에 대해 다룬다.
Color and Contrast
색채 Color는 사용자에게 시선을 집중시키고 행동을 유도할 수 있다. 색에 의미를 부여하고 일관성 있게 적용하면 앱의 콘텐츠를 보고 해석하고 이해하는데 도움을 줄 수 있다.
색에 무관한 인식
색상 차이를 알 수 없는 색맹이거나 흑백 디스플레이 사용자의 경우 색상 만으로 콘텐츠를 구분할 수 없다. 색맹은 빨강과 녹색이 구별이 안 되는 적녹 생맹, 파란색과 노란색을 구분할 수 없는 청황 색맹이 있다.
색을 구분할 수 없거나 약시 사용자를 고려하여 적절한 색을 사용한다.
차트를 통해 정보를 전달할 때 색을 구분할 수 없는 사용자를 고려해서 디자인한다. 적록 색맹 시각자는 붉은색과 녹색을 구분할 수 없다.
색상 만을 단독으로 사용하여 정보를 전달할 경우 아래 예처럼 다른 정보로 색을 사용해도 인식 못하는 사용자가 있다. 모든 사용자가 동일한 정보를 얻을 수 있도록 라인 두께, 패턴, 형태, 텍스트 또는 그림 같은 여러 시각 신호를 함께 사용하는 것을 권장한다.
적록 색맹 시각자는 붉은색과 녹색의 차이를 인식하기 어렵다.색상 시뮬레이션은 아래 Figma, Sketch, Adobe XD 플러그인 Stark을 사용했다.
색상만으로 의미와 상황을 전달하지 말고 텍스트와 아이콘을 함께 사용한다.
텍스트 필드 오류 상태를 색상만으로 표시할 경우 색상을 인식할 수 없는 사용자가 알 수 없다. 위의 예시 같이 적록 색맹인 사용자는 붉은색이 황토색으로 보이기 때문에 오류 상태의 차이를 알 수 없다.
오류 등 시스템의 상태를 색상만으로 디자인하지 않아야 한다.컴포넌트의 상태를 색으로만 표현하지 않는다.
탭과 같은 컴포넌트의 선택과 활성화 표시를 색과 명도 대비만으로 표현하지 말고 테두리, 또는 구분선 등의 형태적 차이를 같이 활용하여 표현한다.
Tab의 활성 상태 표시를 색상만으로 디자인하면 저시력자의 경우 구분하기 어렵다.
명도 대비
명도 대비 Color Contrast는 접근성의 중요한 측면이다. 대비가 좋으면 고령자나 저시력 사용자들이 제품(모바일 웹/앱)을 더 쉽게 사용할 수 있다. 화면 반사가 많이 되는 야외와 어두운 밤 등 사용환경이 좋지 않을 때도 도움이 된다 높은 명도 대비는 강력한 시각적 계층 구조를 만들고 모든 사용자의 사용성을 향상한다.
다음에 설명되는 명도 대비 가이드는 WCAG 2.0에 설명된 접근성 표준을 기반으로 작성되었다.
충분한 명도 대비
저시력자, 고령자 등도 인식할 수 있도록 텍스트와 배경 간의 충분한 명도 대비는 4.5:1 이상이어야 한다.
텍스트와 배경색의 명도 대비는 WCAG 권장사항에 따라 다음과 같다.
텍스트 크기와 무게 명도 대비 상세
대비 비율은 텍스트의 글꼴 크기에 따라 다르다. 텍스트가 클수록 가독성이 좋아지고 색상이 대비될 필요가 적어진다. 텍스트 크기 외에 글꼴의 무게 - Regular와 Bold에 - 따라 명도 대비 요구사항이 다르다. Bold는 Regular보다 획의 두께가 더 두꺼워서 적은 대비로도 가독성이 떨어지지 않는다.
명도 대비 비율과 등급
WCAG(웹 콘텐츠 접근성 지침)을 바탕으로 Stark과 같은 명도 대비 분석도구(Color contrast analyzers)는 명도 대비를 비율(Ratio)과 등급(Score)으로 표현한다. 두 색상 간의 대비는 0 – 21 사이에 속한다. 순수한 검은색(#000000)과 순수한 횐색(#FFFFFF) 사이의 명도 대비는 21이다. 21–1 사이의 대비 비율을 AA와 AAA의 두 가지 적합성 수준으로 표시한다.
기술적으로 다음 4가지 등급으로 표시가 가능하다.
Fail
Fial는 텍스트의 명도 대비가 2.9 이하임을 의미한다 로고의 텍스트 및 기타 장식 요소에는 적용되지 않는다.
AA Large(AA+)
AA Large는 텍스트의 명도 대비가 3.0 이상임을 의미한다. 순수한 횐색(#FFFFFF) 배경에 #949494(회색) 텍스트 색 사용 정도의 수준이다. 경험적 증거에 기초한 표준 텍스트 및 정상 시력에 권장되는 최소 명도 대비이다. #949494 정도의 명도는 중요한 정보의 텍스트 색보다는 플레이스 홀더 텍스트 같은 보조적인 정보에 사용한다.
명도 대비 3.0 이상 예시AA
AA는 텍스트의 명도 대비가 4.5 이상임을 의미한다.
순수한 횐색(#FFFFFF) 배경에 #7777777 텍스트 색 사용 정도의 수준이다. 디자인 전반에 걸쳐 모든 텍스트 크기에 사용하기에 안전하다. 본문(Body)의 텍스트 컬러로 지정하는 정도의 명도이다.
명도 대비 4.5 이상 예시AAA
텍스트의 명도 대비가 7.0 이상임을 의미한다.
순수한 횐색(#FFFFFF) 배경에 #555555 텍스트 색 사용 정도의 수준이다.
명도 대비 7.0 이상 예시10 색상환 명도 대비 예시
위 등급을 기반으로 AA 즉 명도 대비 4.5 이하의 색은 사용자 인터페이스에서 중요한 요소의 텍스트에 사용하지 않아야 한다.
CAT버튼같이 중요한 요소의 대비는 최소 AA+ 3.0 이상이 되어야 한다.
브랜드 컬러를 기계적으로 적용하지 말고 UI의 색은 명도 대비를 고려하여 컬러를 조정해야 한다.
접근성을 고려하여 CTA버튼은 3.0 이상의 명도 대비를 가져야 한다.대체 텍스트 Accessibility text
텍스트와 상호작용 요소의 분리
텍스트 안에 링크나 버튼을 넣지 않아야 한다. 아래 예처럼 텍스트 안에 링크가 있는 경우 스크린 리더는 빠르게 텍스트를 읽어 나가기 때문에 화면의 레이아웃을 파악하기 힘든 시각장애인은 링크 위치를 알 수 없다. 텍스트와 상호작용이 가능한 요소는 분리하여 디자인해야 인식 가능하다.
왼쪽 예의 링크를 버튼 형태로 분리해서 디자인해야 한다.
텍스트 안에 버튼은 그렇게 좋은 해결책은 아니다.운용의 용이성
사용자가 장애 유무 등에 관계없이 사용자 인터페이스는 조작 가능하고 내비게이션 하여 모든 기능들을 운용할 수 있어야 한다. 모바일 OS의 안드로이드의 TalkBack , iOS의 VoiceOver 같은 스크린 리더를 사용하는 저시력자나 시력이 없는 사용자들의 보다 나은 사용자 경험을 제공하기 위한 원칙이다.
초점 이동 Focus order
스크린 리더기가 켜져 있거나 접근성 장치가 연결되어 있으면 의미나 기능을 갖는 모든 UI 컴포넌트에는 초점(focus)이 적용되어야 한다. 스크린 리더가 의도 한 순서대로 콘텐츠를 읽을 수 있게 하려면 올바르게 구조화되어야 한다.
웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다. 초점 이동은 논리적이어야 하며 시각적으로 구별할 수 있어야 한다
초점 이동은 논리적이어야 하며 시각적으로 구별할 수 있어야 한다.
초점이 한 컴포넌트에서 다음 컴포넌트로 이동 순서는 일반적으로 페이지의 좌측 상단 영역에서 우측 하단 영역으로 이동하는 것이 원칙이다.
빨간 도트 라인은 이전 초점을 의미하고 파란색 라인은 초점 상태를 나나 낸다. 화살표는 초점의 이동 방향을 의미한다.스마트폰의 스크린 리더 기능을 켰을때 초점(포거스)이 적용되면 컴포넌트에 대해 음성으로 설명한다. 사용자는 컴포넌트에 대한 설명 듣고 이동시킨다. 초점의 이동 순서는 전체 모바일 웹/앱에서 일관되게 제공해야 한다. 또한 사용자가 일상생활에서 관습적으로 행동하는 방식대로 초점 이동이 되어야 한다. 즉 손으로 책을 읽는 순서가 논리적인 흐름이라고 말할 수 있다.
관련 요소는 단일 초점 요소로 그룹화할 수 있다.
카드, 리스트 같은 컴포넌트의 아이콘, 이미지, 텍스트, 태그 등의 개별 요소에 초점을 맞추지 말고 실행이 가능한 컴포넌트 단위로 그룹화해 초점을 줘야 한다.
컴포넌트의 개별 요소에 초점을 주기보다는 컴포넌트 단위로 초점을 줘야 한다.이해의 용이성
콘텐츠는 쉽게 이해할 수 있어야 한다. 사용자가 장애 유무 등에 관계없이 애플리케이션에서 제공하는 콘텐츠를 이해할 수 있도록 제공해야 한다.
입력 도움
입력 서식에는 입력을 위한 제목 또는 설명을 제공하고, 입력 오류가 있을 경우 이를 정정할 수 있는 방법을 제공해야 한다.
스크린 리더를 이용하는 (시각 장애)사용자의 경우, 입력 오류가 발생 했을때 무엇이 잘못 되었는지 알 수가 없어서 입력 전체를 포기할 가능성이 있다. 그러므로 입력 오류가 발생할 경우 이를 쉽게 찾아서 정정할 수 있는 방법을 제공해야 한다.
사용자가 입력해야 하는 내용에 대해 쉽게 안내해 주어야 한다.
사용자가 입력을 할 때 용도나 목적을 이해할 수 있도록 위의 예처럼 입력 필드내에 입력해야할 정보의 예시를 함께 보여주어 입력을 도와야 한다.
국내 접근성 지침
방송통신 발전 기본법 제33조 및 방송통신 발전 기본법 시행령 제30조에 의거하여 2015년 3월 31일 KWCAG 2.1 개정
한국형 웹 콘텐츠 접근성 지침 2.1
모바일 애플리케이션 콘텐츠 접근성 지침 2.0
접근성 관련 플러그인과 툴
Stark
스케치, 피그마, XD, 크롬 플러그인이다. 기본 기능은 무료이고 확장 기능은 유료이다.
Adee
디자인된 앱을 색각 이상자가 어떻게 보이는지 시뮬레이션할 수 있다. 스케치, 피그마 플러그인이다.
참고자료
iOS 접근성 가이드
안드로이드 접근성 가이드
Material Design 접근성 가이드
Atlassian Design 접근성 가이드
IBM Carbon designsystem 접근성 가이드
W3의 접근성 관련 컴포넌트 설명
명도 대비에 대해 자세하게 다뤘다.
Accessibility guidelines for UX Designers
