브라우저가 그려 주는 파란 초점 링은 대부분의 디자인과 어울리지 않습니다. 그래서 outline: none 한 줄이 아주 흔하게 쓰입니다. 문제는 그 한 줄이 무엇을 없애는지입니다.
마우스 사용자에게 포인터가 있다면, 키보드 사용자에게는 초점 표시가 포인터입니다. 초점 표시를 지우면 커서를 지운 것과 같습니다. 화면은 그대로인데 자기가 어디에 있는지 알 방법이 없어지고, Tab 을 눌러도 아무 일도 일어나지 않는 것처럼 보입니다.
지우고 싶어지는 진짜 이유
초점 링을 지우는 결정은 대개 게으름이 아니라 관찰에서 나옵니다. 예전 브라우저는 마우스로 버튼을 클릭했을 때도 초점 링을 그렸습니다. 클릭할 때마다 파란 테두리가 남으니 디자이너 입장에서는 고장으로 보였고, 그래서 지웠습니다.
지금은 그 문제만 골라서 해결하는 방법이 있습니다. :focus-visible 은 브라우저가 “이 사용자에게 초점 표시가 필요하다” 고 판단했을 때만 적용됩니다 — 키보드로 이동했을 때는 나타나고, 마우스 클릭에는 나타나지 않습니다. 지우고 싶던 상황은 사라지고, 필요한 상황은 남습니다.
대체 표시를 디자인하는 세 가지 조건
직접 그리기로 했다면 세 가지를 맞춥니다.
배경색만 살짝 바꾸는 방식은 세 조건 중 둘을 놓치기 쉽습니다. 연한 틴트는 대비가 부족하고, 색 변화뿐이라 색각 이상이 있는 사용자에게는 아무 변화가 아닐 수 있습니다. 윤곽선을 그리고 요소에서 살짝 띄우는 방식이 가장 안전합니다 — 어두운 배경에서도 밝은 배경에서도 보이고, 요소의 모서리 곡선을 그대로 따라갑니다.
직접 만든 컴포넌트가 진짜 함정입니다
기본 버튼과 링크는 대체로 무사합니다. 문제는 div 로 만든 커스텀 드롭다운, 카드 전체를 감싼 클릭 영역, 이미지 갤러리의 화살표처럼 직접 조립한 것들입니다. 이런 요소는 초점을 받을 수 있게 만들지 않으면 아예 Tab 순서에 나타나지 않습니다.
디자이너 입장에서 할 일은 명확합니다. 컴포넌트 시안을 그릴 때 기본 · 마우스오버 · 초점 · 비활성 네 가지 상태를 함께 그립니다. 초점 상태가 시안에 없으면 구현에도 없습니다. 이것은 접근성 항목이 아니라 그냥 컴포넌트 명세가 덜 끝난 것입니다.
컴포넌트 상태를 명세하는 방법은 테마 · 플러그인 아카이브에서 더 다루고, 우리가 화면을 만들 때 어떤 순서로 검증하는지는 작업 과정에 공개돼 있습니다.
다음 회차
초점 표시가 보이기 시작하면 다음 질문이 자연스럽게 따라옵니다 — 그 초점은 어떤 순서로 움직이는가. 다음 회차에서 순서가 화면과 어긋나는 자리를 찾습니다.