8. 모두를 위한 서비스 : 웹 접근성, 대체텍스트

6 min readJun 7, 2022

”이미지마다 Alt값 좀 입력해주실래요?”
“장차법(장애인차별금지법)에 위반돼서 설계를 바꿔야 돼요.”

1. 웹 접근성

서비스는 다양한 사람들이 사용할 수 있도록 만들어야 해요. 눈이 보이지 않는 시각장애인, 복잡한 동작을 하기 힘든 정신지체 장애인을 포함해 노인, 어린아이까지 모두가 편리하게 사용할 수 있는 서비스를 만드는 것을 ‘웹 접근성을 확보한다’고 합니다. 누구나 웹 앞에서 장애인이 될 수 있기 때문에 웹 접근성은 ‘배려’보다는 사용자에게 좀 더 편리한 서비스를 제공한다는 차원에서 접근해야 해요.

※출처 : [네이버 지식백과] 웹 접근성 (용어로 보는 IT, 2016. 02. 25., 채반석)

웹 접근성은 3단계로 이뤄지는데 최소한의 단계인 A등급, 보다 높은 AA등급, 최상의 단계인 AAA등급이 있어요. 보통은 AA등급으로 제작하지만, 금융 어플 등 생활에 필수적인 서비스의 경우 ‘장애인차별금지법’을 적용시켜 보다 엄격한 심사를 거쳐요.

2. 모두를 위한 서비스 수칙

2–1. 시각장애인

시각장애인들이 모두 앞이 아예 안 보이는 사람들은 아니에요. 보이는 정도에 따라 저시력 시각장애인과 전맹 시각장애인으로 나뉩니다. 저시력 시각장애인은 익숙한 길은 혼자 걸어 다닐 수 있기도 하지만 일반인보다 시력이 많이 떨어지기에 스마트폰의 글자를 읽기 위해서는 돋보기를 사용하는 경우가 많습니다. 이처럼 저시력 시각장애인들이 서비스를 편하게 이용하기 위해서는 색의 대비를 충분히 주는 것이 필요합니다. 아래 그림처럼 대비가 강해야 구분하기가 편해요. 참고로 길에 설치된 점자블록이 노란색인 것도 이 분들을 위한 거예요.

네이버는 색맹, 색약 이용자들을 위해 지하철 노선도를 만들었어요.

그리고 전맹 시각장애인은 앞이 전혀 보이지 않는 사람들을 말합니다. 이 분들에게 점자를 사용할 수 없는 매끈매끈한 스마트폰을 사용하는 건 정말 불편한 일이에요. 그래서 스마트폰에 기본으로 탑재되어있는 텍스트를 음성으로 변환하여 들려주는 기능을 사용합니다. 그렇다면 이미지는 음성으로 어떻게 변환할까요? 코드를 짤 때 이미지에 텍스트로 설명을 적어둡니다. 이것이 ‘대체 텍스트’입니다. Alternate text를 줄여 Alt값이라고도 불러요. 눈에는 보이지 않지만, 시각장애인들이 손으로 이미지에 접근하면 입력한 대체 텍스트를 변환하여 음성으로 들려줘요.

또한, 모니터를 볼 수 없는 시각장애인들은 마우스 대신 키보드를 이용해 웹 서비스를 이용합니다. 키보드를 누르면 어떤 콘텐츠인지 음성으로 하나씩 들려주죠. 그래서 순서가 뒤죽박죽 섞여 있으면 원하는 기능을 찾기 힘들어요. 보편적으로 ‘좌>우’ / ‘위>아래’로 순서로 읽기 때문에 맞춰서 설계하는 것이 좋아요. 주요 메뉴는 좌측 상단에 배치하면 시각장애인들이 찾기 쉽겠죠? 그리고 기능을 제공할 때도 순서가 매우 중요합니다. 예를들면, 아래 이미지의 왼쪽처럼 로그인 시 초점 순서가 ‘아이디 입력> 비밀번호 입력 > 로그인 > 아이디 저장'이라면 아이디 저장은 하고 싶어도 하지 못할 가능성이 있겠죠. 이럴 때는 오른쪽처럼 ‘아이디 입력 > 비밀번호 입력 > 아이디 저장 > 로그인'순으로 제공해야 아이디 저장을 인지하기 더 편할 거예요.