CSS 팟캐스트 - 018: 포커스
웹페이지에서 사용자를 웹사이트의 기본 콘텐츠로 건너뛰는 링크를 클릭합니다. 이러한 링크를 건너뛰기 링크 또는 앵커 링크라고도 합니다. 키보드(탭 및 Enter 키)를 사용하여 해당 링크가 활성화되면 메인 콘텐츠 컨테이너 주위에 포커스 링이 표시됩니다. 이유가 무엇인가요?
이는 <main>에 tabindex="-1" 속성 값이 있으므로 프로그래매틱 방식으로 포커스를 맞출 수 있기 때문입니다.
브라우저 URL 표시줄의 #main-content가 id와 일치하므로 <main>가 타겟팅되면 프로그래매틱 포커스를 받습니다.
이러한 상황에서는 포커스 스타일을 삭제하고 싶을 수 있지만 포커스를 적절하고 주의해서 처리하면 유용하고 접근성이 높은 사용자 환경을 만드는 데 도움이 됩니다.
상호작용에 흥미를 더하는 데도 유용합니다.
포커스가 중요한 이유는 무엇인가요?
웹 개발자는 누구나 이용할 수 있고 포용적인 웹사이트를 만드는 것이 과제입니다. CSS로 액세스 가능한 포커스 상태를 만드는 것도 이러한 책임의 일부입니다.
포커스 스타일은 키보드나 스위치 컨트롤과 같은 기기를 사용하여 웹사이트를 탐색하고 상호작용하는 사용자를 지원합니다. 요소에 포커스가 설정되었지만 시각적 표시가 없으면 사용자가 포커스가 있는 위치를 놓칠 수 있습니다. 이로 인해 탐색 문제가 발생하고 잘못된 링크를 클릭하면 원치 않는 동작이 발생할 수 있습니다.
요소에 포커스를 두는 방법
<a>, <button>, <input>, <select>와 같은 특정 요소는 자동으로 포커스 가능합니다. 이러한 요소는 상호작용과 입력을 허용하는 요소입니다.
즉, 모든 양식 요소, 버튼, 링크입니다.
일반적으로 페이지에서 앞으로 이동하려면 Tab 키를, 뒤로 이동하려면 Shift + Tab 키를 사용하여 웹사이트의 포커스 가능 요소를 탐색할 수 있습니다.
tabindex이라는 HTML 속성도 있습니다. 이 속성을 사용하면 누군가 Tab 키를 누를 때마다 또는 URL의 해시 변경으로 또는 JavaScript 이벤트에 의해 포커스가 이동할 때마다 탭 색인(요소에 포커스가 맞춰지는 순서)을 변경할 수 있습니다.
HTML 요소의 tabindex가 0로 설정된 경우 탭 키를 통해 포커스를 받을 수 있으며 문서 소스 순서에 의해 정의된 전역 탭 색인을 따릅니다.
tabindex를 -1로 설정하면 프로그래매틱 방식으로만 포커스를 받을 수 있습니다. 즉, JavaScript 이벤트가 발생하거나 해시 변경(URL의 요소 id와 일치)이 발생할 때만 포커스를 받을 수 있습니다.
tabindex를 0보다 큰 값으로 설정하면 문서 소스 순서에 따라 정의된 전역 탭 색인에서 삭제됩니다.
이제 탭 순서는 tabindex 값으로 정의되므로 예를 들어 tabindex="1"가 있는 요소가 tabindex="2"가 있는 요소보다 먼저 포커스를 받습니다.
포커스 스타일 지정
요소가 포커스를 받을 때 기본 브라우저 동작은 포커스 링을 표시하는 것입니다. 이 포커스 링은 브라우저와 운영체제에 따라 다릅니다.
이 동작은 의사 클래스 수업에서 알아본 :focus, :focus-within, :focus-visible 의사 클래스를 사용하여 CSS로 변경할 수 있습니다.
요소의 기본 스타일과 대비되는 포커스 스타일을 설정하는 것이 중요합니다.
예를 들어 일반적인 접근 방식은 outline 속성을 활용하는 것입니다.
a:focus {
outline: 2px solid slateblue;
}
outline 속성은 링크의 텍스트에 너무 가깝게 표시될 수 있지만 outline-offset 속성을 사용하면 요소가 채우는 도형 크기에 영향을 주지 않으면서 시각적인 padding를 추가할 수 있습니다.
outline-offset의 양수 값은 윤곽선을 바깥쪽으로 밀고 음수 값은 윤곽선을 안쪽으로 당깁니다.
현재 일부 브라우저에서는 요소에 border-radius를 설정하고 outline를 사용하면 일치하지 않습니다. 윤곽선에 날카로운 모서리가 생깁니다.
따라서 box-shadow가 border-radius를 준수하여 도형에 클립되므로 흐리게 처리 반경이 작은 box-shadow를 사용하고 싶지만 이 스타일은 Windows 고대비 모드에서 표시되지 않습니다.
Windows 고대비 모드는 그림자를 적용하지 않고 대부분 배경 이미지를 무시하여 사용자의 선호 설정을 따르기 때문입니다.
요약
요소의 기본 상태와 대비되는 포커스 상태를 만드는 것은 매우 중요합니다. 기본 브라우저 스타일은 이미 이 작업을 실행하지만 이 동작을 변경하려면 다음을 기억하세요.
- 키보드 포커스를 수신할 수 있는 요소에는
outline: none를 사용하지 않습니다. outline스타일을box-shadow로 대체하지 마세요. Windows 고대비 모드에는 표시되지 않습니다.- 꼭 필요한 경우에만 HTML 요소에
tabindex의 양수 값을 설정합니다. - 포커스 상태가 기본 상태와 매우 명확하게 구분되는지 확인합니다.
이해도 확인
포커스에 대한 지식 테스트
다음 중 자동으로 포커스를 받을 수 있는 요소는 무엇인가요?
<a><p><button><input><output><select>다음 중 포커스를 설정할 수 있는 입력 장치는 무엇인가요?