웹 접근성이란 무엇인가? 모두가 사용할 수 있는 서비스 만들기

웹 접근성은 장애가 있든 없든, 또 어떤 환경에 있든 누구나 웹 서비스를 쓸 수 있게 만드는 것을 뜻합니다. 화면을 보기 어려운 사람, 마우스를 쓰기 힘든 사람, 소리를 듣지 못하는 사람까지 모두를 염두에 두는 것입니다.

흔히 접근성을 소수를 위한 배려쯤으로 여기기 쉽지만, 실제로는 더 많은 사용자를 받아들이는 일이자 품질의 문제입니다. 이번 글에서는 웹 접근성이 무엇이고 왜 중요한지를 코드 없이 풀어 보겠습니다.

접근성은 모두를 위한 문턱 낮추기입니다 #

건물 입구의 경사로를 떠올려 보겠습니다. 경사로는 휠체어를 쓰는 사람을 위해 만들어졌지만, 무거운 짐을 끄는 사람이나 유아차를 미는 사람에게도 똑같이 도움이 됩니다. 한 사람을 위해 낮춘 문턱이 결국 모두를 편하게 한 것입니다.

웹 접근성도 같은 생각입니다. 특정 사용자를 위해 화면을 다듬으면, 그 개선이 다른 많은 사용자에게도 이어집니다. 접근성을 챙기는 것은 일부를 위한 특별 대우가 아니라, 더 많은 사람이 무리 없이 쓰도록 문턱을 낮추는 일입니다.

화면을 못 보는 사람도 웹을 씁니다 #

눈으로 화면을 보기 어려운 사람은 스크린리더라는 도구로 웹을 씁니다. 화면의 내용을 소리로 읽어 주는 프로그램입니다. 그런데 스크린리더는 그림 자체를 이해하지는 못합니다. 그래서 이미지에 어떤 그림인지 설명하는 대체 텍스트가 없으면, 그 부분은 그냥 건너뛰거나 의미 없이 읽힙니다.

화면의 구조도 중요합니다. 제목과 본문, 버튼과 링크가 종류에 맞게 표시돼 있어야 스크린리더가 여기는 제목이고 여기는 버튼이라고 알려 줄 수 있습니다. 눈으로 볼 때는 굵은 글씨 하나로 충분해 보여도, 소리로 들을 때는 그것이 제목인지 아닌지가 분명해야 합니다.

마우스 없이도 쓸 수 있어야 합니다 #

손을 자유롭게 쓰기 어려운 사람은 마우스 대신 키보드만으로 웹을 다룹니다. 보통 Tab 키로 버튼과 링크 사이를 옮겨 다닙니다. 그래서 마우스로만 눌리는 메뉴가 있다면, 키보드 사용자는 그 기능에 닿지 못합니다. 마우스 없이도 모든 곳에 닿을 수 있어야 한다는 뜻입니다.

색도 마찬가지입니다. 빨강과 초록을 구분하기 어려운 사람이 적지 않습니다. 그래서 빨간 글씨가 오류라는 식으로 색 하나로만 정보를 전하면, 그 차이를 못 읽는 사람이 생깁니다. 색과 함께 글자나 기호로도 알려 주고, 글자와 배경의 명암 차이를 충분히 두는 것이 기본입니다.

접근성은 선택이 아니라 품질입니다 #

접근성을 잘 챙기면 모두의 경험이 함께 좋아집니다. 동영상에 넣은 자막은 소리를 듣기 어려운 사람뿐 아니라, 시끄러운 지하철이나 소리를 켤 수 없는 상황에 있는 사람에게도 쓸모가 있습니다. 이미지의 대체 텍스트는 검색엔진이 그림의 내용을 이해하는 데도 도움이 되어 검색에도 유리합니다.

게다가 많은 나라에서 일정 규모 이상의 서비스에 접근성을 법으로 요구합니다. 즉 접근성은 있으면 좋은 추가 기능이 아니라, 서비스가 갖춰야 할 기본 품질에 가깝습니다.

어떻게 확인하나 #

거창한 장비 없이도 기본 점검은 할 수 있습니다. 마우스를 잠시 치우고 키보드만으로 주요 기능을 끝까지 써 보면, 어디서 막히는지 금방 드러납니다. 이미지마다 대체 텍스트가 달려 있는지, 글자와 배경의 대비가 충분한지도 눈으로 확인할 수 있습니다.

자동으로 접근성 문제를 찾아 주는 검사 도구도 많습니다. 이런 점검을 출시 전 테스트 과정에 함께 넣어 두면, 접근성을 나중에 몰아서 고치는 대신 평소에 챙길 수 있습니다.

왜 비개발자가 알면 일이 편해지는가 #

• 기획 단계에서 반영합니다. 화면을 설계할 때부터 키보드 사용과 색 대비를 염두에 두면, 나중에 크게 뜯어고치는 일을 줄일 수 있습니다.
• 콘텐츠를 바르게 만듭니다. 이미지에 대체 텍스트를 달고 영상에 자막을 넣는 일이 왜 필요한지 알면, 글이나 영상을 만들 때 자연스럽게 챙기게 됩니다.
• 법적 리스크를 압니다. 접근성이 권고가 아니라 의무인 경우가 있다는 점을 알면, 서비스가 감수할 위험을 미리 가늠할 수 있습니다.

마무리 #

오늘은 웹 접근성이 장애가 있든 없든 누구나 쓸 수 있는 서비스를 만드는 일이며, 결국 모두의 경험을 끌어올리는 품질의 문제임을 살펴봤습니다. 스크린리더를 위한 대체 텍스트, 키보드만으로도 닿는 구조, 색에만 기대지 않는 표시가 그 출발점입니다.

웹 화면이 어떤 조각들로 이루어지는지 궁금하다면 웹사이트는 무엇으로 이루어지는가를, 이런 점검을 출시 전 어디에 끼워 넣는지 궁금하다면 테스트,QA,스테이징을 함께 읽어 보시길 권합니다.