CSS :focus 가상 클래스 선택자 사용 방법

`:focus` 가상 클래스

:focus 가상 클래스는
요소가 포커스되었을 동안 해당 요소를 선택합니다.
이 기간 동안에만 미리 정의된 스타일이 적용되므로, 사용자에게 인터랙티브하고 동적인 사용자 경험을 제공합니다.

'포커스(focus)'란
요소가 키보드 입력이나 상호작용을 받을 준비가 된 상태를 나타냅니다. 주로 사용자가 탭(Tab) 키나 클릭을 통해 요소에 접근했을 때 발생합니다.

다음은 포커스되었을 동안 스타일을 활용한 간단한 예시입니다.

HTML

<form>
    <fieldset>
        <legend>이름을 입력하세요.</legend>
        <label for="user-name">Usrname</label>
        <input type="text" id="user-name" placeholder="이름 입력...">
    </fieldset>
</form>

알아두세요!
:focus 가상 클래스는 포커스된 요소 자체에만 적용됩니다.
자손이 포커스되었을 때 요소를 선택해야 하면 :focus-within 가상 클래스를 사용하세요.

:focus 가상 클래스의 형식은 다음과 같습니다.

구문

접근성 고려사항

포커스 스타일을 적용할 때는 충분히 큰 크기와 명확한 대비를 사용하여 시각적으로 잘 보이도록 해야 합니다. 특히 색맹이나 시력이 약한 사용자를 고려하여 색 대비가 높은 색상을 사용하는 것이 좋습니다.

WCAG 2.1 SC 1.4.11 Non-Text Contrast는 시각적 포커스 지시자의 대비를 최소한 3:1로 요구하고 있습니다.

또한, 위의 예시처럼 :focus의 기본 외곽선은 시각적 포커스 지시자로서 매우 중요하므로 함부로 제거해서는 안 됩니다. 만약 기본 외곽선의 스타일을 변경하고 싶다면, 기본 외곽선을 제거하는 대신 대체 외곽선을 사용해야 합니다. 대체 외곽선은 WCAG 2.1 SC 1.4.11 Non-Text Contrast 기준을 통과해야 합니다.

:focus 스타일링은 웹 접근성을 확보하는 데 매우 중요한 요소입니다. 개발자는:focus 스타일을 적용할 때 WCAG 기준을 준수하고, 시각 장애가 있는 사용자를 포함한 모든 사용자가 웹 사이트를 편리하게 이용할 수 있도록 노력해야 합니다.

WCAG(Web Content Accessibility Guidelines) 기준이란?

WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 가이드라인)는 웹 콘텐츠를 누구나 접근하고 사용할 수 있도록 하는 기술적인 지침입니다. 장애 유형이나 기술적 제약 없이 모든 사람이 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것이 목표입니다.