웹 접근성 키보드 포커스 처리 outline :focus-visible

웹접근성의 개념에 대해서 널리 알려지지 않았을 때 간혹 디자이너분의 요청으로 포커스 라인을 제거하기 위해 아래와 같이 :focus의 outline을 지워버리는 방식을 사용합니다.

a, input, button {
  outline: 0;
}

:focus {
  outline: none;
}

이제 포커스가 더이상 화면에 표시되지 않지만, 키보드만으로 브라우저를 조작해야 하는 사람의 경우 현재 초점을 알 수 없기 때문에 문제가 됩니다. 절대 아무런 대체재 없이 외곽선을 지워버리면 안됩니다. 시각장애나 신체장애를 가진 사용자는 키보드만 이용해 웹사이트를 이용 할 경우 키보드로 선택한 현재 요소에 하이라이트를 줄 필요가 있습니다.

 

크롬 86 버전에 추가된 :focuis-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);
}

브라우저 지원범위 (Can I Use)