안녕하세요, :focus-visible!

초점 표시는 디자인에서 쉽게 간과되기 쉬운 것들 중 하나입니다. 많은 디자이너들은 기본적으로 시스템 설정에서 포커스 표시기가 비활성화된 Mac을 사용하므로 :focus 선택기의 스타일도 볼 수 없습니다.

지난 몇 년 동안 접근성은 느리지만 확실하게 커뮤니티에서 돌파구를 얻었고 포커스 상태에 대한 스타일이 적절하게 성장했습니다.

지난 주말에 Chromium의 새로운 릴리스가 출시되었습니다. 즉, Chrome, Edge 및 버전 86의 다른 모든 Chromium 기반 브라우저가 이제 :focus-visible 를 지원합니다. 2011년 Firefox가 도입된 이후-moz-focusring 처음으로 접근 가능한 포커스 스타일 지정에 대한 실질적인 발전이 있었기 때문에 이것은 대단한 일입니다!

차이점

:focus 스타일은 다소 간단합니다. 키보드 액세스의 현재 활성 대상인 경우 요소에 포커스 표시를 표시합니다. 문제는 마우스나 손가락으로 요소를 클릭할 때 요소에 초점 표시를 표시하는 것이 종종 바람직하지 않다는 것입니다. 그러나 포커스 표시를 완전히 제거하면 어떤 요소가 활성 요소인지 모르기 때문에 키보드와 함께 앱을 사용하기가 매우 어려워집니다.
:focus-visible 는 :focus 와 비슷하지만 브라우저 휴리스틱이 사용자가 키보드를 사용하고 있음을 감지한 경우에만 스타일이 활성화되므로 포커스 표시기가 표시되어야 합니다. 이제 요소를 클릭할 때 볼 필요 없이 매우 눈에 잘 띄는 스타일로 포커스 표시기를 가질 수 있기 때문에 매우 좋습니다!

약하고 강하다

내 제안은 지금부터 기본적으로 :focus 스타일로도 초점 표시가 있어야 하지만 :focus-visible 와 함께 사용할 것보다 덜 강력할 수 있다는 것입니다. 적절한 대체를 사용하면 :focus 에 대한 규칙은 :focus-visible 를 지원하지 않는 브라우저에만 사용되므로 사람들이 최신 브라우저로 이동할 때 단순히 요소를 탭하거나 클릭할 때 포커스 표시가 표시되지 않습니다.

구현

@supports를 사용할 수 없으므로 브라우저가 CSS를 이해하지 못하는 경우 CSS가 무시되는 기존 재정의를 사용해야 합니다.

/* you don't need to use CSS variables if you don't like */
:root {
    --focus-color: Highlight;
    --focus-color: -webkit-focus-ring-color;
}

/* apply weak focus indication */
a:focus {
    outline: thin dotted var(--focus-color);
    outline-offset: 1px;
}

/* disable weak focus in browsers which support focus-visible */
a:not(:-moz-focusring) { outline: none; }
a:not(:focus-visible) { outline: none; }

/* apply strong focus indication */
a:-moz-focusring {
    outline: medium solid var(--focus-color);
    outline-offset: 2px;
    -moz-outline-radius: 6px;
}
a:focus-visible {
    outline: medium solid var(--focus-color);
    outline-offset: 2px;
}

지원하지 않는 브라우저:focus-visible에서는 요소에 포커스가 있을 때마다 점선 1픽셀 윤곽선이 표시되는 반면 지원하는 브라우저에서는 키보드 액세스를 통해서만 매우 눈에 띄는 포커스 표시가 표시됩니다.

결론

지금이 :focus-visible로 마이그레이션을 시작할 때입니다! 프로젝트에 가장 적합한 일정에 따라 JavaScript 기반 구현 제거 계획을 시작할 수 있습니다.

이제 Chromium만 있으면 support rounded corners on outline ... Firefox는 비표준 공급업체 접두사를 통해서도 매우 오랫동안 수행해 왔고 수행해 왔습니다. 그러나 그것은 그것을 지원합니다. box-shadow를 사용하여 둥근 초점 링을 만드는 것은 해킹입니다.