<button>
또는 <input>
와 같은 표준 HTML 요소에는 키보드 접근성이 내장되어 있으며 가능하면 항상 사용해야 합니다. 그러나
사용자 행동을 생성할 수 있습니다.
tabindex
을(를) 추가하는 중입니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
대화형 콘텐츠에만 tabindex
를 추가하세요. 콘텐츠가
중요한 이미지처럼 스크린 리더 사용자는 별도의 텍스트 없이도
초점을 맞춥니다.
tabindex란 무엇인가요?
경우에 따라 기본 제공 API에서 제공한 기본 탭 순서를
요소가 있는 경우 tabindex
HTML 속성을 사용하여
요소의 탭 위치를 변경합니다.
tabindex
는 모든 요소에 적용할 수 있지만 상호작용 요소에만 적용해야 하며 다양한 정수 값을 취합니다. 다음으로 바꿉니다.
tabindex
를 사용하면 포커스 가능 페이지 요소의 명시적인 순서를 지정할 수 있습니다.
포커스 불가능한 요소를 탭 순서에 삽입하거나 요소 삭제
삭제할 수 있습니다. 예를 들면 다음과 같습니다.
tabindex="0"
: 일반적인 탭 순서에 요소를 삽입합니다. 탭 키를 눌러 요소에 포커스를 맞출 수 있으며 focus()
메서드를 호출하여 요소에 포커스를 맞출 수 있습니다.
tabindex="-1"
: 일반적인 탭 순서에서 요소를 삭제하지만
focus()
메서드를 호출하여 여전히 포커스를 둘 수 있음
tabindex="5"
: 0
보다 큰 tabindex를 지정하면 해당 요소를 앞으로 가져옵니다.
순서를 변경할 수 없습니다. tabindex 값이 큰 요소가 여러 개 있는 경우
0
보다 큰 경우 탭 순서는 0보다 큰 가장 낮은 값부터 시작합니다.
잘 작동합니다. 0
보다 큰 tabindex를 사용하는 것은 안티패턴으로 간주됩니다.
키보드로 컨트롤에 액세스할 수 있는지 확인
Lighthouse와 같은 도구는 특정 접근성을 자동으로 감지하는 데 효과적입니다. 그러나 일부 테스트는 여전히 사람이 수동으로 수행해야 합니다.
Tab
키를 눌러 사이트를 탐색해 보세요. 페이지의 모든 양방향 컨트롤에 도달할 수 있나요? 그렇지 않은 경우 tabindex
을 사용하여 이러한 컨트롤의 포커스 가능성을 개선해야 할 수 있습니다.
페이지 수준에서 포커스 관리
tabindex
를 사용하면 원활한 사용자 환경을 만들 수 있습니다. 예를 들어 페이지 로드의 여러 지점에서 일부 콘텐츠가 숨겨지는 다양한 콘텐츠 섹션이 있는 강력한 단일 페이지를 빌드하는 경우 즉, 페이지 새로고침 없이 내비게이션 링크가 표시되는 콘텐츠를 변경할 수 있습니다.
이 경우 선택된 콘텐츠 영역을 식별하고 tabindex
를
-1
로 설정하고 focus
메서드를 호출합니다. 이렇게 하면
탭 순서를 변경합니다. 포커스 관리라고 하는 이 기술은
사이트의 시각적 콘텐츠와 동기화되어 사용자가 인지한 컨텍스트를 파악할 수 있습니다.
구성요소의 포커스 관리
경우에 따라 맞춤 요소.
어떤 키보드 동작을 구현할지 알기 어려울 수 있습니다. Accessible Rich Internet Applications(ARIA) Authoring Practices 가이드에는 구성요소 유형과 구성요소가 지원하는 키보드 작업의 종류가 나와 있습니다.
탭 순서에 요소 삽입
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는 현재 활성 상태인 하위 요소를 제외한 모든 하위 요소에 대해 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 패턴을 나열하고 구성요소에서 지원해야 하는 키를 식별합니다.