사용자 초점 관리 : 초점을 가시적으로

이것은 액세스 가능한 양식 디자인에 대한 시리즈에서 두 번째입니다. 첫 번째 할부가 놓친 경우 "의사 클래스를 사용한 액세스 가능한 양식"을 확인하십시오. 이 게시물은 의사 클래스와 웹 개발에 효과적인 사용에 중점을 둡니다.

초점 이해

:focus-visible 로 다이빙하기 전에 CSS에서 의사 클래스를 검토합시다. 는 요소와 함께 사용자 상호 작용 (키보드, 마우스, 트랙 패드 또는 보조 기술)을 시각적으로 나타냅니다. 링크, 버튼 및 형태 필드와 같은 자연적으로 대화 형 요소는 사용자 인식을 유지하기 위해 명확한 초점 지표가 필요합니다.

이 CSS를 피하십시오!

기본값

개요를 제거하면 모든

모든 사용자에 대한 중요한 시각적 피드백이 제거됩니다. 항상 초점 지표를 보존하십시오. 제거가 절대적으로 필요한 경우 시각적으로 동등한 접근 가능한 대안이 제공되도록하십시오. 설계 문제가 발생하면 액세스 가능한 솔루션을 찾기 위해 협력하십시오. :focus-visible :focus 소개 : 포커스-가시성 focus

pseudo 클래스는 와 유사한 초점 표시기를 제공하지만 사용자 경험이 향상되었습니다. 구문은 간단합니다

특정 요소의 경우 는 마우스 클릭/탭에 불필요한 시각적 혼란없이 시각적으로 인상적인 초점 표시기를 허용합니다. 구현되지 않으면 기본 브라우저 포커스 링 (종종 바람직하지 않은 것으로 간주)이 남아 있습니다. 의 역사 : 포커스 가시 가능한

이전에

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

이전에 기본 브라우저 스타일이

광범위하게 적용되어 종종 매력적인 "포커스 링"을 초래합니다. 많은 개발자 들이이 링을 제거하여 키보드 사용자를위한 접근성 문제를 실수로 생성했습니다. 최신 브라우저는 휴리스틱 (알고리즘을 찾기 위해 알고리즘)을 사용하여 사용자 입력 방법 (키보드, 마우스 등)을 기반으로 포커스 링이 유리한시기를 결정합니다. 이것은 브라우저가 초점 링을 지능적으로 적용하거나 생략한다는 것을 의미합니다. :focus 초기 구현은 공식 사양 전에 폴리 필 (Alice Boxhall 및 Brian Kardell의 )에 의존했습니다. Rob Dodson의 A11y 캐스트는이 진화에 대한 추가 통찰력을 제공합니다.

초점이 중요한 이유

명확한 초점 지표를 제공하는 것이 접근성에 가장 중요합니다. 사용자, 특히 장애가있는 사용자는 웹 페이지 내의 위치와 상호 작용을 이해해야합니다. 두 블라인드 브라더스 웹 사이트 ( https://www.php.cn/link/a21852bf267634b8db7f0633120e5620 )는 시각적 신호가 내비게이션에 필수적인 방법에 대한 강력한 예로 사용됩니다. 데모 및 코드

다음 코드는 를 보여줍니다. 포커스 링은 키보드로 탐색 할 때만 나타나 브라우저의 지능형 휴리스틱을 보여줍니다.

브라우저 지원 및 폴백

브라우저 지원은 다양합니다. 지원되지 않는 브라우저에서 폴백 스타일에 (피처 쿼리)를 사용하십시오 : :focus-visible 추가 접근성 고려 사항

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

초점 지표 색상이 WCAG 2.2 비 텍스트 대비 (레벨 AA) 지침을 충족하는지 확인하십시오. 대화식 요소에 걸쳐 일관된 스타일을 유지하여인지 과부하를 피하십시오. 브라우저 지원 (caniuse.com) : (테이블은 업데이트 된 caniuse 데이터로 여기에서 재현 될 것입니다)

추가 읽기 :

@supports https://www.php.cn/link/fdac69c3eee7bd04275353544eae235a4

<code>:focus-visible {
  /* ...styles... */
}</code>

https://www.php.cn/link/54bca824f5fa890e036fb9191bcdc324

위 내용은 사용자 초점 관리 : 초점을 가시적으로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!