[아티클 프로젝트 035] Chrome 86 업데이트 :focus-visible, Quick Focus Highlight (접근성)

Chrome 86 업데이트 :focus-visible, Quick Focus Highlight (접근성)

 

:focus-visible

• :focus와 같아 보일 수 있으나 :focus-visible은 키보드를 통해 탭할때에 스타일을 지정할 수 있다.
• :focus와 함께 사용 가능하다.
• Firefox의 :-moz-focusring과 유사한 기능을 제공하지만 동일하지 않다.
• 웹 외에 키보드 입력을 지원하는 모든 요소에서 사용된다.

 

도입이유

외관상의 이유로 클릭을 받았을때 :focus를 css로 비활성화하는 경우가 많다. 
이것은 안티패턴으로 분리된다.
:focus를 비활성화할 경우 저시력, 인지장애가 있는 사용자의 접근성 문제가 야기되기때문에 :focus와 분리된 :focus-visible이 추가되었다.

 

테스트방법

9월 3일 베타버전, 글을 작성하는 당시(9/8)는 베타버전으로 실험용 플래그 설정 후 확인 가능

1. chrome://flags/ 
2. Experimental Web Platform features 검색
3. Enabled로 변경하고 확인가능

flags 캡쳐

Syntax

:focus-visible

/ * 마우스나 터치 시 정의 * /
button:focus:not(.focus-visible) {}
  
/ * 키보드 포커스 시 정의 * /
button:focus-visible{}

 

Basic example

<input value="Default styles">
<button>Default styles</button>
<input class="focus-only" value=":focus only">
<button class="focus-only">:focus only</button>
<input class="focus-visible-only" value=":focus-visible only">
<button class="focus-visible-only">:focus-visible only</button>

input, button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;  
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

Output

코드 및 캡쳐 MDN 출처

 

Browser Support

Caniuse 출처

 

 

Quick Focus Highlight

• 사용자 기본 설정할 수 있다.
• 탭으로 탐색 시에 초점이 맞춰진 요소가 2초동안 표시 기능을 제공한다.
  • 항상켜짐모드는 아니다.
• 입력 장치에 관계없이 초점 표시를 일치하게 만들 수 있다.
• :focus 기능과는 별도며 :focus 기능 스타일을 비활성화해도 표시한다.

 

 

---

출처 및 참고

• chromium blog

  • https://blog.chromium.org/2020/09/giving-users-and-developers-more.html

• mdn

  • https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

• CSS tricks

  • https://css-tricks.com/almanac/selectors/f/focus-visible/

• Caniuse

  • https://caniuse.com/css-focus-visible