3

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

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

'quiz.js' 中需要调整一些东西，但我的 JavaScript 技能还不够好，无法弄清楚。

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

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

任何帮助都会有所帮助！

<p></p>
4

1 回答 1

3

可以专注于这些元素，单选按钮与键盘一起使用的方式是您使用 Tab 键（作为一个制表位）并使用箭头键选择一个。

作为一个测试，在 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 回答