[ CSS / focus-visible ] focus vs focus-visible and focus-within

focus-visible을 찾아보다가 셋다 한번에 알아 봤다.

요약

	:focus	:focus-visible	:focus-within
선택 범주	선택받는 주체(자신:myself)	선택받는 주체(자신:myself)	선택받는 주체의 부모(부모 :parents)
활성화될 때	모든 도구(마우스, 키보드 등등)	키보드	모든 도구(마우스, 키보드 등등

 

 

:focus-visible

정의

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

w3.org에서 퍼온 내용

"키보드 조작이 가능한 모든 사용자 인터페이스에는 키보드 초점 표시기가 표시되는 작동 모드가 있습니다."

 

이점

• This Success Criterion helps anyone who relies on the keyboard to operate the page, by letting them visually determine the component on which keyboard operations will interact at any point in time.
• People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.

- 이 성공 기준은 키보드에 의존하여 페이지를 조작하는 모든 사람이 어느 시점에서 키보드 조작이 상호작용할 구성 요소를 시각적으로 확인할 수 있도록 하여 도움을 줍니다.
- 주의력 제한, 단기 기억력 제한 또는 실행 프로세스의 제한이 있는 사람은 초점이 어디에 있는지 알 수 있어 도움이 됩니다.

 

 

왜 생겨났을까? : Focus-visible

결국 마우스 사용자와 키보드 사용자의 User Exprience가 다르기 때문인 거 같다. 크게 2가지 포인트가 있는거 같다.

 

마우스 사용자 관점

1. 클릭 할 때 마다 발생하는 style은 UI를 난잡하게 만들 수 있다.

2. 마우스 사용자는 마우스 포인트를 본다. 클릭 이후 남겨진 focus는 style는 시선과 선택이 맞지 않는다.

 

키보드 사용자 관점

1. 마우스 사용자와 다르게 클릭했을 때, 테두리가 나타나지 않으면 현재 내가 어디에 있는지 모른다.

 

 

 

각각의 예시를 아래 사이트 가시면 볼 수 있음.

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

 

 

참조

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Chat-gpt