javascript - Tab 焦点到 JavaScript 中的单选按钮

Question

在一些帮助将选项卡聚焦到单选按钮之后，它是在一些动态创建的 JavaScript 中。我没有构建脚本，但我正在尝试根据我的目的重新设计它并使其更符合 WCAG2.0。

如果您按 Tab 键，您会看到我添加了一个红色的虚线边框以明显突出显示所选元素。我似乎无法弄清楚如何将焦点放在动态脚本(测验)中的单选按钮上，尝试了 tab-index，添加标签、值和 id，但没有成功。

“quiz.js”中有些东西需要调整，但我的 JavaScript 技能还不够好，无法解决。

quiz.js 很大，所以我没有发布，所有内容都在 JSFiddle 中。

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

任何帮助都会有帮助!

<p></p>

Answer 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不会在那里工作。

如果您搜索 <label>在 quiz.js 中，您可以将其调整为与您的第一个示例相同的工作方式，因此标签不会包装输入:

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

我还建议使用 outline而不是 border ，因为大纲不会影响您通过选项卡浏览时的布局，并且意味着您不会像边框那样应用用户代理大纲。