<button> 또는 <input>와 같은 표준 HTML 요소에는 키보드 접근성이 무료로 내장되어 있습니다. 그러나 맞춤 양방향 구성요소를 빌드하는 경우에는 tabindex 속성을 사용하여 키보드에 액세스할 수 있도록 해야 합니다.
키보드로 컨트롤에 액세스할 수 있는지 확인하기
Lighthouse와 같은 도구는 특정 접근성 문제를 감지하는 데 효과적이지만 사람만 테스트할 수 있는 기능도 있습니다.
Tab 키를 눌러 사이트를 탐색해 보세요. 페이지의 모든 대화형 컨트롤에 액세스할 수 있나요? 아니면 tabindex를 사용하여 이러한 컨트롤의 포커스 가능성을 개선해야 할 수 있습니다.
탭 순서에 요소 삽입
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 폴리필을 사용해 보세요.
polyfill은 제안된 inert 속성의 동작을 에뮬레이션하여 보조 기술이 요소를 선택하거나 읽을 수 없게 합니다.
tabindex > 0 사용 자제
tabindex가 0보다 크면 요소가 일반적인 탭 순서 앞으로 이동합니다. tabindex가 0보다 큰 요소가 여러 개 있다면 탭 순서는 0보다 큰 가장 낮은 값부터 시작해서 위로 이어집니다.
0보다 큰 tabindex를 사용하면 안티패턴으로 간주됩니다. 스크린 리더는 탭 순서가 아니라 DOM 순서로 페이지를 탐색합니다. 요소가 탭 순서에서 더 먼저 나타나게 하려면 DOM의 이전 위치로 이동해야 합니다.
Lighthouse를 사용하면 tabindex가 0보다 큰 요소를 쉽게 식별할 수 있습니다. 접근성 감사 (Lighthouse > 옵션 > 접근성)를 실행하고 '[tabindex] 값이 0보다 큰 요소 없음' 감사 결과를 찾습니다.
'이동 tabindex'로 액세스 가능한 구성요소 만들기
복잡한 구성요소를 빌드하는 경우 초점 외에도 키보드 지원을 추가해야 할 수 있습니다. 내장된 select 요소를 생각해 보세요. 포커스 가능하며 화살표 키를 사용하여 추가 기능 (선택 가능한 옵션)을 노출할 수 있습니다.
자체 구성요소에 유사한 기능을 구현하려면 'tabindex 이동'이라는 기법을 사용합니다. 이동 tabindex는 현재 활성화된 하위 요소를 제외한 모든 하위 요소의 tabindex를 -1로 설정하면 작동합니다. 그런 다음 구성요소는 키보드 이벤트 리스너를 사용하여 사용자가 어떤 키를 눌렀는지 확인합니다.
이 경우 구성요소는 이전에 포커스가 지정된 하위 요소의 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 Authoring Practices 1.1을 참고하세요. 이 간단한 가이드에서는 일반적인 UI 패턴을 나열하고 구성요소에서 지원해야 하는 키를 식별합니다.