tabindexBootstrap 3 의 속성은 무엇입니까 ?
문서는 실제로 모든 모달에서 사용하지만 그들에 대해 아무것도 말하지 않습니다.
나는 그것의 사용과 관련하여 이것을 찾았습니다.
키보드 및 보조 기술 사용자를위한 액세스 가능한 도구 설명
키보드로 탐색하는 사용자 및 특히 보조 기술 사용자의 경우 링크, 양식 컨트롤 또는 tabindex = "0"속성이있는 임의의 요소와 같은 키보드 중심 요소에만 도구 설명을 추가해야합니다.
그리고 속성이 아닌 경우 모달을 숨길 수 없다는esctabindex-1 것을 알았습니다 .
답변:
tabindex속성을 명시 적 페이지 내의 포커스 요소 (통상적 링크 및 형태 제어)에 대한 탐색 순서를 정의한다. 또한 요소에 초점을 맞출 지 여부를 정의하는 데 사용할 수도 있습니다.[두]
tabindex="0"및tabindex="-1"특별한 의미를 가지고 HTML의 독특한 기능을 제공합니다. 값은0요소가 기본 탐색 순서로 배치되어야 함을 나타냅니다. 이것은 기본적으로 포커스되지 않은 요소 (예 : 수<div>,<span>및<p>키보드 포커스를받을를). 물론 모든 대화 형 요소에 대해 일반적으로 링크 및 양식 컨트롤을 사용해야하지만 다른 요소에 포커스를 맞출 수 있고 상호 작용을 트리거 할 수 있습니다.
tabindex="-1"값은 기본 탐색 흐름에서 요소를 제거합니다 (즉, 사용자 수 없습니다 탭 그것에),하지만 이 프로그램 포커스를받을 수 있도록 초점 링크에서 또는 스크립트로 설정할 수 있습니다 의미합니다. **이 매우 될 수 있습니다 탭하지 않아야하는 요소에 유용하지만 포커스를 설정해야 할 수도 있습니다 .좋은 예는 모달 대화 상자 창입니다. 열릴 때 화면 판독기가 읽기 를 시작 하고 키보드가 대화 상자 내에서 탐색 을 시작 하도록 포커스를 대화 상자로 설정해야합니다 . 대화 상자 (아마도
<div>요소 일 수 있음)는 기본적으로tabindex="-1"초점을 맞출 수 없기 때문에 대화 상자를 할당하면 표시 될 때 스크립팅으로 초점을 설정할 수 있습니다.의 값은
-1화살표 키 또는 기타 바로 가기 키 를 사용하는 복잡한 위젯 및 메뉴에서도 유용 할 수 있습니다 . 위젯 내에서 하나의 요소 만 탭 키로 탐색 할 수 있지만 여전히 위젯 내의 다른 구성 요소에 포커스를 설정할 수 있습니다.
출처 : http://webaim.org/techniques/keyboard/tabindex
이것이 tabindex="-1"모달에 필요한 이유입니다. <div>사용자는 일반적인 마우스 및 키보드 단축키에 액세스 할 수 있습니다. 도움이 되었기를 바랍니다.
에서는 tabIndex 속성은 HTML과 관련된 , 그것은 부트 스트랩 특정하지 않습니다.
이 속성은 키보드 탐색으로 요소에 도달 할 수 있는지 여부를 나타냅니다.
다음과 같은 세 가지 시나리오를 찾아야합니다.
tabindex = "0"요소에 추가 할 때 이는 키보드 탐색으로 도달 할 수 있지만 순서는 문서 소스 순서에 의해 정의됨을 의미합니다.
경우 포지티브 값 가산 (예 tabindex 속성을 행 tabindex = "1", tabindex = "2") 그 요소는 키보드 조작에 의해 도달 가능하며, 순서는 속성의 값으로 정의된다.
때는 음수 추가 의 tabindex 행을 (일반적으로 tabindex="-1") 그 요소가 의미 키보드 탐색에 의해 도달 할 수없는, 그러나 JS에 포커스 기능을 사용하여 집중된다.