CSS :focus-visible 가상 클래스 선택자 – 올바른 이해와 사용 방법

정의 및 사용 방법

:focus-visible 가상 클래스는
포커스 상태인 요소 중에서 브라우저가 사용자를 위해 시각적으로 포커스 상태임을 표시하는 것이 적절하다고 판단한 경우에만 해당 요소를 선택합니다.

:focus는 포커스 상태인 모든 요소를 선택하는 반면, :focus-visible은 사용자에게 시각적 포커스 표시가 꼭 필요하다고 판단될 때에만 선택한다는 점에서 차이가 있습니다.

특징

:focus-visible은 사용자 경험 측면에서 포커스 위치를 시각적으로 반드시 확인해야 하는 경우에만 포커스 표시가 나타납니다.
이러한 판단 기준은 브라우저별로 미리 내장되어 있으나, 명세에서는 해당 기준을 ‘비규범적(non-normative)’ 제안이라고 명시합니다.
이 선택자를 활용하면 :focus로 스타일링할 때 발생할 수 있는 불필요한 포커스 표시를 필터링하여, 사용자 경험을 개선할 수 있습니다.

시각적 포커스 표시 판단 기준

:focus-visible 가상 클래스 선택자의 ‘시각적 포커스 표시 판단 기준’은 명세서에서 비규범적(non-normative)으로 분류되어 있어, 브라우저별로 구체적인 동작 방식이 다를 수 있습니다.

하지만 다음과 같은 대표적인 경우에는 사용자에게 시각적 포커스 표시가 꼭 필요하다고 판단하여 선택한다는 공통점이 있습니다.

사용자가 마우스로 버튼 요소를 클릭하는 순간 해당 요소는 포커스되지만, :focus는 선택되더라도, :focus-visible은 사용자 경험 측면에서 포커스 표시가 불필요하다고 판단해 선택하지 않습니다.
하지만 사용자가 키보드 Tab 탐색처럼 포커스했을 경우 :focus-visible은 사용자 경험 측면에서 포커스 표시가 필요하다고 판단하여 해당 요소를 선택합니다.
이런 경우는 링크가 걸려있는 <a> 요소나, HTML의 tabindex 속성으로 포커스 가능하게 설정한 요소에서도 마찬가지입니다.
<input>, <textarea>, <select> 등의 컨트롤 요소는 사용자가 마우스로 클릭해 입력하거나 선택할 때에도 :focus-visible이 포커스 표시가 필요하다고 판단하여 해당 요소를 선택합니다.

예제

HTML

<p>[사용자가 키보드 Tab 탐색처럼 포커스했을 경우에만 적용되는 :focus-visible]</p>
<button>button</button>
<a href="">a</a>
<div tabindex="0">tabindex="0"</div>

<p>[사용자가 키보드 Tab 탐색 뿐만 아니라 마우스로 클릭해 입력하거나 선택할 때에도 적용되는 :focus-visible]</p>
<input type="text">
<select>
    <option>option</option>
</select>
<textarea>textarea</textarea>

실제 적용된 모습 확인하기