의미론적 HTML 요소의 DOM 위치에 의해 결정되는 기본 탭 순서는
편리하긴 하지만 탭 순서를 변경해야 하는 경우가 있을 수 있습니다. 이사
요소가 HTML에서 이상적이지만 실행 가능하지 않을 수 있습니다. 이러한 경우
tabindex HTML 속성을 사용하여 요소의 탭을 명시적으로 설정할 수 있습니다.
있습니다.
tabindex는 모든 요소에 적용할 수 있지만 반드시 그런 것은 아닙니다.
가 사용되며, 정수 값의 범위를 사용합니다. 다음으로 바꿉니다.
tabindex를 사용하면 포커스 가능 페이지 요소의 명시적인 순서를 지정할 수 있습니다.
포커스 불가능한 요소를 탭 순서에 삽입하거나 요소 삭제
삭제할 수 있습니다. 예를 들면 다음과 같습니다.
tabindex="0": 일반적인 탭 순서에 요소를 삽입합니다. 이 요소는
Tab을 눌러 요소에 포커스를 지정하고
focus() 메서드를 사용하세요.
tabindex="-1": 일반적인 탭 순서에서 요소를 삭제하지만
focus() 메서드를 호출하여 여전히 포커스를 둘 수 있습니다.
tabindex="5": 0보다 큰 tabindex를 지정하면 해당 요소를 앞으로 가져옵니다.
순서를 변경할 수 없습니다. tabindex 값이 큰 요소가 여러 개 있는 경우
0보다 큰 경우 탭 순서는 0보다 큰 가장 낮은 값부터 시작합니다.
잘 작동합니다.
헤더, 이미지 또는 기사와 같은 비입력 요소의 경우에 특히 그렇습니다.
있습니다. 가능하면 DOM 시퀀스가
논리적 탭 순서입니다. tabindex를 사용하는 경우 커스텀 대화형으로 제한하세요.
버튼, 탭, 드롭다운, 텍스트 필드와 같은 컨트롤 즉,
사용자가 입력을 제공할 것으로 예상할 수 있습니다.
대화형 콘텐츠에만 tabindex를 추가하세요. 주요 이미지와 같이 중요한 콘텐츠라도 스크린 리더 사용자는
초점을 맞춥니다.
페이지 수준에서 포커스 관리
원활한 사용자 환경을 위해 tabindex가 필요한 경우도 있습니다. 예를 들어
여러 콘텐츠 섹션이 있는 견고한 단일 페이지를 작성할 수 있습니다.
모든 콘텐츠가 동시에 표시됩니다. 이는 탐색 링크를 의미하거나
표시되는 콘텐츠를 변경할 수 있습니다.
이 경우 선택된 콘텐츠 영역을 식별하고 tabindex
-1로 설정하고 focus 메서드를 호출합니다. 이렇게 하면
탭 순서를 변경합니다. 포커스 관리라고 하는 이 기술은
사이트의 시각적 콘텐츠와 동기화되어 사용자가 인지한 컨텍스트를 파악할 수 있습니다.
구성요소의 포커스 관리
경우에 따라 커스텀 구성요소를 사용합니다
예를 들어 select 요소는 기본 포커스를 받을 수 있지만
화살표 키를 사용하여 선택 가능한 추가 옵션을 표시할 수 있습니다.
맞춤 select 요소를 빌드하는 경우 이 요소를 복제하는 것이 중요합니다.
키보드 사용자가 여전히 컨트롤과 상호작용할 수 있습니다.
어떤 키보드 동작을 구현할지 알기 어려울 수 있습니다. 이 ARIA (Accessible Rich Internet Applications) 작성 권장사항 가이드에는 구성 요소 유형과 구성 요소에서 지원하는 키보드 작업의 종류가 나와 있습니다.
맞춤 요소 작업을 하고 있을 것입니다. 라디오 버튼과 유사하지만 독특한 모양과 디자인, 있습니다.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
어떤 키보드 지원이 필요한지 알아보려면 ARIA 작성 관행 가이드를 참조하세요. 섹션 2에는 라디오 특성 표 그룹, 새 요소와 가장 근접하게 일치하는 기존 구성요소를 선택합니다.
자주 사용하는 키보드 동작 중 하나는 위쪽/아래쪽/왼쪽/오른쪽 화살표 키가 지원됩니다. 이 동작을 새 구성요소에서는 이동 tabindex라는 기법을 사용합니다.
이동 tabindex는 다음을 제외한 모든 하위 요소에 대해 tabindex를 -1로 설정하면 작동합니다.
있습니다.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
구성요소는 키보드 이벤트 리스너를 사용하여
사용자 누름 이 경우 이전에 포커스가 맞춰진 하위 요소의
tabindex를 -1로 설정하고 포커스를 둘 하위 요소의 tabindex를 0으로 설정하고
포커스 메서드를 호출합니다.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
사용자가 마지막 페이지 (또는 향하는 방향에 따라 첫 번째)에 도달하면 포커스 이동) 포커스는 첫 번째 (또는 마지막) 하위 요소로 다시 순환됨 하위 클래스입니다.
다음 예를 시도해 보세요. 다음에서 요소를 검사합니다. DevTools를 사용하여 tabindex가 라디오 버튼 사이를 이동하는지 살펴보세요.
모달 및 키보드 트랩
포커스는 복잡한 상황으로 이어질 수 있으므로 수동으로 관리하지 않는 것이 좋습니다. 포커스 관리를 시도하고 완료될 때까지 사용자가 탭을 떠나지 못하게 합니다. 이를 키보드 트랩이라고 하며 사용자에게 매우 불편할 수 있습니다.
WCAG의 2.1.2항에는 키보드 포커스를 잠그거나 갇혀 있는 문제가 발생할 수 있습니다. 사용자가 사용할 수 있습니다.
모달은 이 규칙의 예외입니다. 하지만
모달 생성 시 tabindex. inert를 사용하면 다음과 같은 작업을 할 수 있습니다.
사용자가 실수로 요소와 상호작용할 수 없도록 합니다 (의도적인
키보드 트랩) <dialog> 사용
요소를 사용하여 모바일 콘텐츠를 차단하는 동안 사용자를 위한 모달을 생성
클릭과 탭을 모달 외부에서 발생시킵니다. 따라서 사용자는
선택해야 합니다.