지난 편에서 검색엔진에게 문서를 잘 전하는 법을 다뤘습니다. 이번에는 사람 쪽으로 시선을 돌려, 모든 사용자가 웹을 쓸 수 있게 만드는 접근성을 살펴봅니다. 웹은 눈이 잘 보이고 손이 자유로운 사람만 쓰는 것이 아닙니다. 시력이 약하거나 아예 보지 못하는 사람, 손을 자유롭게 쓰지 못해 키보드만 쓰는 사람, 소리를 듣지 못하는 사람도 웹을 씁니다. 접근성은 이들 모두에게 웹을 열어 주는 일입니다.
제가 접근성을 처음 진지하게 고민한 계기는, 눈을 감고 화면 낭독 프로그램으로 제 페이지를 들어 본 경험이었습니다. 눈으로 볼 때는 멀쩡했던 페이지가 소리로 들으니 정체불명의 조각들이 나열되는 혼란 그 자체였습니다. 그날 이후 저는 접근성을 별도의 부가 작업이 아니라 만들기의 기본으로 삼게 되었습니다. 이번 편에서 그 기본을 정리하겠습니다.
1. 의미 있는 태그가 곧 접근성
접근성의 출발점은 특별한 무언가가 아니라, 지금까지 다뤄 온 의미 있는 태그를 제대로 쓰는 것입니다. 문서의 머리말, 탐색 메뉴, 주요 콘텐츠, 곁가지 같은 영역을 의미 있는 태그로 구분하면, 이것들이 화면 낭독 프로그램에게 자동으로 이정표 역할을 합니다. 사용자는 이 이정표를 따라 페이지의 구역 사이를 건너뛰며 탐색할 수 있습니다.
이 이정표가 왜 중요한지는 소리로 페이지를 들어 보면 압니다. 눈으로 보는 사람은 페이지를 한눈에 훑어 원하는 곳으로 바로 시선을 옮깁니다. 하지만 소리로 듣는 사람은 위에서부터 차례로 들어야 하죠. 이정표가 있으면 탐색 메뉴로, 본문으로, 곁가지로 곧장 건너뛸 수 있어, 처음부터 끝까지 다 듣지 않아도 됩니다.
같은 종류의 이정표가 여러 개 있을 때는 각각을 구분해 주어야 합니다. 예를 들어 탐색 메뉴가 페이지에 둘 있다면, 하나는 주요 메뉴, 다른 하나는 페이지 내 목차처럼 이름을 붙여 구분합니다. 이름이 없으면 사용자는 두 탐색 메뉴 중 어느 것이 무엇인지 알 수 없어 헤맵니다. 이 구분은 작지만 중요한 배려입니다.
반대로 아무 의미 없는 상자만 잔뜩 쓴 페이지는 화면 낭독 프로그램에게 아무 이정표도 주지 못합니다. 그러면 사용자는 밋밋한 글자 나열을 처음부터 끝까지 듣는 수밖에 없습니다. 겉보기에는 똑같은 페이지라도, 태그를 의미에 맞게 썼는지에 따라 소리로 듣는 경험은 하늘과 땅 차이가 됩니다.
제가 의미 있는 태그로 페이지를 다시 짜고 나서 화면 낭독 프로그램으로 들어 보니, 각 영역이 또렷이 안내되어 원하는 곳으로 쉽게 건너뛸 수 있었습니다. 전에는 불가능하던 탐색이 태그를 바꾼 것만으로 가능해진 것이죠. 접근성의 절반은 이미 의미 있는 태그 속에 들어 있었습니다.
정리하면 의미 있는 태그를 제대로 쓰는 것 자체가 강력한 접근성입니다. 이것들이 이정표가 되어 소리로 듣는 사용자의 탐색을 돕습니다. 이 토대 위에서 좀 더 구체적인 접근성 요소들을 살펴보겠습니다.
2. 이미지와 입력창의 이름
접근성의 기본 중의 기본이 이미지에 대체 글을 다는 것입니다. 소리로 듣는 사용자는 이미지를 볼 수 없으므로, 그 이미지가 무엇을 담고 있는지를 글로 대신 전해야 합니다. 이 대체 글이 없으면 화면 낭독 프로그램은 이미지를 그냥 이미지라고만 하거나 파일 이름을 읽어, 사용자는 아무 정보도 얻지 못합니다.
대체 글을 쓸 때는 이미지의 겉모습이 아니라 그 이미지가 전하는 뜻을 담아야 합니다. 예를 들어 그래프 이미지라면 그래프의 색이나 모양이 아니라 그 그래프가 보여 주는 결론을 적는 것이 좋습니다. 사용자에게 필요한 것은 이미지의 정보이지 이미지의 생김새가 아니기 때문입니다.
순수하게 장식용인 이미지는 오히려 대체 글을 비워 두어야 합니다. 아무 정보도 담지 않은 배경 무늬 같은 이미지에 억지로 설명을 달면, 화면 낭독 프로그램이 불필요한 것을 읽어 사용자를 방해합니다. 대체 글을 비워 두면 화면 낭독 프로그램이 그 이미지를 조용히 건너뜁니다. 정보가 있으면 담고, 없으면 비우는 판단이 필요합니다.
입력창에 이름표를 다는 것도 앞서 폼 편에서 강조했듯 접근성의 핵심입니다. 이름표가 없는 입력창은 소리로 듣는 사용자에게 정체불명의 빈칸입니다. 모든 입력창에 그것이 무엇을 입력하는 곳인지 알리는 이름표를 정식으로 연결해야, 사용자가 각 칸의 용도를 알고 채울 수 있습니다.
제가 대체 글과 이름표를 꼼꼼히 챙긴 뒤로 화면 낭독 프로그램 사용자의 경험이 크게 달라졌습니다. 전에는 정보 이미지가 그냥 이미지로 읽히고 입력창이 빈칸으로 읽혀 페이지를 쓸 수 없었는데, 이 둘을 챙기자 페이지가 온전히 전달되었습니다. 이 둘만 제대로 해도 접근성의 큰 부분이 해결됩니다.
아래는 정보 이미지와 장식 이미지의 대체 글 처리를 비교한 예시입니다. 담을 때와 비울 때를 보세요.
<img src="chart.png" alt="올해 방문자가 작년보다 두 배 늘었다">
<img src="pattern.png" alt="">
3. 의미 있는 태그 먼저, 보조 표시는 나중
접근성을 높이는 보조 표시 방법이 따로 있긴 합니다. 태그에 역할이나 상태를 덧붙여 화면 낭독 프로그램에게 더 많은 정보를 주는 방식입니다. 그런데 이 보조 표시를 쓰기 전에 반드시 새겨야 할 원칙이 있습니다. 의미 있는 기본 태그로 해결되는 것은 기본 태그로 하고, 보조 표시는 정말 방법이 없을 때만 쓰라는 것입니다.
왜 이 순서일까요. 기본 태그는 그 자체로 역할과 동작, 키보드 조작까지 갖추고 있습니다. 예를 들어 버튼 태그는 버튼이라는 역할, 눌리는 동작, 키보드로 누를 수 있는 능력을 모두 공짜로 제공합니다. 반면 아무 상자에 버튼 역할만 보조 표시로 붙이면, 역할은 알려지지만 동작과 키보드 조작은 우리가 일일이 다시 만들어야 합니다.
보조 표시를 잘못 쓰면 오히려 없느니만 못한 결과가 나옵니다. 예를 들어 실제로는 그렇지 않은데 잘못된 역할을 붙이거나, 상태가 바뀌었는데 보조 표시를 갱신하지 않으면, 화면 낭독 프로그램이 틀린 정보를 사용자에게 전합니다. 틀린 정보는 정보가 없는 것보다 더 큰 혼란을 부릅니다. 그래서 보조 표시는 신중하게 써야 합니다.
물론 보조 표시가 꼭 필요한 경우도 있습니다. 기본 태그에 없는 복잡한 구성 요소를 만들 때, 예를 들어 탭으로 화면을 전환하는 구조나 자동 완성 목록 같은 것을 만들 때는 보조 표시로 역할과 상태를 알려야 합니다. 다만 이런 경우에도 기본 태그로 만들 수 있는 부분은 최대한 기본 태그로 짓는 것이 좋습니다.
제가 초보 시절 저지른 실수가, 멋을 부리려고 평범한 버튼을 아무 상자로 만들고 보조 표시로 흉내 낸 것이었습니다. 그러다 키보드로 누를 수 없고 화면 낭독 프로그램에서 이상하게 읽히는 문제가 줄줄이 터졌습니다. 그냥 버튼 태그를 썼으면 아무 문제도 없었을 일이었죠. 그 뒤로 저는 기본 태그를 우선하는 원칙을 철칙으로 삼았습니다.
정리하면 접근성의 지혜는 의미 있는 기본 태그를 먼저 쓰고, 보조 표시는 최후의 수단으로 남기는 것입니다. 기본 태그가 공짜로 주는 것들을 굳이 버리고 처음부터 다시 만들 이유가 없습니다. 이 순서를 지키는 것만으로 많은 접근성 문제가 애초에 생기지 않습니다.
4. 키보드만으로 쓸 수 있는가
접근성에서 빼놓을 수 없는 것이 키보드 조작입니다. 마우스를 쓸 수 없는 사용자, 손 떨림이 있는 사용자, 화면 낭독 프로그램 사용자는 대개 키보드만으로 웹을 씁니다. 그래서 페이지의 모든 기능은 키보드만으로도 쓸 수 있어야 합니다. 마우스로만 되는 기능이 있다면 그 기능은 일부 사용자에게 닫혀 있는 셈입니다.
키보드로 웹을 쓰는 사람은 특정 키로 링크와 버튼, 입력창 사이를 차례로 옮겨 다닙니다. 이때 지금 어디에 초점이 있는지가 눈에 보여야 합니다. 초점이 간 요소에 표시되는 이 테두리를 초점 표시라고 하는데, 이것이 없으면 키보드 사용자는 자기가 지금 어디에 있는지 알 수 없어 길을 잃습니다.
그런데 이 초점 표시가 보기 싫다고 없애 버리는 경우가 많습니다. 이는 키보드 사용자에게서 길잡이를 빼앗는 것이라 해서는 안 됩니다. 초점 표시의 모양이 마음에 들지 않으면 없애지 말고 더 보기 좋게 다듬는 것이 옳습니다. 저는 초점 표시를 없애는 코드를 볼 때마다 접근성 경고등이 켜집니다.
초점이 옮겨 다니는 순서도 중요합니다. 화면에서 보이는 자연스러운 순서대로 초점이 이동해야 사용자가 혼란을 겪지 않습니다. 순서를 인위적으로 뒤바꾸면 초점이 화면 여기저기로 튀어 사용자가 당황합니다. 대개는 태그를 화면에 보이는 순서대로 배치하면 초점 순서도 자연히 맞습니다.
제가 키보드만으로 제 페이지를 처음 써 본 날, 마우스 없이는 쓸 수 없는 기능들이 곳곳에 있다는 것을 깨닫고 충격을 받았습니다. 초점 표시가 없어 어디 있는지도 모르겠고, 특정 버튼은 아예 초점이 가지 않았습니다. 그 문제들을 하나씩 고치며, 키보드 접근성이 얼마나 중요한지 몸으로 배웠습니다.
정리하면 페이지의 모든 기능은 키보드만으로 쓸 수 있어야 하고, 지금 초점이 어디 있는지가 항상 눈에 보여야 합니다. 초점 표시를 지우는 것은 금물이며, 초점 순서는 자연스러워야 합니다. 이 원칙들이 지켜져야 키보드 사용자에게 웹이 열립니다.
5. 텍스트 없는 요소와 동적 알림
아이콘만 있고 글자가 없는 버튼은 접근성의 함정입니다. 눈으로 보는 사람은 돋보기 아이콘을 보고 검색 버튼이라고 짐작하지만, 소리로 듣는 사람에게는 아이콘이 아무것도 아닙니다. 그래서 글자 없이 아이콘만 있는 버튼에는 이 버튼이 무엇을 하는지 알리는 이름을 따로 붙여 주어야 합니다.
이 이름은 화면에는 보이지 않지만 화면 낭독 프로그램에게만 전달되는 방식으로 붙일 수 있습니다. 그러면 눈으로 보는 사람에게는 깔끔한 아이콘 버튼으로 보이면서, 소리로 듣는 사람에게는 검색 열기 같은 명확한 이름으로 안내됩니다. 두 부류의 사용자를 모두 만족시키는 방법입니다.
버튼 안의 아이콘 자체는 화면 낭독 프로그램에서 숨기는 것이 좋습니다. 아이콘은 이미 버튼의 이름으로 그 뜻이 전달되므로, 아이콘까지 읽으면 중복이 됩니다. 그래서 장식 역할인 아이콘은 화면 낭독 프로그램이 건너뛰도록 처리합니다. 이름은 주고 아이콘은 숨기는 조합이 깔끔합니다.
페이지가 사용자 조작 없이 스스로 바뀌는 경우도 배려해야 합니다. 예를 들어 저장이 완료되었다는 안내가 화면 한쪽에 슬쩍 뜬다고 합시다. 눈으로 보는 사람은 이 변화를 알아채지만, 소리로 듣는 사람은 초점이 다른 곳에 있으면 이 변화를 놓칩니다. 그래서 이런 동적인 변화는 화면 낭독 프로그램에게도 알려 주어야 합니다.
이런 동적 알림을 위해, 변화가 생기는 영역을 화면 낭독 프로그램이 주시하도록 표시해 둡니다. 그러면 그 영역의 내용이 바뀔 때마다 화면 낭독 프로그램이 사용자에게 바뀐 내용을 읽어 줍니다. 저장되었습니다 같은 안내가 소리로도 전해지는 것이죠. 다만 이런 알림은 꼭 필요한 것만 두어야지, 남발하면 사용자를 성가시게 합니다.
이번 편에서는 의미 있는 태그, 대체 글과 이름표, 기본 태그 우선 원칙, 키보드 조작, 그리고 텍스트 없는 요소와 동적 알림까지 접근성의 기본을 살펴봤습니다. 다음 편에서는 외부 콘텐츠를 페이지에 끼워 넣는 방법과 그 위험을 다루겠습니다. 모두에게 웹을 여는 법을 익혔으니, 이제 외부의 것을 안전하게 들이는 법을 배울 차례입니다.