포커스

화면은 오래 마우스를 전제로 그려졌습니다. 포인터가 올라갔을 때의 모습인 호버는 시안에 그려졌지만, 키보드로 다니는 경우는 시안에 나타나지 않아 설계에서 빠졌습니다.

페이지덱도 그랬습니다. 브라우저가 기본으로 그려 주는 파란 테두리가 시안과 안 맞아 지웠습니다. 몇 달 뒤 문의가 들어왔습니다. 손목을 다쳐 마우스를 못 쓰던 사용자와 화면을 소리로 읽어 주는 도구를 쓰는 사용자였고, 둘의 말이 같았습니다. 탭 키로 이동하는데 지금 어디에 서 있는지 보이지 않아 엔터를 누르기가 겁난다는 것이었습니다.

마우스를 쓰는 사람에게 커서가 있는 것처럼, 쓰지 않는 사람에게는 이 표시가 커서입니다. 지우면 커서 없는 화면이 됩니다.

탭 키를 누를 때마다 선택이 다음 요소로 옮겨 가고, 지금 선택된 요소에 표시가 붙습니다. 정할 것이 다섯입니다.

1. 이동 순서. 탭이 도는 순서는 코드에 놓인 순서를 따릅니다. 보이는 배치가 코드와 다르면 탭이 화면 오른쪽 아래로 갔다가 왼쪽 위로 되돌아오므로, 순서를 손으로 지정하기보다 배치와 코드를 맞춥니다.
2. 표시 방식. 2픽셀 이상의 테두리에 배경과의 밝기 차이를 함께 줍니다. 색만 바꾸면 색을 구분하기 어려운 사람에게는 변화가 없으므로, 접근성 기준은 형태가 달라지는 표시를 요구합니다.
3. 한 화면에 하나만 둡니다. 두 곳이 강조되면 어느 쪽에서 엔터가 먹히는지 알 수 없습니다.
4. 마우스로 눌렀을 때는 표시를 감출 수 있습니다. 키보드로 이동했을 때만 테두리가 나타나게 하면 시안의 모양을 지키면서 필요한 사람에게 표시가 갑니다.
5. 열린 창 안에 묶어 둡니다. 확인 창이 떠 있는 동안 탭이 그 뒤의 화면으로 새어 나가면 사용자는 보이지 않는 곳에 서서 엔터를 누르게 됩니다. 닫을 때는 원래 자리로 돌려놓습니다.

누를 수 있는 것에는 전부 갈 수 있어야 하고, 장식에는 가지 않아야 합니다. 어긋나면 탭을 스무 번 눌러도 버튼에 닿지 못합니다.

"포커스 테두리 지우지 마세요. 키보드 쓰는 사람한테는 커서입니다."

표시를 지우면 마우스 없이 쓰는 사람이 위치를 잃는다는 지적입니다.

"탭 순서가 이상해요. 제목 다음에 갑자기 하단 버튼으로 갑니다."

보이는 배치와 코드 순서가 어긋났다는 뜻입니다.

"모달 열렸을 때 포커스가 뒤로 빠져나갑니다."

선택이 열린 창 안에 묶여 있지 않다는 말입니다.

페이지덱에서는 민서가 시안에 이 모습을 함께 그립니다. 기본 모습만 넘기면 브라우저 기본값이 그대로 남거나 지워지고, 둘 다 나중에 고치기 어렵습니다. 태오는 화면을 만든 뒤 마우스를 치우고 탭 키만으로 한 바퀴 돌아 봅니다. 빠진 자리는 대개 직접 만든 버튼과 목록 항목에서 나옵니다.