<button>
또는 <input>
와 같은 표준 HTML 요소에 키보드 접근성이 있음
내장되며 가능하면 항상 사용해야 합니다. 그러나
사용자 행동을 생성할 수 있습니다.
tabindex
을(를) 추가하는 중입니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 패턴을 설명하고 모든 구성요소가 지원해야 합니다.