웹 접근성 키보드 포커스 처리

 

디자이너분의 요청으로 포커스 라인을 제거를 하는 경우가 있습니다.

이렇게 

a, input, button {
  outline: 0;
}

:focus {
  outline: none;
}

 

이런 경우 브라우저 상에는 라인이 노출 되지 않게 됩니다.

시각장애인 등 키보드만 이용해 웹사이트를 이용 할 경우 키보드 요소를 노출 시켜 주어야 합니다.

 

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