널리

안녕하세요, 엔비전스 입니다.

지난번 사례를 통해 알아보는 명도대비 접근성 구현 방법 에서 명도 대비에 따른 버튼 구현 방식에 대해 간단히 알아봤었는데요. 정보를 표현하는 데 있어 고려해야 할 접근성은 단순히 명도 대비뿐만이 아니라는 것을 알고 계시나요? 당연히 접근성을 준수하기 위해서는 명도 대비만 있는 것은 아닙니다. 한국형 웹 콘텐츠 접근성 지침은 기본적으로 33개의 검사 항목이 있고, 한국의 모바일 애플리케이션 접근성 지침 2.0은 19개의 검사 항목을 가지고 있습니다. 이렇게 접근성을 준수하기 위해 명도 대비를 제외하고도 여러 가지 접근성 지침이 있습니다. 그러나 범위로 좁혀 이전 아티클과 이번 아티클에까지 저시력인과 색맹/색약, 운동 장애 사용자의 접근성을 보장하는 데에 아주 중요한 접근성 요소를 중심으로 알아보고 있습니다.

이번 아티클에서는 모바일에서 고려해야 할 버튼의 터치 대상(컨트롤) 크기와 색에 무관한 인식에 대해 살펴보겠습니다. 터치 대상의 크기 문제와 색에 무관한 인식은 모바일 환경이 일반화 되면서 저시력인과 색맹/색약 사용자, 운동 장애를 경험하는 사용자에게 더 중요한 접근성 요소가 되었습니다. 다른 한편으로는 중요하지만, 잘 지켜지지 않는 부분이기도 합니다. 따라서 터치 대상 컨트롤의 크기와 색에 무관한 인식이 왜 중요한지 자세히 알아보고 실제로 적용해 볼 수 있는 몇 가지 사례에 대해 함께 알아보도록 하겠습니다.

터치 대상 크기에 대한 접근성

터치 대상 크기는 저시력/시각장애 사용자, 운동 장애 사용자뿐 아니라 사실상 모든 사용자들을 위해 고려해야 할 중요한 접근성 중 하나입니다.

기기 화면이 작은 모바일 특성상 동작에서의 오류를 최소화하기 위해서인데요.

위와 같은 경우 버튼의 크기가 너무 작아 시각적으로 구분하기 어려울 뿐만 아니라 손으로 동작하기에도 불편함이 있어 기본적으로는 각 컨트롤의 길이가 7mm 이상이 되도록 해야 합니다(디바이스 독립 단위 기준 44pt/48dp 수준 권장).

사실 이 컨트롤 크기의 접근성을 지켜 버튼을 만드는 것은 매우 간단한 일입니다.

버튼의 크기가 7mm 이상이 되도록 버튼을 아주 크게 만들면 되는데요.

하지만 이는 추구하는 나름의 디자인 언어가 있는 디자이너의 경우 따르고 싶지 않은 경우가 있고 자칫 버튼의 크기를 크게 키우는 데에만 집중하다가는 인접 거리를 생각하지 않아 다른 상호작용이 필요한 영역을 누를 때 방해 요소가 될 수도 있습니다.

다음 예시는 언급한 바와 같이 버튼의 거리가 인접해 보이는 경우입니다.

사실 이는 흔히 볼 수 있는 버튼의 구조로 문제점을 찾기 어려울 수 있습니다.

그러나 바로 옆에 있는 버튼을 누르기 위해 잘못된 버튼을 실수로 눌러 버린 적이 있지는 않으신가요?

접근성에서 고려해야 할 부분은 바로 이 부분입니다.

단순히 버튼의 역할만 조금 다른 것이 아니라 만약 이 사진과 같이 전혀 상반된 역할을 하는 버튼 두 가지를 너무 인접하게 붙여 놓는다면 불편함이 매우 큰 비상사태로 번질 수도 있습니다.

때문에 크기만을 고려할 것이 아니라 이러한 여러 사용성 경우를 모두 고려한 접근성이 적용된 버튼을 만들어야 할 것입니다.

다음은 거리감이 적절한 버튼의 예시입니다.

크기가 큰 버튼의 경우 상대적으로 조금 가까운 거리임에도 컨트롤하기 더 수월해진다는 장점이 있습니다.

만약 시각적으로 보이는 버튼의 크기를 키우고 싶지 않다면 버튼이 눌리는 컨트롤 영역만을 키우는 방법도 있습니다.

시각적으로 보이는 버튼의 크기가 조금 작더라도 다음과 같이 컨트롤 영역을 넓게 잡아 준다면 버튼의 오동작을 어느 정도 해결할 수 있을 것입니다.

색에 무관한 인식

다음은 사용자에게 필요한 정보 제공을 색으로만 표시한 경우입니다.

성공 사례와 실패 사례를 비교하며 간단히 살펴보겠습니다.

가장 흔하게 볼 수 있는 그래프의 경우입니다.

첫 번째 사진과 같이 색상만을 이용하여 각 항목의 정보를 제공할 경우 색맹 사용자들은 이를 전혀 구분할 수 없는 접근성 문제가 발생합니다.

색상뿐만 아니라 모양과 패턴을 다르게 해 색이 아닌 방법으로도 각 항목을 구분할 수 있도록 해야 합니다.

역시 흔하게 볼 수 있는 페이지네이션 선택 표시 방법입니다.

현재 위치해 있는 페이지의 번호를 얇은 테두리 혹은 구분이 어려운 색상으로 표시한 경우입니다.

이런 형태는 페이지네이션뿐만 아니라 선택됨 정보를 표시할 수 있는 일반 탭, 버튼 모든 경우에서 흔히 볼 수 있는데요.

해결 방법은 역시 간단합니다.

두 번째 이미지와 마찬가지로 선택되지 않은 번호와는 완전히 반전된 색상을 주어 눈에 띄도록 하거나 밑줄, 혹은 굵은 테두리 등을 함께 주어 구분이 원활하도록 합니다.

필수 입력 서식을 제대로 기입하지 않고 넘어갔을 경우 해당 영역의 오류를 색상만으로 표시하는 사례를 보신 적이 한 번쯤은 있으실 거라 생각합니다.

오류를 표시했다는 것만으로 접근성 해결로 오해할 수 있는 부분 중 하나입니다.

마찬가지로 이런 경우 색맹 사용자는 구분이 어려울 수 있기 때문에 색상만이 아니라 눈에 크게 띄는 음영이나 테두리, 혹은 텍스트로 직접 알려 주는 것이 좋습니다.

마지막으로 상태 제공 버튼입니다.

미완료된 상태를 빨간색, 완료가 된 버튼을 파란색으로 구분하는 등 단순히 색상만을 이용해 각 상태를 신호등처럼 제공하는 경우 역시 쉽게 볼 수 있는 형태 중 하나인데요.

이 경우 이전 편집창과 마찬가지로 구분이 쉬운 아이콘이나 텍스트와 함께 확실히 제공해 주는 것이 좋습니다.

마치며

지금까지 모바일 환경을 중심으로 컨트롤의 터치 대상 크기와 색상에만 의존하지 않는 접근성이 보장된 컨트롤을 만드는 방법과 그 중요성에 대해 알아보았습니다.

터치 대상의 크기와 색에만 의존하지 않는 콘텐츠는 각 디자이너마다 고유의 디자인 언어를 가지고 있기에 서로 다른 디자인 언어와 접근성을 준수해야 한다는 당위 사이에서 많은 고민을 불러일으키곤 합니다.

이러한 이유로 이 문제는 단 시일 내에 해결이 어려울 수 있습니다. 그러나 더 많은 고민과 사례들이 널리 공유된다면 더 나은 방법이 그 과정에서 쌓여갈 것이라 생각합니다. 저희 역시 모바일 환경에서 터치 대상 크기와 색에 무관한 인식에 대한 접근성 문제를 환기하고 고민해보고자 이번 아티클을 준비하게 되었습니다. 이 글이 더 많은 논의를 불러오면 좋겠습니다.

읽어 주셔서 감사합니다.