by
May 14. 2021
북미 IT업계 핫토픽 "Accessibility"
웹 접근성을통해 모두에게 최상의 경험을 제공하자
불과 몇 년 전만 해도 웹 접근성은 프로젝트 시작단계에서부터 주된 지분을 차지하면 논의되는 주제가 아니었다. 하지만 최근 들어 회사에서 모든 프로젝트를 진행할 때 빠지지 않고 등장하는 질문이 "Is this accessible?"인 만큼 지금 북미 IT업계에서는 'Accessibility(웹 접근성)"이 정말 핫토픽이다.
"Accessibility"란 무엇인가?
"Accessibility"는 Inclusive design에서 파생된 분야이다. 이 분야의 주목적은 다양한 장애를 가지고 있는 사람들도 장애를 가지고 있지 않은 사람들과 동일한 경험을 가져갈 수 있도록 하는 것이다. 대표적인 예로 시각 장애인들은 Screen reader프로그램을 통해 화면을 음성으로 변환하여 듣고, 청각 장애인들은 캡션 툴을 이용해 음성을 시각적으로 변환하여 듣는다. 또 신체적 장애를 가진 이들은 보조기계를 이용해 키보드나 마우스를 조작하기도 한다.
이러한 보조 프로그램과 기계들의 발전은 많이 이루어졌지만 정작 제일 중요한 웹과 앱상에서의 접근성은 이제야 그 중요성이 부각되기 시작하였다. 불과 10-20년 전만 해도 IT 기업들은 다양성을 고려하지 않은 체 웹사이트와 앱을 디자인하는 경우가 대부분이었기 때문에, 디지털 공간은 장애인들이 쉽게 접근하기 어려운 공간 중 하나였다. 이를 제지하기 위해 북미, 유럽 등의 많은 국가들이 법적으로 Web accessibility law를 제정하고 WCAG(Web Content Accessibility Guidelines)를 따르도록 규정했기 때문에 이에 맞춰 IT 업계들도 Accessibility에 관심을 기울이게 되었다.
그렇다면 Web accessibility는 무엇일까?
크게 디자인과 코딩 두 가지 측면으로 나누어서 설명해보자면, 디자인 측면에서 Web accessibility를 증가시키기 위해서는 색상대비, 폰트 사이즈 등을 조절해 시력이 낮거나 색맹 또는 색약인 사람들도 쉽게 화면을 볼 수 있도록 하는 것이 중요하다.
코딩 측면에서 Web accessibility를 증가시키기 위해서는 스크린 리더가 화면을 읽어 내려가는 것을 듣는데 어려움이 없도록 설계를 하는 것이 가장 중요하다. 예를 들어, Heading이 올바르게 설정되어있는지, 키보드 만으로도 조작이 원활하게 이루어질 수 있는지, Tab 순서가 논리적 사고방식에 맞춰 잘 배열이 되어 있는지, Alt text가 제대로 잘 사용되고 있는지와 같은 요소들이 Web accessibility를 높일 수 있는 좋은 요소들이다. 자세한 가이드가 궁금하다면 Web Accessibility Initiative을 탐방해 보면 좋다.
또한 하단의 Web Accessibility Initiative에서 제공하는 비디오를 통해 Web accessibility를 쉽게 알아볼 수도 있다.
https://youtu.be/20 SHvU2 PKsM
"Web Accessibility"를 적용하려면?
앞서 Web Accessibility가 무엇인지 알아보았다. 그렇다면 과연 내 웹사이트 그리고 애플리케이션은 과연 Web accessibility 기준을 충족하는지 또는 기준을 적용하려면 어떤 부분들을 고쳐야 하는지 궁금하신 독자분들을 위해 대표적인 Web Accessibility 점검 도구들을 몇 가지를 소개하고자 한다.
1. ANDI
ANDI는 대표적인 Web Accessibility 코딩 검사 툴이다. 일반적인 유저들과 달리, 시각적 장애를 가지고 있는 사람들은 스크린 리더 프로그램을 사용해야 하기 때문에 유저들이 편리하게 디지털 공간을 이용할 수 있도록 html 코드를 보완해 주어야 한다. 대부분의 회사들은 프로젝트를 진행할 때 장애를 가지고 있지 않은 유저들을 대상으로 코드를 짠 후에 스크린 리더 프로그램을 사용하는 이들을 위한 코딩을 추가적으로 진행하는 경우가 많기 때문에, 코드를 보완하는 과정에서 누락된 부분들을 체크할 수 있도록 도와주는 프로그램이 바로 ANDI라는 툴이다. 100% 잡아내는 것은 아니기 때문에 스크린 리더로 직접 사용해 보는 것이 가장 정확하지만 매번 스크린 리더 테스트를 하기엔 시간이 너무 많이 소요되기 때문에 ANDI를 사용하면 Web Accessibility 변환 시간을 효율적으로 줄일 수 있다.
https://www.ssa.gov/accessibility/andi/help/howtouse.html
2.Accessible Colors
Accessible Colors는 색상대비, 폰트 사이즈가 기준에 부합하는지 검사할 수 있는 Web Accessibility 디자인 보조 툴이다. WCAG 2.0 guidelines에 따르면 Web Accessibility를 세 가지 단계로 나누어서 분류하는데 A (lowest), AA (mid range), and AAA (highest)이다. 단계가 낮을수록 Contrast ratio기준이 낮으며 단계가 높을수록 Contrast ratio 기준이 높아진다. 대부분의 웹사이트들과 앱들은 AA를 기준으로 두고 디자인을 하며 많은 디자이너들은 UI 디자인을 진행함에 있어 수시로 하단의 웹사이트를 방문하여 자신이 만들고 있는 각각의 요소들이 Web Accessibility 기준에 부합하는지 확인하곤 한다.
https://accessible-colors.com
Web accessibility를 배우고 싶다면?
