키보드 내비게이션

화면을 만드는 사람은 대부분 마우스를 쥔 채로 만들고, 잘 되는지 확인하는 것도 마우스로 합니다. 그래서 마우스를 쓸 수 없는 사람이 같은 화면을 어떻게 쓰는지는 아무도 확인하지 않은 채로 배포됩니다.

마우스를 쓸 수 없는 상황은 생각보다 넓습니다. 손떨림이나 근력 저하로 작은 표적을 겨누기 어려운 사용자가 있고, 화면을 보지 않고 소리로 듣는 사용자가 있습니다. 스크린 리더는 화면에 있는 것을 소리로 읽어 주는 프로그램인데, 어디를 읽을지 옮기는 수단이 키보드라서 이 사용자에게는 키보드가 곧 마우스입니다. 손목을 다쳐 한 주 동안 트랙패드를 못 쓰는 개발자도 같은 처지가 됩니다.

불편은 대개 한 문장으로 나타납니다. 페이지덱이 문서 공유 설정을 새로 낸 다음 주에 "탭 키로는 공유 버튼까지 갈 수가 없습니다" 라는 문의가 들어왔습니다. 화면에 멀쩡히 보이는 버튼이었지만 마우스로만 눌리게 만들어져 있어서, 키보드로 일하는 사용자에게는 없는 버튼이었습니다. 보이는 것과 닿을 수 있는 것이 다르다는 사실이 이런 자리에서 처음 드러납니다.

키보드 내비게이션은 그 간극을 없애자는 원칙입니다. 마우스로 되는 일은 키보드로도 되어야 합니다. WCAG는 웹 접근성의 국제 표준 지침인데, 모든 기능을 키보드로 조작할 수 있어야 한다는 조항이 그 안에 들어 있습니다.

브라우저가 조작 가능한 요소들에 순서를 매겨 두고, 탭 키를 누를 때마다 그 순서대로 초점을 한 칸씩 옮깁니다. 초점이 놓인 요소 하나가 키 입력을 받는 주인이고, 엔터나 스페이스를 누르면 그 요소가 눌립니다.

쓰는 키는 네 묶음입니다.

1. 탭 — 다음 요소로 이동합니다. 시프트를 함께 누르면 반대로 갑니다. 링크, 버튼, 입력창처럼 원래 조작을 받는 요소만 이 순서에 들어갑니다.
2. 엔터와 스페이스 — 초점이 놓인 요소를 실행합니다. 링크는 엔터로 열리고 버튼은 둘 다 받으며 체크박스는 스페이스로 켜고 끕니다.
3. 화살표 — 한 덩어리 안에서 항목을 고릅니다. 라디오 버튼 묶음이나 열린 목록처럼 여럿 중 하나를 고르는 자리는 탭이 아니라 화살표가 맡습니다. 선택지가 마흔 개인 목록에서 탭을 마흔 번 누르게 두지 않으려는 구분입니다.
4. 이스케이프 — 지금 열린 것을 닫고 원래 자리로 돌아갑니다.

여기에 두 가지 처리가 따라붙습니다. 하나는 초점을 가두는 일입니다. 모달처럼 뒤 화면을 막고 뜨는 창에서는 초점이 창 밖으로 새지 않게 잡아 둡니다. 가두지 않으면 탭을 누르는 사이 초점이 창 뒤의 버튼으로 넘어가고, 사용자는 보이지도 않는 곳을 조작하게 됩니다. 창을 닫을 때는 초점을 창을 열었던 버튼으로 되돌려 놓습니다.

다른 하나는 건너뛰기 링크입니다. 머리글 메뉴가 서른 개면 본문에 닿기까지 탭을 서른 번 눌러야 하니, 맨 앞에 본문으로 바로 가는 숨은 링크를 둡니다.

순서를 만드는 일은 대부분 시맨틱 마크업이 대신합니다. 요소의 뜻에 맞는 태그를 쓰는 작성법인데, 버튼용 태그로 만든 버튼은 아무 설정을 하지 않아도 탭 순서에 들어가고 엔터를 받습니다. 모양만 버튼처럼 꾸민 상자는 그 둘을 손으로 붙여야 하고, 대개 그 과정에서 하나가 빠집니다.

문제가 드러나는 자리는 대체로 세 곳입니다.

1. 직접 조립한 부품 — 기본 태그로는 안 되는 모양을 상자로 만든 드롭다운, 탭 메뉴, 날짜 선택기입니다. 화살표 이동 규칙과 ARIA가 함께 붙습니다. ARIA 는 지금 열려 있는지 같은 상태를 보조 기술에 알려 주는 속성 규격입니다.
2. 화면을 덮는 창 — 모달, 오른쪽에서 밀려 나오는 패널, 확인 창입니다. 초점을 옮기고 되돌리는 처리가 빠지면 창을 닫은 사용자가 문서 맨 위에서 다시 탭을 누르게 됩니다.
3. 표와 긴 목록 — 행마다 버튼이 셋씩 달린 100행짜리 표에서는 탭만으로 마지막 행에 가는 데 300번이 걸립니다. 행 사이는 화살표로 옮기고 행 안의 버튼만 탭으로 돌게 나눠 둡니다.

셋 모두에서 포커스 링이 함께 걸립니다. 지금 초점이 어디 있는지 테두리로 보여 주는 표시인데, 시안에서 지저분해 보인다고 지우면 키보드만 쓰는 사용자는 자기 위치를 모르는 채로 엔터를 누르게 됩니다. 길은 열어 두고 이정표만 치운 셈입니다.

다 갖춰진 화면은 접근성 밖에서도 값을 합니다. 같은 작업을 하루에 수십 번 하는 사용자에게는 손을 키보드에서 떼지 않는 쪽이 늘 빠릅니다.

"이 드롭다운 탭으로는 안 열려요. 마우스 손 떼고 한 번 해 보세요."

구현이 마우스 이벤트만 받고 있다는 지적입니다.

"결제까지 키보드로 못 가는 게 이번 검수에서 걸렸습니다."

접근성 점검에서 막힌 지점이 구매 흐름이라 출시 전에 고쳐야 한다는 뜻입니다.

"시안에 초점 상태가 빠져 있어서 구현하면서 저희가 정하게 됩니다."

디자인이 정해 주지 않으면 개발자가 임의로 채우고 화면마다 달라진다는 말입니다.

페이지덱에서는 새 기능 리뷰 때 민서가 마우스를 옆으로 밀어 두고 탭만으로 한 바퀴 돌아 봅니다. 공유 설정 창을 열고 권한을 바꾸고 닫는 데까지 키보드만으로 가 보는 식입니다. 지난번에는 창을 닫은 뒤 초점이 문서 맨 위로 튀는 것이 나왔고, 태오가 되돌리는 처리를 붙였습니다.

가장 흔한 오해는 이것을 소수를 위한 별도 기능으로 읽는 것입니다. 접근성 항목으로 분류돼 있으니 그렇게 보이기 쉽습니다. 하지만 키보드로 조작하는 사람에는 보조 기술 사용자뿐 아니라 입력창을 빠르게 오가는 사무 사용자와 마우스가 고장 난 사람이 함께 들어갑니다. 별도 기능으로 보면 일정이 밀릴 때 가장 먼저 빠지고, 화면을 다 만든 뒤에 초점 순서를 뜯어고치는 일은 대개 구조를 다시 짜는 일이 됩니다.

탭으로 닿기만 하면 됐다고 보는 것도 오해입니다. 확인을 탭을 눌러 보는 것으로 하니 닿는지만 보게 됩니다. 그런데 순서가 화면에 보이는 순서와 어긋나 있으면 닿아도 쓸 수 없습니다. 위에서 아래로 읽히는 양식인데 탭이 오른쪽 아래 버튼으로 먼저 갔다가 위로 올라온다면, 화면을 못 보는 사용자는 자기가 어디에 있는지 짐작할 방법이 없습니다. 닿는 것은 최소 조건이고, 순서가 읽는 순서와 같아야 쓸 수 있는 화면이 됩니다.