tabindex로 포커스 제어

Rob Dodson
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

<button> 또는 <input>와 같은 표준 HTML 요소에 키보드 접근성이 있음 내장되며 가능하면 항상 사용해야 합니다. 그러나 사용자 행동을 생성할 수 있습니다. tabindex을(를) 추가하는 중입니다.

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1.5 <ph type="x-smartling-placeholder">
  • Safari: 4 이하 <ph type="x-smartling-placeholder">

소스

대화형 콘텐츠에만 tabindex를 추가하세요. 콘텐츠가 중요한 이미지처럼 스크린 리더 사용자는 별도의 텍스트 없이도 초점을 맞춥니다.

tabindex란 무엇인가요?

경우에 따라 기본 제공 API에서 제공한 기본 탭 순서를 요소가 있는 경우 tabindex HTML 속성을 사용하여 요소의 탭 위치를 변경합니다.

tabindex는 모든 요소에 적용할 수 있지만 다음에만 적용되어야 합니다. 상호작용 요소를 사용하고, 정수 값 범위를 받습니다. 다음으로 바꿉니다. tabindex를 사용하면 포커스 가능 페이지 요소의 명시적인 순서를 지정할 수 있습니다. 포커스 불가능한 요소를 탭 순서에 삽입하거나 요소 삭제 삭제할 수 있습니다. 예를 들면 다음과 같습니다.

tabindex="0": 일반적인 탭 순서에 요소를 삽입합니다. 이 요소는 Tab을 눌러 요소에 포커스를 지정하고 focus() 메서드를 사용하세요.

tabindex="-1": 일반적인 탭 순서에서 요소를 삭제하지만 focus() 메서드를 호출하여 여전히 포커스를 둘 수 있음

tabindex="5": 0보다 큰 tabindex를 지정하면 해당 요소를 앞으로 가져옵니다. 순서를 변경할 수 없습니다. tabindex 값이 큰 요소가 여러 개 있는 경우 0보다 큰 경우 탭 순서는 0보다 큰 가장 낮은 값부터 시작합니다. 잘 작동합니다. 0보다 큰 tabindex를 사용하면 안티패턴

키보드를 통해 컨트롤에 액세스할 수 있는지 확인

Lighthouse와 같은 도구는 특정 접근성을 자동으로 감지하는 데 효과적입니다. 그러나 일부 테스트는 여전히 사람이 수동으로 수행해야 합니다.

Tab 키를 눌러 사이트를 탐색해 보세요. 다음 고객에게 연락할 수 있나요? 컨트롤을 어떻게 사용해야 할까요? 그렇지 않은 경우 tabindex 드림 이러한 제어 기능의 집중력을 개선할 수 있습니다

페이지 수준에서 포커스 관리

tabindex가 원활한 사용자 환경을 조성하는 데 도움이 되기도 합니다. 예를 들어 여러 콘텐츠 섹션이 있는 견고한 단일 페이지를 작성할 수 있습니다. 페이지 로드 중 여러 시점에서 콘텐츠가 숨겨집니다. 이는 다음을 의미할 수 있습니다. 탐색 링크는 페이지를 새로고침하지 않고도 표시되는 콘텐츠를 변경합니다.

이 경우 선택된 콘텐츠 영역을 식별하고 tabindex -1로 설정하고 focus 메서드를 호출합니다. 이렇게 하면 탭 순서를 변경합니다. 포커스 관리라고 하는 이 기술은 사이트의 시각적 콘텐츠와 동기화되어 사용자가 인지한 컨텍스트를 파악할 수 있습니다.

구성요소의 포커스 관리

경우에 따라 맞춤 요소.

어떤 키보드 동작을 구현할지 알기 어려울 수 있습니다. 이 ARIA (Accessible Rich Internet Applications) 작성 권장사항 가이드에는 구성 요소 유형과 구성 요소에서 지원하는 키보드 작업의 종류가 나와 있습니다.

탭 순서에 요소 삽입

tabindex="0"를 사용하여 요소를 자연스러운 탭 순서에 삽입합니다. 예를 들면 다음과 같습니다.

<div tabindex="0">Focus me with the TAB key</div>

요소에 포커스를 두려면 Tab 키를 누르거나 요소의 focus() 메서드를 호출합니다.

탭 순서에서 요소 삭제

tabindex="-1"를 사용하여 요소를 삭제합니다. 예를 들면 다음과 같습니다.

<button tabindex="-1">Can't reach me with the TAB key!</button>

이렇게 하면 자연스러운 탭 순서에서 요소가 삭제되지만, 여전히 focus() 메서드를 호출하여 포커스를 맞춥니다.

요소에 tabindex="-1"를 적용해도 하위 요소에는 영향을 미치지 않습니다. 자연스럽게 탭 순서에 있거나 tabindex 값으로 인해 탭 순서로 유지됩니다. 탭 순서에서 요소와 모든 하위 요소를 삭제하려면 WICG의 inert 폴리필을 사용합니다. 폴리필은 제안된 inert 속성의 동작을 에뮬레이션합니다. 이로 인해 보조 기술이 요소를 선택하거나 읽지 못합니다.

tabindex > 0 사용 자제

tabindex가 0보다 크면 요소가 기본 탭 앞으로 이동합니다. 있습니다. tabindex이 0보다 큰 요소가 여러 개 있는 경우 탭 0보다 큰 가장 낮은 값에서 시작하여 위로 올라갑니다.

0보다 큰 tabindex를 사용하는 것은 피해야 할 패턴으로 간주되는데 그 이유는 다음과 같습니다. 스크린 리더는 탭 순서가 아닌 DOM 순서로 페이지를 탐색합니다. 요소가 탭 순서에서 더 빨리 나오면 이전 위치로 이동해야 합니다. 할 수 있습니다.

Lighthouse를 사용하면 tabindex >로 요소를 식별할 수 있습니다. 0. 먼저 접근성 감사 (Lighthouse > 옵션 > 접근성)에서 '[tabindex] 값이 0보다 큰 요소가 없음'의 결과 있습니다.

'이동 중 tabindex' 사용

복잡한 구성요소를 빌드하는 경우 키보드를 추가해야 할 수도 있습니다. 지원한다는 것을 배웠습니다 가능하면 내장된 select 요소를 사용하세요. 그것은 포커스 가능하고 화살표 키를 사용하면 선택 가능한 추가 요소를 노출할 수 있습니다. 있습니다.

자체 구성요소에서 비슷한 함수를 구현하려면 'tabindex로 가는 중'으로 설정합니다. tabindex를 -1로 설정하면 이동 tabindex가 작동합니다. 현재 활성 상태인 하위 항목을 제외한 모든 하위 요소를 반환합니다. 그런 다음 구성요소는 키보드를 사용합니다. 이벤트 리스너로 전달하여 사용자가 어떤 키를 눌렀는지 확인합니다.

이 경우 구성요소는 이전에 포커스를 둔 하위 요소의 tabindex을 설정합니다. 포커스를 -1로 설정하고 포커스를 둘 하위 요소의 tabindex을 0으로 설정하고 focus()를 호출합니다. 메서드를 사용할 수 있습니다.

전

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

후

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

키보드 액세스 레시피

사용자 지정 구성 요소가 어떤 수준의 키보드를 지원하는지 잘 모르는 경우 자세한 내용은 ARIA 작성 관행 1.1 이 가이드에서는 일반적인 UI 패턴을 설명하고 모든 구성요소가 지원해야 합니다.