반응형
span, div와 같은 비대화형 컨텐츠에 focus 기능을 추가한다.
tabindex
tabindex 특성을 갖는 요소는 포커스가 가능하며 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정한다. 정수 값을 지정할 수 있다.
| 양수(1) | tab을 이용한 키보드 탐색 시 값의 순서로 탐색된다 |
| 0 | 모든 양수 값 요소 탐색 이후에 document 소스 순서에 따라 탐색된다. |
| 음수(-1) | tab을 이용한 키보드 탐색에서 제외된다. |
tabindex: 0을 사용하는 것이 일반적인 방법인 것 같다.
주의
tabindex 값은 0 또는 음수(-1)를 권장하고 있다. 요소의 순서를 변경할 수 있는 CSS 속성 보다 큰 값을 사용할 경우 키보드 사용자가 컨트롤하기 어려워 진다고 한다.
참고
tabindex - HTML: Hypertext Markup Language | MDN
tabindex 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다.
developer.mozilla.org
반응형
'Javascript' 카테고리의 다른 글
| Turborepo 모노레포 적용하기 (1) | 2025.01.08 |
|---|---|
| 디바운싱(debouncing) / 쓰로틀링(throttling) (0) | 2024.11.14 |
| Iterator 반복 처리 (0) | 2024.06.24 |
| Javascript 정규표현식으로 URL 찾아서 변환하기 (0) | 2023.11.23 |
