버튼이나 링크를 클릭하면 생기는 파란 테두리(outline)가 거슬려서 outline: none으로 지워 두셨다면, 키보드로 사이트를 쓰는 사람에게는 지금 어디에 있는지 알려 주는 유일한 표시가 사라진 상태입니다.
테두리를 통째로 지우는 대신 :focus-visible을 쓰면 마우스 클릭 때는 깔끔하게, 키보드 이동 때는 또렷하게 보이도록 나눌 수 있습니다.

1. 흔히 넣는 리셋 CSS가 문제입니다

리뉴얼 의뢰로 들어온 사이트의 CSS를 열어 보면 아래 같은 코드가 공통 파일 맨 위에 들어 있는 경우가 꽤 많습니다. 디자인 시안과 다르게 보인다는 이유로 넣은 한 줄인데, 이 상태에서 Tab 키를 눌러 보면 초점이 어디로 갔는지 전혀 알 수 없습니다.

/* 이렇게 전체를 지우는 건 피하세요 */
*:focus { outline: none; }
a, button { outline: 0; }

2. :focus-visible로 상황에 따라 나누기

:focus-visible은 브라우저가 "이 초점은 보여 줘야 한다"고 판단할 때만 적용됩니다. 버튼을 마우스로 누를 때는 보통 적용되지 않고, 키보드로 이동했을 때는 적용됩니다. 입력창은 클릭으로 들어가도 타이핑을 해야 하니 표시되는 것이 정상입니다.

/* 기본 초점 표시는 그대로 두고 */
/* 키보드 초점만 브랜드 색으로 다듬기 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #cc2b2b;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 마우스 클릭 때 남는 테두리만 정리 */
button:focus:not(:focus-visible) {
  outline: none;
}

outline-offset을 주면 테두리가 버튼에서 살짝 떨어져서 디자인을 덜 해치고, 색상은 배경과 대비가 분명한 브랜드 컬러를 쓰면 됩니다. 크롬, 엣지, 파이어폭스, 사파리 최신 버전은 모두 지원하므로 지금 만드는 사이트라면 별도 대체 코드 없이 써도 됩니다.

3. 손보기 전에 확인할 것

수정한 뒤에는 마우스를 내려놓고 Tab 키만으로 메인 메뉴, 검색창, 상담 버튼까지 이동해 보세요. 중간에 초점이 사라지는 구간이 있다면 그 요소에 아직 outline: none이 남아 있거나, 클릭 이벤트만 걸린 div를 버튼처럼 쓰고 있는 경우입니다.