마우스 포커스와 키보드 포커스를 구분하는 방법

HYOSEONG KIM·2021년 3월 9일

web accessibility

목록 보기

1/1

리액트 수업 중에 강사님이 이 코드에 대해 알아봐라 하셔서 적어놨다가 찾아볼 시간이 생겨 올리는 글이자 첫 velog 포스팅.

.button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(147, 153, 210, 0.56);
}
.button:focus:not(:focus-visible) {
    box-shadow: none;
}

버튼 요소에 포커스가 갔을 경우 outline에 대한 스타일링을 하지 않으면 다음과 같이 렌더링된다.

이에 따라 :focus 클래스를 사용하여 outline:none 처리를 하여 외곽선을 지워버리는데, 이 때 접근성 문제가 발생한다.

마우스를 사용하지 못하는 사용자는 키보드를 사용하여 페이지를 탐색하게 된다. :focus 클래스는 마우스 뿐 아니라, 키보드 포커싱까지 포함하기 때문에, 키보드로 페이지를 탐색하는 사용자는 어느 컨텐츠가 포커싱이 된 지 확인할 수 없게 된다.

:focus-visible 클래스는 오직 키보드 포커싱만을 캐치한다. 이 클래스를 사용하면, 마우스 포커싱과 키보드 포커싱을 나눌 수 있게 된다.

button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(147, 153, 210, 0.56);
}
button:focus:not(:focus-visible) {
    box-shadow: none;
}

이 경우 버튼은 키보드 포커스가 아닌 포커스를 받으면 그림자를 나타내지 않게 되어, 클릭될 경우에 외곽선 또는 그림자가 나타나지 않는다. 그러나, 키보드를 통해 포커스를 받을 경우 그림자가 나타나게 되어 지금 탐색중인 영역이 어딘지 알 수 있게 된다.

20210622 ~