포커스 표시기 (종종 '포커스 링'으로 표시)는 초점을 맞춰야 합니다. 마우스를 사용할 수 없는 사용자의 경우 지표가 매우 중요합니다. 왜냐하면 지표는 마우스 포인터를 가져옵니다.
브라우저의 기본 포커스 표시기가 디자인과 충돌한다면 CSS를 사용하여 스타일을 다시 지정할 수 있습니다. 키보드 사용자를 염두에 두어야 합니다!
:focus를 사용하여 항상 포커스 표시기 표시
:focus
입력과 관계없이 요소에 포커스가 있을 때마다 의사 클래스가 적용됨
기기 (마우스, 키보드, 스타일러스 등) 또는 포커스를 지정하는 데 사용되는 방법입니다. 예를 들어
아래 <div>에는 포커스를 설정할 수 있는 tabindex가 있습니다. 또한
:focus 상태에 대한 맞춤 스타일로 설정합니다.
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
마우스를 사용하여 클릭하든 키보드로 탭하든 관계없이
<div>는 항상 동일하게 표시됩니다.
불행히도 브라우저는 포커스를 적용하는 방식과 일치하지 않을 수 있습니다. 또는 어떤 요소가 포커스를 받지 못하는 경우는 브라우저 및 운영체제에 따라 있습니다.
예를 들어 아래의 <button>에는 :focus의 맞춤 스타일도 있습니다.
있습니다.
button:focus {
outline: 4px dashed orange;
}
macOS의 Chrome에서 마우스로 <button>를 클릭하면
맞춤 포커스 스타일입니다. 하지만 맞춤 포커스 스타일이 표시되지 않습니다.
macOS의 Safari에서 <button>를 클릭합니다. 이는
Safari에서 요소를 클릭할 때 포커스를 받지 않습니다.
포커스의 동작이 일관되지 않으므로 약간의 테스트가 필요할 수 있습니다. 사용자가 포커스 스타일이 수용될 수 있도록 합니다.
:focus-visible를 사용하여 포커스 표시기를 선택적으로 표시
새로운
:focus-visible 드림
의사 클래스는 요소가 포커스를 받고
브라우저는 휴리스틱을 통해 포커스 표시기를 표시하는 것이
도움이 될 수 있습니다 특히 가장 최근의 사용자 상호작용이
키보드를 통해 발생했으며 키 누름에 메타(ALT / OPTION)가 포함되지 않음
또는 CONTROL 키를 누르면 :focus-visible이 일치합니다.
아래 예의 버튼은 포커스 표시기를 선택적으로 표시합니다. 만약 마우스를 사용하여 이미지를 클릭하면 결과가 다르게 나타납니다. 키보드가 있습니다.
button:focus-visible {
outline: 4px dashed orange;
}
:focus-within를 사용하여 포커스가 맞춰진 요소의 상위 요소에 스타일 지정
이
:focus-within 드림
요소 자체가
포커스 또는 해당 요소 내부의 다른 요소가 포커스를 받을 때.
페이지의 영역을 강조 표시하여 주의를 기울여야 한다는 것입니다. 예를 들어 아래 양식은 양식 자체가 선택되었을 때, 그리고 라디오 버튼이 선택합니다.
form:focus-within {
background: #ffecb3;
}
포커스 표시기를 표시하는 경우
경험 법칙은 스스로에게 질문해 보는 것이 좋습니다. "이 컨트롤을 누르면 모바일 기기를 사용할 때 키보드가 표시될 것이라고 예상하십니까?"
답이 '예'라면 컨트롤이 항상 포커스를
표시하는 데 사용되는 입력 장치와는 관계없습니다. 좋은 예는
<input type="text"> 요소 사용자는
입력 요소를 처음에 수신한 방법과 관계없이
항상 포커스 표시기를 표시하는 것이 좋습니다.
답이 '아니요'라면 컨트롤이 화면에 포커스를 맞추고자 하는 경우
표시됩니다. <button> 요소가 좋은 예입니다. 사용자가
작업이 완료되고 포커스 표시기가 작동하지 않을 수 있습니다.
필요할 수 있습니다 하지만 사용자가 키보드로 탐색하는 경우
포커스 표시기를 표시하면 사용자가
ENTER 또는 SPACE 키를 사용하여 컨트롤을 클릭합니다.
outline: none 사용 자제
솔직히 말해서 브라우저가 포커스 표시기를 그릴 시점을 결정하는 방법은
있습니다. CSS 또는 제공으로 <button> 요소의 모양 변경
tabindex 요소가 있으면 브라우저의 기본 포커스 링 동작이
시작하겠습니다.
일반적으로 피해야 할 패턴은 다음과 같이 CSS를 사용하여 포커스 표시기를 삭제하는 것입니다.
/* Don't do this!!! */
:focus {
outline: none;
}
이 문제를 해결하는 더 좋은 방법은 :focus와
:focus-visible 폴리필 아래 첫 번째 코드 블록은
폴리필이 작동하고, 그 아래의 샘플 앱은
폴리필을 사용하여 버튼의 포커스 표시기를 변경할 수 있습니다.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}