UX-Accessibility접근성을 고려한 디자인 2
접근성 있는 디자인을 하기 위해서는 무엇을 우선적으로 고려해야 하는가
https://brunch.co.kr/@migyeongux/20
앞서 1편에서 접근성 있는 디자인을 하기 위해서는 아래 요소를 고려해야 한다고 했다.
사용자가 줌인 기능을 200프로 까지 했을 때 해당 페이지의 모든 텍스트와 콘텐츠 들은 잘 보여야 한다.
또한 보이스 오버나 스크린 리더를 이용해서 모든 콘텐츠를 내비게이션 할 수 있어야 한다.
마우스가 아니라 키보드를 통해 사용자는 모든 콘텐츠를 내비게이션 할 수 있어야 한다.
그리고 음성 인식 도구를 이용하여 사용자는 인 풋을 작성할 수 있어야 한다.
모든 문장은 가독성이 있어야 한다.
위의 4가지 목적을 달성하기 위해서는 디지털 보조 도구(키보드 인터렉션, 스크린리더, 보이스 오버 등등...) 사용이 필수인데 이를 위해서는 웹사이트는 시멘틱 구조(Semantic Structure)로 만들어져야 한다.
여기에 있는 요소들을 구체적으로 분석해 보자.
1. 보는 데에 불편함이 있는 유저들을 위한 접근성 있는 디자인
첫 번째로는 웹사이트를 200프로 줌인하였을 때 웹사이트의 모든 콘텐츠들은 여전히 잘 보이고 읽혀야 한다. 나이가 들면 자연스럽게 시각적 능력이 후퇴하는데 이런 유저들은 보통 웹사이트를 돋보기 툴이나 핀치를 통해 확대해서 보는 경우가 많다 이를 위해 사용자가 200프로 까지 확대하였을 때 여전히 웹사이트는 잘 보여야 한다.
아래의 예시를 살펴보자 왼쪽은 100프로의 화면이고 오른쪽은 데스크톱이지만, 줌인을 하였을 때 모바일 뷰로 바뀌고 여전히 텍스트는 잘 읽히는 것을 확인할 수 있다.
두 번째로 고려해야 하는 것은 선명한 색 대조이다. 예를 들면 바탕색 위에 아이콘이나 글자가 있을 경우 해당 글자는 잘 보이고 읽혀야 한다. 이를 위해 색 대조 체커를 사용해 보면 해당 색 조합이 웹접근성에 적합한지 알아볼 수 있다.
색대조와 마찬가지로 이미지 위에 텍스트를 올리면 사용자들이 텍스트를 읽는데 어려움이 있을 수 있다. 아래 두 예시를 비교해 보자. 좌측은 파란색 배경위에 텍스트를 올려 가독성이 있다 이에 비해, 오른쪽은 이미지 위 약간의 검정 투명색 배경을 위에 올렸음에도 불구하고 텍스트가 잘 읽히지 않는다.
세 번째로는 텍스트 사이즈이다. 텍스트 사이즈는 모바일은 16px, 데스크톱은 18px이 가장 작은 사이즈로 권장된다. 텍스트 사이즈가 작을 경우 사용자들은 콘텐츠를 이해하는데 불편함이 있다.
2. 시각장애인들을 위한 보이스 오버 (Voice Over) 기능을 고려한 디자인
시각장애인들은 어떻게 웹 콘텐츠를 이해할까? 텍스트를 음성으로 바꿔주는 디지털 도구를 통해 콘텐츠를 이해한다. 도구의 예로서 맥이나 아이폰에 있는 보이스 오버나 플러그인인 스크린리더가 있다.
이 도구들을 작동시켰을 때 웹사이트의 콘텐츠는 음성으로 읽어주며 단축키를 통해 웹사이트를 내비게이션 할 수 있다.
하지만 웹사이트가 제대로 개발되지 않았을 경우는 당연히 이 도구들이 제대로 작동하지 않는다. 그러므로 웹사이트는 시멘틱 구조로 만들어져야 한다.
3. 신체적 장애, 특히 팔을 자유롭게 사용하지 못하는 사용자를 고려한 키보드 인터렉션
팔과 손이 불편한 유저들은 마우스나 트랙패드를 사용하는 데에 어려움이 있다. 이럴 경우 키보드를 이용하여 웹사이트를 네 이 게이 시원할 수 있다. 탭 키 (tab) 키를 누를 경우 키보드 인터렉션이 활성화된다.
키보드 인터렉션을 통해 사용자가 웹사이트를 내비게이션 하기 위해서는 우선적으로 웹사이트는 시멘틱 구조로 만들어져야 하며 웹사이트를 구성하는 디자인 패턴들은 아래와 같이 키보드 인터렉션에 맞게 개발되어야 한다.
https://webaim.org/techniques/keyboard/예를 들면 모든 인터렉티브 요소들(버튼, 링크 등)은 탭키(tab)로 내비게이션 할 수 있어야 한다. 그리고 shitf+tab를 동시에 눌렀을 때 바로 이전의 인터렉티브 요소로 돌아갈 수 있어야 한다. 또한 라디오 버튼일 경우 라디오 버튼들 사이에서는 화살표 위아래 키로 내비게이션 할 수 있어야 하며 스패이스 키를 통해 해당 옵션을 선택할 수 있어야 한다. 이는 UX디자이너가 개발자에게 디자인 패턴 개발에 앞서 분명히 전달해야지만 키보드 인터렉션이 반영될 수 있다.
4. 보이스오버와 키보드 인터렉션을 포함한 디지털 보조 도구가 제대로 작동하기 위해서 가장 중요한 시멘틱 구조(Semantic Structure)
접근성을 도와주는 디지털 보조 기술을 제대로 이용하고 작동하기 위해서는 무엇보다 시멘틱 구조(Semantic Structure)가 제일 중요하다. 웹사이트가 시멘틱 구조로 만들어져 있지 않을 경우 디지털 도구가 제대로 작동하지 않는다. 시멘틱 구조는 이러한 보조 기술이 웹 페이지의 내용을 정확하게 이해하고 해석할 수 있도록 도와준다. 시맨틱 요소를 사용하여 제목, 단락, 목록, 링크 등을 명확하게 정의하면, 스크린 리더나 키보드 인터렉션을 통해 사용자가 콘텐츠를 쉽게 탐색하고 이해할 수 있다.
이때까지 접근성 있는 웹사이트를 제작하기 위해서는 어떤 요소를 고려해야 하는지 알아보았다. 3편에서는 개발된 웹사이트를 어떻게 접근성의 관점에서 측정해야 하는지 알아보겠다.
https://brunch.co.kr/@migyeongux/22
