A11y 팁: 초점 표시기를 제거하지 마십시오.

매우 자주 outline: 0를 사용하여 요소에 초점을 맞추는 효과를 제거합니다. 이것은 처음에 테두리를 클릭/터치할 때 테두리가 둘러싸는 것을 방지하므로 키보드를 사용하여 탐색하는 사용자에게는 포커스가 있는 요소에 대한 시각적 표시기가 없습니다. 그리고 우리는 그것을 압니다every interactive element needs a focus indicator.

따라서 다음 솔루션 중 일부를 사용하여 이 문제를 해결하는 것이 좋습니다.

1. 스타일 개요 속성

CSS를 사용하여 윤곽선에 원하는 효과를 부여합니다. 예를 들면 다음과 같습니다.

button:focus {
  outline: 4px dashed black;
}

2. 스타일 요소 자체

윤곽선을 제거하되 가장 적합한 CSS 속성을 사용하여 초점이 맞춰진 요소에 대한 다른 스타일을 디자인하십시오: border , background-color , text-decoration , color ... 이 옵션을 선택하는 경우 not to use the color 초점에 대한 정보를 제공하는 유일한 요소로 주의하십시오. 정상 상태와 초점 상태를 구분하지 못하는 색맹인 사람이 있을 수 있기 때문입니다.

button:focus {
  outline: none;
  /* any accessible style you want here */
}

3. 마우스 사용자 전용 외곽선 제거

마우스 사용자가 대화형 요소를 클릭/터치할 때 문제가 발생하므로 이러한 사용자에 대해서만 윤곽선을 제거하는 것이 가장 좋습니다. 운 좋게도 우리는 다음과 같이 할 수 있는 잘 지원되는 CSS 의사 클래스를 가지고 있습니다: :focus-within .

good browser support을 사용하면 이제 what과 같은 작업을 수행할 수 있습니다.

button:focus:not(:focus-visible) {
  outline:none;
}

이렇게 하면 요소를 클릭/터치하는 사용자의 외곽선만 제거하고 키보드 탐색에 동일한 의사 클래스를 사용하여 스타일을 완성할 수 있습니다.

button:focus-visible {
  outline: 4px dashed black;
}

Chris Coyier 및 Patrick H. Lauke 이 주제에 대한 아주 좋은 기사가 있습니다.