html - Tab focus to radio button in JavaScript -

just after tab focusing radio button, in dynamically created javascript. didn't build script trying re-engineer purposes , make more wcag2.0 compliant.

if tab can see have added red dotted border highlight selected item. can't seem figure out how bring focus radio buttons in dynamic script (the quiz), tried tab-index, adding labels, values , id's no success.

something needs tweaked in 'quiz.js' javascript skills aren't enough figure out.

quiz.js large haven't posted, in jsfiddle.

jsfiddle: http://jsfiddle.net/c0111n5/ykrrw/

any helpful!

<p></p> 

it possible focus on elements, way radio buttons work keyboard tab set (as 1 tab stop) , use arrow keys select one.

just test, try in css instead of current selectors:

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

the difference in how work due html, input @ top (where css applies) is:

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

the input generated quiz.js is:

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

as label wrapping input selector input[type=radio]:focus + label won't work there.

if search <label> in quiz.js can adjust work same first example, label doesn't wrap input:

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

i suggest using outline instead of border, outline doesn't affect layout tab through, , means don't user-agent outline applying border.