Können Sie alle Optionsfelder durchblättern?

Ich habe eine Liste von Optionsfeldern. Wenn ich sie durchblättere, scheint nur das erste Optionsfeld oder das ausgewählte Optionsfeld fokussiert zu sein. Der Rest der Optionsfelder wird übersprungen. Checkbox hatte dieses Problem nicht.

http://jsfiddle.net/2Bd32/

Es fällt mir schwer, meiner Qualitätssicherung zu erklären, dass dies kein Fehler ist. Kann mir bitte jemand erklären, warum das passiert?

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"  />

Sie können das W3C hier und hier als Quelle angeben .

Ein Optionsfeld ist im Wesentlichen eine Gruppe, die als einzelnes Element fungiert, da nur ein einziger Wert beibehalten wird. Wenn Sie zu einer Radiogruppe wechseln, gelangen Sie zum ersten Element und navigieren dann mit den Pfeiltasten innerhalb der Gruppe.

• Der Fokus kann zu einer Funkgruppe verschoben werden über:
  • Die Tabulatortaste
  • Ein Zugriffsschlüssel oder eine Mnemonik für das Etikett
  • Aktivierung des Labels (durch Assistive Technology Mechanismus)
• Mit der Tabulatortaste wird der Fokus zwischen Optionsfeldgruppen und anderen Widgets verschoben.
• Wenn der Fokus auf der Gruppe liegt und kein Optionsfeld ausgewählt ist:
  • Durch Drücken der Tabulatortaste wird der Fokus auf das erste Optionsfeld in der Gruppe verschoben, das Optionsfeld wird jedoch nicht ausgewählt.
  • Durch Drücken der Umschalttaste + Tabulatortaste wird der Fokus auf das letzte Optionsfeld in der Gruppe verschoben, das Optionsfeld wird jedoch nicht ausgewählt.
• Wenn der Fokus auf die Gruppe verschoben wird, in der ein Optionsfeld ausgewählt ist, wird durch Drücken der Tabulatortaste und der Umschalttaste + Tabulatortaste der Fokus auf das aktivierte Optionsfeld verschoben.
• Aufwärts- und Abwärtspfeiltasten verschieben Fokus und Auswahl.
  • Durch Drücken der Aufwärtspfeiltaste werden Fokus und Auswahl über die Optionsfelder in der Gruppe nach vorne verschoben. Wenn das erste Optionsfeld den Fokus hat, werden Fokus und Auswahl zum letzten Optionsfeld in der Gruppe verschoben.
  • Durch Drücken der Abwärtspfeiltaste werden Fokus und Auswahl über die Optionsfelder in der Gruppe rückwärts verschoben. Wenn das letzte Optionsfeld den Fokus hat, werden Fokus und Auswahl zum ersten Optionsfeld in der Gruppe verschoben. * Durch Drücken der Leertaste wird das Optionsfeld aktiviert, das derzeit den Fokus hat.
• Beim erneuten Betreten der Gruppe kehrt der Fokus zum Punkt des vorherigen Fokus zurück (dem Element mit der festgelegten Auswahl).
• Durch Drücken der Tabulatortaste wird die Gruppe verlassen und der Fokus auf das nächste Formularsteuerelement verschoben.
• Durch Drücken der Umschalttaste + Tabulatortaste wird die Gruppe verlassen und der Fokus auf das vorherige Formularsteuerelement verschoben.

Optionsfelder mit einem Namen ähneln einem einzelnen Steuerelement (wie Eingabe oder Auswahl). Sie können den Wert mit den Pfeiltasten ändern. Die Tabulatortaste verschiebt den Fokus auf ein anderes Steuerelement.

Wenn Sie AngularJS verwenden, können Sie Radio - Button mit direkt steuern ng-modeldurch Verwendung derselben ng-modelund Entfernen name.

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

Ein weiterer Vorteil neben dem Drücken der Tabulatortaste besteht darin, dass Sie zuerst über das Optionsfeld fokussieren können, ohne es tatsächlich auszuwählen. Sie können dann durch Drücken auswählen space.

Ich bin mir nicht sicher, ob dies immer noch ein Problem für jemanden ist, aber ich habe eine Lösung gefunden. Wie oben erwähnt, ist dies kein Fehler, sondern das Standardverhalten. Wir müssen uns nur überlegen, wie wir anders mit einer Website interagieren. Wenn Sie in eine Funkgruppe von Objekten wechseln, müssen Sie die Pfeiltasten verwenden, um innerhalb dieses Eingabesatzes zu navigieren, und dann die Tabulatortaste oder die Umschalttaste + Tabulatortaste, um aus diesem Eingabesatz herauszukommen.

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

Wenn Sie mit scharfkantigem Material für Ihre Anwendung können Sie Radioknopf Tabbing in einer ermöglichen Cross-Browser - kompatible Art und Weise durch eine Zugabe tabindexzu jedem <mat-radio-button>:

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

Andernfalls können Sie in Safari keine Optionsfelder aufrufen (da dies das Standardverhalten des Browsers ist - klicken Sie hier, um eine Diskussion zu führen).