brunch

You can make anything
by writing

- C.S.Lewis -

by 최철호 Mar 16. 2022

모바일 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  가지 적합성 수준으로 표시한다.
기술적으로 다음 5가지 등급으로 표시가 가능하다.
Fail
Fial 텍스트의 명암비가 2.9 이하임을 의미한다 로고의 텍스트  기타 장식 요소에는 적용되지 않는다.
AA Large
AA Large 텍스트의 명암비가 3.0 이상임을 의미한다.
AA
AA 텍스트의 명암비가 4.5 이상임을 의미한다.
AAA Large
텍스트의 명암비가 4.5 이상임을 의미한다.
AAA
텍스트의 명암비가 7.0 이상임을 의미한다.

위 등급을 기반으로 AA 즉 명도 대비 4.5 이하의 색은 사용자 인터페이스에서 중요한 요소의 텍스트에 사용하지 않아야 한다.


운용의 용이성

사용자가 장애 유무 등에 관계없이 사용자 인터페이스는 조작 가능하고 내비게이션 하여 모든 기능들을 운용할 수 있어야 한다. 모바일 OS의 안드로이드의 TalkBack ,  iOS의 VoiceOver 같은 스크린 리더를 사용하는 저시력자나 시력이 없는 사용자들의 보다 나은 사용자 경험을 제공하기 위한 원칙이다.

초점 이동 Focus order

스크린 리더기가 켜져 있거나 접근성 장치가 연결되어 있으면 의미나 기능을 갖는 모든 UI 컴포넌트에는 초점(focus)이 적용되어야 한다.  스크린 리더가 의도 한 순서대로 콘텐츠를 읽을 수 있게 하려면 올바르게 구조화되어야 한다.
웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다. 초점 이동은 논리적이어야 하며 시각적으로 구별할 수 있어야 한다


초점 이동은 논리적이어야 하며 시각적으로 구별할 수 있어야 한다.

초점이 한 컴포넌트에서 다음 컴포넌트로 이동 순서는 일반적으로 페이지의 좌측 상단 영역에서 우측 하단 영역으로 이동하는 것이 원칙이다.

빨간 도트 라인은 이전 초점을 의미하고 파란색 라인은 초점 상태를 나나 낸다. 화살표는 초점의 이동 방향을 의미한다.

스마트폰의 스크린 리더 기능을 켰을때 초점(포거스)이 적용되면 컴포넌트에 대해 음성으로 설명한다. 사용자는 컴포넌트에 대한 설명 듣고 이동시킨다. 초점의 이동 순서는 전체 모바일 웹/앱에서 일관되게 제공해야 한다. 또한 사용자가 일상생활에서 관습적으로 행동하는 방식대로 초점 이동이 되어야 한다. 즉 손으로 책을 읽는 순서가 논리적인 흐름이라고 말할 수 있다.


관련 요소는 단일 초점 요소로 그룹화할 수 있다.

카드, 리스트 같은 컴포넌트의 아이콘, 이미지, 텍스트, 태그 등의 개별 요소에 초점을 맞추지 말고 실행이 가능한 컴포넌트 단위로 그룹화해 초점을 줘야 한다.

컴포넌트의 개별 요소에 초점을 주기보다는 컴포넌트 단위로 초점을 줘야 한다.



아이콘 2편을 작성하다가 잘 써지지 않아서 공백기간이 길었습니다. 실무를 하다 보니 접근성 이슈가 많았습니다. 그래서 접근성 관련 글을 먼저 씁니다. 아직 다 쓴 글은 아닌데 작성된 부분만 먼저 오렵니다. 예시를 계속 추가해 가겠습니다.


국내 접근성 지침

방송통신 발전 기본법 제33조 및 방송통신 발전 기본법 시행령 제30조에 의거하여 2015년 3월 31일 KWCAG 2.1 개정


한국형 웹 콘텐츠 접근성 지침 2.1

https://www.notion.so/coldfish/Accessibility-ac428400657645c59502908e39438c62#b80436366ff044f4a3858e73e156acf6

모바일 애플리케이션 콘텐츠 접근성 지침 2.0


접근성 관련 플러그인과 툴


Stark

스케치, 피그마, XD, 크롬 플러그인이다. 기본 기능은 무료이고 확장 기능은 유료이다.

https://www.getstark.co/

Adee

디자인된 앱을 색각 이상자가 어떻게 보이는지 시뮬레이션할 수 있다. 스케치, 피그마  플러그인이다.

https://www.adeeapp.com/


참고자료


iOS 접근성 가이드

안드로이드 접근성 가이드

Material Design 접근성 가이드

Atlassian Design 접근성 가이드

IBM Carbon designsystem 접근성 가이드


 W3의 접근성 관련 컴포넌트 설명 


명도 대비에 대해 자세하게 다뤘다.

Accessibility guidelines for UX Designers



매거진의 이전글 모바일 UI 디자인 기본 요소 - 아이콘 1

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari