CSS 팟캐스트 - 018: 집중
웹페이지에서 사용자를 웹사이트의 주요 콘텐츠로 건너뛰는 링크를 클릭합니다. 건너뛰기 링크 또는 앵커 링크라고도 합니다. 키보드로 이 링크가 활성화되면 tab 및 Enter 키를 사용하여 기본 콘텐츠 컨테이너 주위에 포커스 링이 표시됩니다. 이유가 무엇인가요?
이는 <main>에 tabindex="-1" 속성 값이 있기 때문입니다. 즉, 프로그래매틱 방식으로 포커스를 둘 수 있습니다.
브라우저 URL 표시줄의 #main-content가 id와 일치하여 <main>가 타겟팅되면 프로그래매틱 포커스를 받습니다.
이러한 상황에서는 포커스 스타일을 삭제하고 싶겠지만, 포커스를 적절하게 처리하면 접근성이 뛰어나고 우수한 사용자 환경을 만드는 데 도움이 됩니다.
또한 상호작용에 관심을 더하기에도 좋습니다.
집중이 중요한 이유는 무엇인가요?
웹 개발자는 누구나 쉽게 접근할 수 있고 포용적인 웹사이트를 만들어야 합니다. CSS로 액세스 가능한 포커스 상태를 만드는 것도 이러한 책임 중 하나입니다.
포커스 스타일은 키보드나 스위치 컨트롤과 같은 기기를 사용하여 웹사이트를 탐색하고 상호작용하는 데 도움이 됩니다. 요소가 포커스를 받고 있으며 시각적 표시가 없으면 사용자는 포커스에 있는 항목을 추적하지 못할 수 있습니다. 이렇게 하면 탐색 문제가 발생하여 잘못된 링크로 이동하는 경우 원치 않는 동작이 발생할 수 있습니다.
요소가 포커스를 얻는 방법
특정 요소는 자동으로 포커스 가능합니다. 이러한 요소는 상호작용 및 입력을 허용하는 요소(예: <a>, <button>, <input>, <select>)입니다.
간단히 말해, 모든 양식 요소, 버튼, 링크입니다.
일반적으로 웹사이트에서 포커스 가능한 요소를 탐색하려면 tab 키를, 앞으로 이동하려면 Shift + tab 키를 사용하면 됩니다.
사용자가 tab 키를 누를 때마다 또는 URL의 해시 변경으로 인해 또는 JavaScript 이벤트에 의해 포커스가 이동할 때마다 요소에 포커스가 있는 순서인 탭 색인을 변경할 수 있는 tabindex라는 HTML 속성도 있습니다.
HTML 요소의 tabindex이 0로 설정되면 tab 키를 통해 포커스를 받을 수 있으며 문서 소스 순서에 의해 정의되는 전체 탭 색인을 따릅니다.
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>다음 중 포커스를 설정할 수 있는 입력 장치는 무엇인가요?