HTML tabindex 속성은 무엇입니까?

tabindexHTML에서 사용되는 속성 은 무엇입니까 ?

tabindex다음 두 가지를 담당 하는 전역 속성입니다 .

1. "포커스 가능"요소의 순서를 설정하고
2. 이 요소는 "포커스"합니다 .

내 마음에 두 번째 것은 첫 번째 것보다 훨씬 중요합니다. 기본적으로 초점을 맞출 수있는 요소는 거의 없습니다 (예 : <a> 및 양식 컨트롤). 개발자는 초점이 맞지 않는 요소 (<div>, <span> 등)에 JavaScript 이벤트 핸들러 (예 : 'onclick')를 추가하고 마우스 이벤트뿐만 아니라 키보드 이벤트에도 인터페이스를 반응시키는 방법을 추가합니다. (예 : 'onkeypress')는 그러한 요소를 집중 가능하게 만드는 것입니다. 마지막으로 순서를 설정하지 않고 요소 tabindex="0"를 모든 해당 요소에 집중적으로 사용하려면 다음 을 수행하십시오.

<div tabindex="0"></div>

또한 탭 키를 통해 초점을 맞추지 않으려면을 사용하십시오 tabindex="-1". 예를 들어, 탭 키를 사용하여 트래버스하는 동안 아래 링크는 초점을 맞추지 않습니다.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

사용자가 탭 버튼을 누르면 아래 예에 표시된대로 1, 2 및 3의 순서로 양식이 표시됩니다.

예를 들면 다음과 같습니다.

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

그만큼 tabindex사용자가 Tab 키를 사용하여 페이지를 탐색 할 때 따르는 순서를 정의하는 데 사용됩니다. 기본적으로 자연 탭 순서는 마크 업의 소스 순서와 일치합니다.

tabindex content 속성을 사용하면 작성자가 요소의 초점을 맞출 수 있는지 여부, 순차적 초점 탐색을 사용하여 도달 할 수 있는지 여부 및 순차적 초점 탐색을 위해 요소의 상대적 순서를 제어 할 수 있습니다. "탭 인덱스"라는 이름은 포커스 가능한 요소를 탐색하기 위해 "탭"키의 일반적인 사용에서 비롯됩니다. "테이 빙"이라는 용어는 순차적 인 포커스 네비게이션을 사용하여 도달 할 수있는 포커스 가능한 요소를 통해 전진하는 것을 의미한다.
W3C 권장 사항 : HTML5
7.4.1 절 순차적 초점 탐색 및 tabindex 속성

tabindex0에서 시작 또는 임의의 양의 정수 증분 상향. 이전 버전의 Mozilla 및 IE에서는 tabindex가 1에서 시작하여 2로 이동하고 2 이후에만 0으로 이동 한 다음 3으로 설정되므로 0 값을 피하는 것이 일반적 tabindex입니다 32767. 최대 정수 값은 입니다 . 요소가 동일 tabindex하면 tabindex는 마크 업의 소스 순서와 일치합니다. 음수 값은 요소를 탭 색인에서 제거하므로 초점이 맞지 않습니다.

요소가 할당되어있는 경우 tabindex의 -1이 요소를 제거하며 포커스 결코하지만 초점은 프로그램 사용 요소에 부여 할 수 있습니다 element.focus().

tabindex값이 없거나 비어있는 값으로 속성 을 지정하면 무시됩니다.

이 disabled있는 요소에 속성이 설정된 경우 해당 tabindex요소는 무시됩니다.

a tabindex가 코드의 나머지 부분과 관련이있는 곳과 관계없이 페이지의 아무 곳에 나 설정되어 있으면 (바닥 글, 내용 영역에있을 수 있음) 정의 된 tabindex경우 탭 순서가 요소에서 시작됩니다 이 tabindex값은 0보다 높은 가장 낮은 값 으로 명시 적으로 지정 됩니다. 그런 다음 정의 된 요소를 순환하고 명시적인 tabindex요소를 탭한 후에 만 문서의 시작 부분으로 돌아가 자연 탭 순서를 따릅니다.

HTML4 스펙에서는 다음 요소 만 tabindex 속성을 지원합니다. 닻, 지역, 단추, 입력, 목적, 고르다, 텍스트 영역. 그러나 접근성을 염두에두고 HTML5 사양을 사용하면 모든 요소를 ​​지정할 수 있습니다 tabindex.

-

예를 들어

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

와 같다

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

그들이 모두 할당되었다는 사실에 관계없이 tabindex="1", 그들은 여전히 ​​같은 순서를 따르고, 첫 번째 순서는 첫 번째 순서이고, 마지막 순서는 마지막 순서입니다. 이것도 마찬가지입니다.

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

기본 동작 인 경우 tabIndex를 명시 적으로 정의 할 필요가 없기 때문입니다. div기본적으로 A 는 초점을 맞출 수 없으며 anchor태그는 초점을 맞출 수 없습니다 .

태빙 순서 제어 ( tab페이지 내에서 키를 초점 이동) 제어

참조 : http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

설정 한 값에 따라 키보드 포커스가 웹 사이트의 요소 사이에서 이동하는 순서가 결정됩니다.

다음 예에서 탭을 처음 누르면 커서가 #foo, #awesome, #bar로 이동합니다.

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

탭 색인을 정의하지 않은 경우 키보드 포커스는 HTML 문서에 정의 된 순서대로 페이지의 HTML 태그를 따릅니다.

tabindex를 지정한 횟수보다 많이 탭하면 tabindex가없는 것처럼 (예 : HTML 태그가 나타나는 순서대로) 포커스가 이동합니다.

기본 양식 요소 초점 탐색 순서를 변경하는 데 사용할 수 있습니다.

당신이 가지고 있다면 :

text input A

text input B

submit button C

탭 키를 사용하여 A-> B-> C를 탐색하십시오. Tabindex를 사용하면 해당 흐름을 변경할 수 있습니다.

일반적으로 사용자가 양식에서 필드마다 필드를 탭할 때 (탭을 허용하는 브라우저에서 모든 브라우저가 수행하는 것은 아님) 순서는 HTML 코드에 필드가 나타나는 순서입니다.

그러나 때로는 탭 순서가 약간 다르게 흐를 수 있습니다. 이 경우 TABINDEX를 사용하여 필드 번호를 지정할 수 있습니다. 그런 다음 탭이 가장 낮은 TABINDEX에서 가장 높은 순서로 순서대로 흐릅니다.

이것에 대한 자세한 정보는 여기에서 찾을 수 있습니다 w3

또 다른 좋은 예는 여기 에서 찾을 수 있습니다

간단히 말해서, tabindex요소에 초점을 맞추는 데 사용됩니다. 구문 : tabindex="numeric_value" 이것은 numeric_value요소의 무게입니다. 낮은 값에 먼저 액세스합니다.

HTML tabindex 속성은 키보드 탐색으로 요소에 도달 할 수 있는지 표시 합니다 . 사용자가 Tab 키를 누르면 포커스가 한 요소에서 다른 요소로 이동 합니다. tabindex atribute를 사용하면 탭 순서 플로우가 이동됩니다.

컨트롤을 통한 탭 이동은 일반적으로 HTML 코드에 표시 될 때 순차적으로 발생합니다.

tabindex를 사용하면 태빙이 tabindex가 가장 낮은 컨트롤에서 tabindex가 순차적으로 가장 높은 tabindex가있는 컨트롤로 흐릅니다.