Tab键聚焦到JavaScript中的单选按钮

Tab focus to radio button in JavaScript

本文关键字：单选按钮 JavaScript 聚焦 Tab      更新时间：2023-09-26

在一些关于选项卡聚焦到单选按钮的帮助之后，该单选按钮在一些动态创建的JavaScript中。我没有构建这个脚本，但我正在努力为我的目的重新设计它，使它更符合WCAG2.0。

如果你打标签，你可以看到我添加了一个红色虚线边框，以明显突出显示所选项目。我似乎不知道如何将焦点放在动态脚本（测验）中的单选按钮上，尝试标签索引，添加标签、值和id，但都没有成功。

js中有些地方需要调整，但我的JavaScript技能还不够好。

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

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

任何帮助都会有帮助！

<p></p>

可以将重点放在这些元素上，单选按钮与键盘的工作方式是制表到集合（作为一个制表位）并使用箭头键选择一个。

作为一个测试，请在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="answerswer" 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，因为大纲不会影响您制表时的布局，这意味着您不会像边框一样应用用户代理大纲。

相关文章：