모든 라디오 버튼을 탭할 수 있습니까?

모든 라디오 버튼을 탭할 수 있습니까?

---

라디오 버튼 목록이 있습니다. 탭을 탭하면 첫 번째 라디오 버튼 만 표시되거나 선택한 라디오 버튼이 포커스를 받고 나머지 라디오 버튼은 건너 뜁니다. 체크 박스에는이 문제가 없었습니다.

http://jsfiddle.net/2Bd32/

QA에게 버그가 아니라고 설명하기가 어렵습니다. 누군가가 왜 이런 일이 발생했는지 설명해 주시겠습니까?

Soccer: <input type="checkbox" name="sports" value="soccer"  tabindex="1" /><br />
Football: <input type="checkbox" name="sports" value="football"  tabindex="2" /><br /> 

<input type="radio" name="num" value="3" tabindex="3">3<br>
<input type="radio" name="num" value="4" tabindex="4">4<br>
<input type="radio" name="num" value="5" tabindex="5">5<br>
<input type="radio" name="num" value="6" tabindex="6">6<br>
<input type="radio" name="num" value="7" tabindex="7">7<br>

Baseball: <input type="checkbox" name="sports" value="baseball"  tabindex="8"  /><br /> 
Basketball: <input type="checkbox" name="sports" value="basketball"  tabindex="9"  />

---

여기 와 여기 에서 W3C를 출처로 인용 할 수 있습니다 .

기본적으로 라디오 버튼은 단일 값만 유지하므로 단일 요소로 작동하는 그룹입니다. 라디오 그룹을 탭하면 첫 번째 항목으로 이동 한 다음 그룹 내에서 탐색하는 화살표 키를 사용합니다.

• 포커스는 다음을 통해 라디오 그룹으로 이동할 수 있습니다.
  • Tab 키
  • 레이블을 대상으로하는 액세스 키 또는 니모닉
  • 라벨 활성화 (보조 기술 메커니즘을 통해)
• Tab 키는 라디오 버튼 그룹과 다른 위젯간에 포커스를 이동합니다.
• 그룹에 초점이 있고 라디오 버튼이 선택되지 않은 경우 :
  • Tab 키를 누르면 포커스가 그룹의 첫 번째 라디오 버튼으로 이동하지만 라디오 버튼은 선택되지 않습니다.
  • Shift + Tab 키를 누르면 그룹의 마지막 라디오 버튼으로 포커스가 이동하지만 라디오 버튼은 선택되지 않습니다.
• 라디오 버튼이 선택된 그룹으로 포커스가 이동하면 Tab 키와 Shift + Tab 키를 누르면 선택된 라디오 버튼으로 포커스가 이동합니다.
• 위쪽 화살표 및 아래쪽 화살표 키는 포커스와 선택을 이동합니다.
  • 위쪽 화살표 키를 누르면 그룹의 라디오 버튼을 통해 포커스와 선택이 앞으로 이동합니다. 첫 번째 라디오 버튼에 포커스가 있으면 포커스와 선택이 그룹의 마지막 라디오 버튼으로 이동합니다.
  • 아래쪽 화살표 키를 누르면 그룹의 라디오 버튼을 통해 포커스와 선택 항목이 뒤로 이동합니다. 마지막 라디오 버튼에 포커스가 있으면 포커스와 선택이 그룹의 첫 번째 라디오 버튼으로 이동합니다. * 스페이스 바 키를 누르면 현재 포커스가있는 라디오 버튼을 확인합니다.
• 그룹에 다시 들어가면 포커스가 이전 포커스 지점 (선택 설정이있는 항목)으로 돌아갑니다.
• Tab 키를 누르면 그룹이 종료되고 포커스가 다음 양식 컨트롤로 이동합니다.
• Shift + Tab 키를 누르면 그룹이 종료되고 포커스가 이전 양식 컨트롤로 이동합니다.

---

하나의 이름을 가진 라디오 버튼 은 단일 컨트롤 (입력 또는 선택과 같은)과 같으며 화살표 키로 값을 변경할 수 있으며 탭 키는 포커스를 다른 컨트롤로 이동할 수 있습니다.

---

angularjs ng-model를 사용하는 경우 same을 사용 ng-model하고 제거 하여 라디오 버튼을 직접 제어 할 수 있습니다 name.

<input type="radio" value="0" ng-model="status">
<input type="radio" value="1" ng-model="status">

이제 탭 누르기의 또 다른 장점은 실제로 선택하지 않고도 라디오 버튼을 통해 먼저 초점을 맞출 수 있다는 것입니다. 그런 다음을 눌러 선택할 수 있습니다 space.

---

이것이 여전히 누군가에게 문제인지 확실하지 않지만 해결책을 찾았습니다. 위에서 언급했듯이 이것은 버그가 아니며 기본 동작입니다. 우리는 웹 사이트와 어떻게 다르게 상호 작용하는지 생각하면됩니다. 개체의 라디오 그룹을 탭할 때 화살표 키를 사용하여 해당 입력 집합 내에서 탐색 한 다음 해당 입력 집합에서 벗어나려면 Tab 또는 Shift + Tab을 사용해야합니다.

https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-1/radio-1.html

---

응용 프로그램에 Angular Material 을 사용하는 경우 각 에를 추가하여 브라우저 간 호환 방식으로 라디오 버튼 탭을 활성화 할 수 있습니다 .tabindex<mat-radio-button>

<mat-radio-button [tabindex]="0">

그렇지 않으면 Safari에서 라디오 버튼을 탭할 수 없습니다 (기본 브라우저 동작이기 때문에 여기 를 클릭 하여 한 가지 논의).

참조 URL : https://stackoverflow.com/questions/14322564/can-you-tab-through-all-radio-buttons