选项卡焦点到JavaScript中的单选按钮

Question

在关注选项卡专注于单选按钮的帮助之后，这是一些动态创建的JavaScript。我没有构建脚本，但我正在尝试为我的目的重新设计它并使其更符合WCAG2.0。

如果您选项卡，您可以看到我添加了红色虚线边框，以明显突出显示所选项目。我似乎无法弄清楚如何将焦点转移到动态脚本（测验）中的单选按钮，尝试使用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将无法在那里工作。

如果您在quiz.js中搜索<label>，则可以将其调整为与第一个示例相同，因此标签不会包含输入：

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

我还建议使用outline代替border，因为大纲不会影响您的标签布局，并且意味着您不会同时应用用户代理大纲你的边界。