3

いくつかの動的に作成された JavaScript にある、ラジオ ボタンへのタブ フォーカスに関するいくつかのヘルプの直後。私はスクリプトを作成しませんでしたが、目的に合わせて再設計し、WCAG2.0 に準拠させようとしています。

タブを押すと、選択した項目を明確に強調するために赤い点線の境界線が追加されていることがわかります。動的スクリプト (クイズ) のラジオ ボタンにフォーカスを移動する方法がわかりません。タブ インデックスを試し、ラベル、値、ID を追加しましたが、成功しませんでした。

「quiz.js」で何かを調整する必要がありますが、私の JavaScript スキルではそれを理解するのに十分ではありません。

quiz.js は大きいので投稿せず、すべて JSFiddle にあります。

JSFiddle: http://jsfiddle.net/C0111N5/YkRRw/

どんな助けでも役に立ちます！

<p></p>
4

1 に答える 1

3

これらの要素に焦点を当てることができます。ラジオ ボタンがキーボードで機能する方法は、タブでセットに (1 つのタブ ストップとして) 移動し、矢印キーを使用して 1 つを選択することです。

テストとして、現在のセレクターの代わりに CSS でこれを試してください。

*:focus {outline: 2px red dashed !important;}

それらの動作の違いは HTML によるもので、上部 (CSS が適用される場所) の入力は次のとおりです。

<input type="radio" name="radio" id="yes" value="yes">
<label for="yes">Yes</label>

quiz.js から生成される入力は次のとおりです。

<label><input type="radio" name="answer" data-correct="false">True</label>

ラベルが入力をラップしているため、セレクターinput[type=radio]:focus + labelはそこで機能しません。

quiz.js で検索する<label>と、最初の例と同じように機能するように調整できるため、ラベルは入力をラップしません。

var $answer = 
"<p><input type='"+settings.currentQuestion.inputTypeHTML+"'
name='answer' data-correct='"+this.correct+"'><label>"
+this.answer+"</label></p>"

outlineの代わりに を使用することもお勧めしborderます。これは、タブを移動してもアウトラインがレイアウトに影響を与えず、境界線だけでなくユーザー エージェントのアウトラインが適用されないことを意味するためです。

于 2013-09-04T11:39:36.450 に答える