접근 가능한 포커스 상태: 보이는 키보드 포커스 디자인

포커스 상태가 중요한 이유

키보드, 스위치 장치 또는 화면 돋보기를 사용하는 사람들은 한 번에 한 페이지씩 요소를 이동합니다. 초점 표시는 그들이 어디에 있는지 알 수 있는 유일한 방법입니다. 대체하지 않고 브라우저 개요를 제거하는 것은 가장 일반적인 접근성 오류 중 하나입니다.

WCAG 2.2에 필요한 것

성공 기준 2.4.7 초점 표시(레벨 AA)에서는 키보드로 작동 가능한 모든 인터페이스에 초점 표시기가 표시되는 모드가 있어야 합니다. WCAG 2.2에는 강력한 표시기를 설명하는 2.4.13 초점 모양(레벨 AAA)이 추가되었습니다. 이는 최소한 구성 요소의 2 CSS 픽셀 두께 주변 영역만큼 크며 초점이 맞춰진 상태와 초점이 맞지 않은 상태 사이의 대비 비율이 최소 3:1입니다.

: 초점 표시

MDN는 :focus-visible은 요소에 포커스가 있고 브라우저가 휴리스틱을 사용하여 일반적으로 키보드 사용 시 포커스를 표시해야 한다고 결정할 때 적용된다고 설명합니다. 이를 통해 누군가가 마우스로 버튼을 클릭할 때마다 표시하지 않고도 키보드 사용자에게 강력한 포커스 링을 표시할 수 있습니다. 윤곽선을 제거하는 대신 사용하세요.

반지 디자인하기

실용적인 지침:

• 요소에 섞이지 않도록 외곽선이나 오프셋이 있는 링을 사용하세요.
• 요소가 나타날 수 있는 모든 배경과 대비를 확인하세요. 2색 링이 도움이 됩니다.
• 디자인 시스템에서 토큰으로 정의된 구성 요소 전체에서 일관성을 유지하세요.
• 미묘한 색상 변화에만 의존하지 마십시오.
• 초점이 맞춰진 요소가 고정 헤더 뒤에 숨겨져 있지 않은지 확인하세요.

초점과 움직임

초점 링은 매우 짧은 전환으로 나타날 수 있지만 즉각적인 느낌을 주어야 합니다. 링을 지연시키거나 요소를 이동시키는 애니메이션을 피하고, 사용자 정의 캔버스로 그린 구성 요소의 경우 키보드 사용자가 접근할 수 있도록 페이지에 실제로 포커스 가능한 요소가 있는지 확인하세요.