웹 접근성(a11y), 못 쓰는 사람이 있으면 그건 고장이다
키보드와 스크린 리더로 같은 기능을 쓰려면 무엇이 필요할까요? 문서 구조와 포커스, 색 대비가 읽는 경험에 주는 영향을 살펴봐요.
이 글의 목차마우스가 없을 때 무엇이 남는가4
건물 입구에 경사로를 놓으면 휠체어만 편해지는 것이 아니에요. 유아차를 밀고 오는 사람, 무거운 짐을 끄는 사람, 다리를 다쳐 잠깐 불편한 사람이 함께 써요. 경사로는 특정 집단을 위한 배려라기보다 입구가 하나뿐이라는 가정을 버린 설계에 가까워요.
웹의 접근성도 같은 자리에 있어요. 화면을 보고 마우스를 쓰는 사람만 방문한다는 가정을 버리면 무엇을 고쳐야 할지가 정해져요. 그리고 여기서 갈리는 지점이 있어요. 접근성은 대개 기능을 더하는 일이 아니라, 이미 있는 기능을 특정 입력 수단에서만 쓸 수 있게 만들어 둔 것을 되돌리는 일이에요.
마우스가 없을 때 무엇이 남는가
키보드만으로 웹을 쓰는 사람에게 탭 키는 커서를 옮기는 수단이에요. 지금 어디에 있는지는 브라우저가 그려 주는 포커스 표시로 알아요. 이 표시가 디자인상 거슬린다는 이유로 지워지는 일이 흔한데, 그러면 그 사람에게는 커서가 사라진 화면이 돼요. 지우는 대신 그 사이트에 어울리는 모양으로 다시 그리는 것이 답이에요.
스크린 리더는 문서의 내용과 구조를 음성이나 점자로 전달하는 도구예요. 제목 사이를 건너뛰거나 버튼 목록을 찾아 이동할 수 있어요. 그래서 클릭되는 상자를 그리는 것과 실제 버튼을 만드는 것은 달라요. 브라우저의 버튼 요소에는 키보드 동작과 역할이 이미 들어 있지만, 일반 상자는 개발자가 그 약속을 따로 구현해야 해요.
제목의 순서도 같은 이유로 중요해요. 크기가 예뻐서 두 단계를 건너뛰면 목차가 어긋나요. 시각적 크기와 문서 구조는 별개이고, 크기는 스타일로 정하면 돼요.
색만으로 말하면 정보가 사라진다
상태를 색으로 알리는 화면이 많아요. 빨간 글씨는 오류, 초록은 성공 같은 식이에요. 색을 구분하기 어려우면 이 정보도 놓치고, 흑백 인쇄나 강한 햇빛 아래에서도 무너져요. 색만으로 정보를 구별하지 말라는 접근성 기준이 있는 이유예요. 글자나 아이콘, 위치를 함께 쓰면 색은 보조 수단이 돼요.
색만 있는 표시와 글자를 함께 둔 표시에서 색의 단서를 지워 보세요.
색만 있는 예시
글자도 있는 예시
색만 있는 예시
글자도 있는 예시
색으로만 구별하던 상태는 색의 단서가 없어지면 뜻을 잃어요. 글자를 함께 두면 상태를 계속 읽을 수 있어요.
왼쪽은 색의 뜻을 알아야 해요. 오른쪽은 승인·대기를 글자로도 알려 줘요.
특정 장애의 시야를 재현한 것이 아닌 정보 표현의 비교예요. 이 예제의 버튼과 결과 안내는 모든 상태에서 키보드와 보조 기술로 사용할 수 있어요.
대비도 마찬가지예요. 본문 글자에는 배경과의 밝기 차이가 일정 수준 이상이어야 한다는 기준이 있고, 여기서 자주 놓치는 것이 글자가 아닌 요소예요. 입력창의 테두리나 도표의 상자 경계처럼 내용을 이해하는 데 필요한 그래픽 요소에는 그보다 낮지만 별도의 기준이 따로 적용돼요. 옅은 선을 조용한 디자인이라고 부르기 쉽지만, 그 선이 정보를 나누고 있다면 옅음은 조용함이 아니라 결함이에요.
기준은 어떻게 자랐나
이 판단들이 취향 논쟁으로 끝나지 않는 것은 문서로 정리돼 있기 때문이에요. W3C의 웹 접근성 이니셔티브가 만든 지침이 그것이고, 2008년 12월 11일 WCAG 2.0이 나온 뒤 2018년 6월 5일 2.1이, 2023년 10월 5일 2.2가 뒤를 이었어요.
눈여겨볼 점은 새 판이 앞의 판을 폐기하지 않는다는 것이에요. 2.2를 만족하면 2.1과 2.0도 만족해요. 접근성 기준이 유행에 따라 뒤집히는 종류가 아니라 쌓이는 종류라는 뜻이고, 지금 맞춰 두면 다음 판이 나와도 대부분 그대로 유효하다는 뜻이기도 해요.
| 흔한 구현 | 무엇이 깨지나 | 대신 |
|---|---|---|
| 포커스 표시를 지운다 | 키보드 사용자가 위치를 잃는다 | 지우지 말고 어울리게 다시 그린다 |
| 상자에 클릭을 붙여 버튼처럼 쓴다 | 보조 기술이 버튼으로 읽지 못한다 | 버튼 요소를 쓰고 모양만 바꾼다 |
| 상태를 색으로만 알린다 | 색을 못 가리면 정보가 없어진다 | 글자나 아이콘을 함께 둔다 |
세 줄 모두 기능을 더하는 일이 아니라 되돌리는 일이라는 공통점이 있어요. 그래서 나중에 붙이는 것보다 처음부터 그렇게 만드는 편이 훨씬 싸요.
저는 무엇을 고쳤나
최근에는 이 블로그 도해의 테두리를 다시 봤어요. 차분하게 보이도록 고른 선이 배경과 너무 가까워서, 서로 다른 상자를 구별하기 어려웠어요. 상자의 구분을 그 선에만 맡겼다면 그건 읽는 데 필요한 정보였던 거예요.
공통 색상 값을 조정한 뒤 다시 보니 걱정했던 것처럼 화면이 무거워지지는 않았어요. 각 상자가 더 분명하게 읽혔어요. 옅으면 세련돼 보인다는 제 취향도 실제로 읽히는지 확인하고 나서야 판단할 수 있었어요.
색 대비를 재는 일은 분명 도움이 됐어요. 그렇지만 점수가 맞는다고 실제 사용까지 확인된 것은 아니었어요. 키보드로 도해를 열고 닫을 수 있는지, 글자만 들어도 관계가 이해되는지는 직접 따라가 봐야 했어요. 이제 수치와 사용 과정을 함께 봐요.