CSS에서 `:focus`와 `:focus-visible`의 차이점 이해

CSS에서 :focus와 :focus-visible의 차이점 이해

저는 키보드 접근성의 중요성에 대해 충분히 배웠으므로 초점이 맞춰진 요소를 시각적으로 표시하는 것이 매우 중요하다는 것을 알고 있습니다. 하지만 잘 알려진 :focus 가상 클래스가 항상 이 작업에 가장 적합한 것은 아닙니다. 이것이 바로 :focus-visible이 필요한 부분입니다. 이 두 가상 클래스의 차이점을 살펴보고 이를 효과적으로 사용하기 위한 모범 사례를 살펴보겠습니다.

:focus 의사 클래스란 무엇입니까?

:focus 의사 클래스는 포커스가 트리거된 방식에 관계없이 포커스를 받는 모든 요소에 스타일을 적용하는 CSS 선택기입니다. 여기에는 키보드 탐색, 마우스 클릭, 터치 상호 작용으로 인한 포커스 이벤트가 포함됩니다.

:focus 사용법 예

button:focus {
  outline: 2px solid blue;
}

이 예에서는 사용자가 마우스로 클릭하든, 터치스크린에서 탭하든, 키보드를 사용하여 탐색하든 상관없이 버튼에 초점이 맞춰질 때마다 파란색 윤곽선이 표시됩니다.

:focus-visible 의사 클래스란 무엇입니까?

:focus-visible 의사 클래스가 더욱 전문화되었습니다. 브라우저가 포커스가 표시되어야 한다고 결정할 때만 요소에 스타일을 적용합니다. 이는 일반적으로 사용자가 마우스나 터치 입력이 아닌 키보드나 보조 기술을 통해 탐색할 때 발생합니다.

:focus-visible 사용 예

button:focus-visible {
  outline: 2px solid blue;
}

여기서 버튼은 키보드 탐색이나 일반적으로 시각적 초점 표시가 필요한 다른 입력 방법을 통해 초점을 맞춘 경우에만 파란색 윤곽선을 표시합니다.

:focus와 :focus-visible의 주요 차이점

:집중하다

• 동작: 입력 방법에 관계없이 포커스를 받는 모든 요소에 적용됩니다.
• 사용 사례: 마우스, 키보드, 터치 등 요소와의 모든 상호 작용이 시각적으로 표시되도록 합니다.

: 초점 표시

• 동작: 키보드나 보조 기술을 사용하는 등 초점이 표시되어야 하는 경우에만 스타일을 적용합니다.
• 사용 사례: 키보드 및 보조 기술 사용자에게만 초점 표시기를 제공하고 일반적으로 디자인에서 요구되는 마우스 및 터치 사용자에게는 불필요한 윤곽선을 피하려는 시나리오에 적합합니다.

접근성의 의미

:집중하다

• 장점:
• 요소에 포커스가 있을 때 모든 사용자가 볼 수 있도록 보장하며 이는 접근성에 매우 중요합니다.
• 단점:
• 마우스 상호 작용 중에 초점 스타일이 불필요하게 나타날 수 있으므로 마우스 사용자에게 최적이 아닌 경험을 제공할 수 있습니다.

: 초점 표시

• 장점:
• 필요한 경우에만 초점 표시기를 표시하여 마우스 및 터치 사용자를 위한 깔끔한 인터페이스를 유지함으로써 사용자 경험을 향상합니다.
• 키보드 및 보조 기술 사용자를 위한 환경을 맞춤화하여 명확한 시각적 신호를 제공합니다.
• 단점:
• 특히 :focus-visible을 지원하지 않는 이전 브라우저에서 포커스 표시기가 실수로 생략되지 않도록 추가 고려 사항이 필요할 수 있습니다.
  • 입력 방법에 관계없이 모든 사용자에게 포커스 표시기를 표시하고 싶은 경우가 있을 수 있습니다.

:focus 및 :focus-visible 사용 모범 사례

최고의 접근성과 사용자 경험을 얻으려면 CSS에서 :focus와 :focus-visible을 모두 결합하는 것이 좋은 생각인 경우가 많습니다.

:focus와 :focus-visible 결합

button:focus {
  outline: 2px solid blue;
}

다음은 이러한 스타일링이 어떤 모습일지 보여주는 Stackblitz의 예입니다.

추가 팁

• 키보드 및 보조 기술로 테스트: 키보드(Tab, Shift Tab 등)를 사용하여 웹 애플리케이션을 탐색할 수 있는지, 키보드를 사용하는 사용자에게 초점 표시기가 보이는지 확인하세요. e2e 테스트 제품군에 접근성 테스트를 포함시키는 것은 결코 나쁜 생각이 아닙니다.
• 명확한 초점 표시 제공: 초점 표시가 눈에 띄고 쉽게 보이도록 하세요. 미묘하거나 찾기 어려운 초점 표시는 키보드 탐색에 의존하는 사용자의 접근성에 심각한 영향을 미칠 수 있습니다.

결론

:focus-visible 의사 클래스는 포커스 표시기를 관리하는 보다 세련된 방법을 제공하여 특히 키보드 및 보조 기술 사용자의 접근성과 사용자 경험을 향상시킵니다. :focus와 :focus-visible의 차이점을 이해하고 CSS에 모범 사례를 적용하면 더 접근하기 쉽고 사용자 친화적인 웹 애플리케이션을 만들 수 있습니다.

접근성을 나중에 고려해서는 안 된다는 점을 기억하세요. 포커스 스타일을 신중하게 적용하면 모든 사용자가 사이트와 상호 작용하는 방식에 관계없이 쉽게 탐색하고 상호 작용할 수 있습니다.

위 내용은 CSS에서 `:focus`와 `:focus-visible`의 차이점 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!