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