보이는 포커스: 윤곽선을 절대 숨기지 않기

키보드 사용자는 한 번에 한 가지, 즉 어떤 컨트롤에 초점이 있는지만 볼 수 있습니다. 이처럼 눈에 보이는 표시를 초점 표시기라고 합니다. 👀

기본적으로 브라우저는 Tab을 누를 때 활성 요소 주위에 초점 외곽선을 그립니다. 이것은 현재 위치를 알려 주는 기본 표시입니다.

디자이너는 외곽선을 마음에 들어 하지 않아 삭제하는 경우가 많습니다. outline none이라는 한 가지 규칙만으로도 키보드 사용자는 즉시 현재 위치를 알 수 없게 됩니다. 아무 대체 수단 없이 배포하지 마세요.

기본 외곽선을 제거할 수는 있지만, 명확한 대체 표시를 추가하는 경우에만 해야 합니다. 초점이 있는 컨트롤이 아무 동작도 하지 않는 컨트롤과 똑같이 보이게 두지 마세요.

좋은 표시기는 쉽게 눈에 띕니다. 두꺼운 외곽선, 테두리 고리 또는 뚜렷한 색상 변화가 그 예입니다. 여기서 미묘함은 장점이 아니라 적입니다.

focus-visible 선택자는 키보드 사용자에게는 고리를 표시하고 일반적인 마우스 클릭에서는 숨깁니다. 시각적 방해 없이 안전성을 확보할 수 있습니다.

배경에 섞여 보이는 외곽선은 누구에게도 도움이 되지 않습니다. 초점 스타일은 페이지에서 눈에 띌 만큼 충분한 대비를 갖춰야 합니다.

부모 요소의 overflow hidden에 주의하세요. 초점 외곽선이 잘려 아래쪽 가장자리가 조용히 사라질 수 있습니다.

outline-offset을 사용하여 고리를 요소에서 바깥쪽으로 밀어내세요. 약간의 간격만 있어도 표시기를 훨씬 쉽게 알아볼 수 있습니다.

단순한 꾸밈이 아닙니다. WCAG는 모든 대화형 요소에 보이는 초점 표시기를 요구하므로, 이를 숨기면 준수에 실패할 수 있습니다.

가장 빠른 검사는 비용이 들지 않습니다. 페이지 전체에서 Tab을 눌러 이동해 보세요. 초점의 위치를 놓치는 순간이 있다면 표시기를 개선해야 합니다.

대체 표시 없이 초점 고리를 제거하지 마세요. focus-visible을 우선 사용하고, 충분한 대비와 간격을 제공한 다음 직접 Tab으로 검사하세요. ✅