tabindex에서 HTML 요소를 무시하는 방법?

HTML에서 브라우저에 특정 요소에 대한 탭 색인 생성을 허용하지 않는 방법이 있습니까?

내 페이지에는 jQuery로 렌더링 된 사이드 쇼가 있지만 탭을 통해 탭을 탭하면 탭 컨트롤이 페이지의 다음 보이는 링크로 이동하기 전에 탭 프레스가 많이 발생합니다. 시각적으로 사용자.

사용할 수 있습니다 tabindex="-1".

W3C HTML5 사양 제외 지원 tabindex값 :

값이 음의 정수인 경우
사용자 에이전트는 요소의 tabindex 포커스 플래그를 설정해야하지만 순차적 포커스 탐색을 사용하여 요소에 도달해서는 안됩니다.

이것이 HTML5 기능이므로 이전 브라우저에서는 작동하지 않을 수 있습니다.
수 (1999) W3C HTML 4.01 표준 준수의 tabindex는 긍정적해야합니다.

순수한 HTML에서 아래의 샘플 사용법.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

tabindex스펙과 HTML에서 모두 소문자 이지만 속성이 호출 되는 Javascript / DOM 에서 잊지 마십시오 tabIndex.

프로그래밍 방식으로 변경된 탭 인덱스 호출 element.tabindex = -1이 작동하지 않는 이유를 알아 내려고 노력하지 마십시오 . 사용하십시오 element.tabIndex = -1.

이러한 요소가 버튼 및 앵커와 같이 탭 순서에서 자연스럽게 요소 인 경우 tabindex = -1로 탭 순서에서 요소를 제거하면 일종의 접근성 냄새가납니다. 중복 기능을 제공하는 경우 탭 순서에서 제거해도 괜찮습니다. 보조 요소가 무시되도록 aria-hidden = true를 이러한 요소에 추가하십시오.

당신이 지원하지 않는 브라우저에서 작업하는 경우 tabindex="-1", 당신은 정말 높은 탭 인덱스를 건너 뛸 필요가있는 것들을 제공 멀리 도망 수 있습니다 . 예를 들어 tabindex="500"기본적으로 객체의 탭 순서를 페이지 끝으로 이동합니다.

나는 중간에 버튼이 던져진 긴 데이터 입력 양식을 위해 이것을했다. 사람들이 자주 클릭하는 버튼이 아니기 때문에 실수로 탭하고 Enter 키를 누르는 것을 원하지 않았습니다. disabled버튼이기 때문에 작동하지 않습니다.

"tabIndex = -1"과 같은 해킹은 Chrome v53에서 작동하지 않습니다.

이것은 크롬 및 대부분의 브라우저에서 작동합니다.

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

이를 수행하는 방법은을 추가하는 것 tabindex="-1"입니다. 이것을 특정 요소에 추가 하면 키보드 탐색으로 접근 할 수 없게 됩니다. tabindex에 대한 이해를 돕기 위한 훌륭한 기사가 있습니다 .

disabled요소에 속성 을 추가 하거나 jQuery를 사용 하여 속성 을 지정하십시오. Disabled는 입력이 집중되거나 선택되는 것을 방지합니다.