CSS | outline:none; 말고 :focus-visible

웹접근성의 개념에 대해 널리 알려지지 않았을 때 포커스 라인을 제거하기 위해
아래와 같이 :focus의 outline을 지워버리는 방식을 사용했었다.

a, input, button {
  outline: 0;
}

:focus {
  outline: none;
}

이렇게 작성하면 포커스는 더이상 화면에 표시되시 않지만, 키보드만으로 브라우저를 조작해야 하는 유저는 현재 초점을 알 수 없기 때문에 문제가 된다.

이러한 문제점을 고려하여 크롬 86 버전에 추가된 :focus-visible 이란 가상 클래스(pseudo class)를 이용해 디자인을 해치지 않고 구현할 수 있다.

/* 키보드로 버튼에 포커스 시 */
button:focus-visible {
  outline: 3px solid #000;
}

/* 마우스, 터치로 버튼에 포커스 시 */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

브라우저 지원범위