web-dev-qa-db-ja.com

<input type = "radio">ベースのタブとカルーセルの欠点は何ですか？

<input type="radio">と<input type="checkbox">の使用例の多くを、次のようなcssとともに見てきました。

input:checked + div.tab-content {display:block;}
div.tab-content {display:none;}

jsフリーのタブ、ドロップダウンなどを実装する.

これは明らかにハックですが、このアプローチの正確なUXの欠点（アクセシビリティなど）は何ですか？ブートストラップベースまたは:targetベースのタブを使用した方がいいですか？

よりよく説明するために、ここにいくつかの実装があります：

  • "css only tabs" の上位google結果
  • 別のもの
  • 別のもの 、矢印でナビゲート可能（@Alvaroなので、キーボードナビゲーションは問題ではなく、どのキーが期待されるかだけです）、私はこれまでのところ一番気に入っています。
inputtabsradio-buttons
5
Ivan

CSSとJavaScriptの両方を使用する このW3学校の例 を使用すると、タブに使用されている要素が入力ではなくボタンであることがわかります。

ここでの違いは、キーボードタブボタンを使用する場合、ラジオ入力が1つずつフォーカスされている場合、ラジオ入力は グループとしてフォーカスされている であり、上下の矢印キーを使用してナビゲートする必要があることです。 。

例では、実際の入力は非表示（display:none）およびラベルは、ユーザーがクリックできるものです（これにより、入力が自動的に選択されます）。私がテストできる限り、ラベルはフォーカスを受け取ることができないため、キーボードでラベルをナビゲートすることはできません。

1
Alvaro