making quiz accessible

[mark | r]

www.neue.co.uk/quest.htm

anyone got any tips on making a multipe choice quiz accessible - how do you
make radio buttons attach to a label (becaus theres more than one of them so
how would for= work?) also would the label tag be around the text question
or the values of the radio buttons 1,2,3 etc?

Mark

 

[David Dorward]

www.neue.co.uk/quest.htm

anyone got any tips on making a multipe choice quiz accessible - how do
you make radio buttons attach to a label (becaus theres more than one of
them so how would for= work?)

Radio groups are created by adding multiple radio inputs with the same NAME.
The label element references an element based on its ID.

also would the label tag be around the text
question or the values of the radio buttons 1,2,3 etc?

Its rather difficult to associate data properly with the format. I'd
probably structure the data more along the lines:

<h2>External Focus - Strategic Thinking</h2>
<fieldset>
<legend>Anticipates, identifies and evaluates current and future business
opportunities and threats</legend>
<div>
<input type="radio" name="q1" id="q1a" value="a">
<label for="q1a">Disagree strongly</label>
</div>
<div>
<input type="radio" name="q1" id="q1b" value="b">
<label for="q1b">Disagree</label>
</div>
etc

 

[mark | r]

Radio groups are created by adding multiple radio inputs with the same NAME.
The label element references an element based on its ID.

thats my point...

Its rather difficult to associate data properly with the format. I'd
probably structure the data more along the lines:

<h2>External Focus - Strategic Thinking</h2>
<fieldset>
<legend>Anticipates, identifies and evaluates current and future business
opportunities and threats</legend>
<div>
<input type="radio" name="q1" id="q1a" value="a">
<label for="q1a">Disagree strongly</label>
</div>
<div>
<input type="radio" name="q1" id="q1b" value="b">
<label for="q1b">Disagree</label>
</div>

....hmm never thought of it like that

 

[David Dorward]

thats my point...

What is? You have a bunch of radio buttons with the same name but different
ids. What's the problem?

 

[mark | r]

What is? You have a bunch of radio buttons with the same name but different
ids. What's the problem?

i want the label to be for the group of radio buttons, i dont want 1,2,3,4
etc as independent labels next to each radio button because that doesnt make
sense visualy

mark

 

[Oli Filth]

i want the label to be for the group of radio buttons

But that's meaningless. The whole point of a form label is so that when
it receives focus (i.e. it's clicked on or whatever), it sends the focus
to its respective control.

i dont want 1,2,3,4 etc as independent labels next to each radio button
because that doesnt make sense visualy

<label> doesn't have a visual effect (AFAIK)

 

[Toby Inkster]

i want the label to be for the group of radio buttons, i dont want 1,2,3,4
etc as independent labels next to each radio button because that doesnt make
sense visualy

What makes sense visually is irrelevent in HTML. That's what CSS is for.
Label each individual radio button and then hide the labels using
display:none.

If you need to define a semantic relationship between a question and a
group of radio buttons, use another method -- e.g. table row headers.

http://examples.tobyinkster.co.uk/radio-buttons

 

[Leif K-Brooks]

http://examples.tobyinkster.co.uk/radio-buttons

Don't most aural browsers render column headers along with every row,
making the hidden-for-visual-browsers labels redundant?

 

[kchayka]

Don't most aural browsers render column headers along with every row,
making the hidden-for-visual-browsers labels redundant?

I don't know about the column headers, but I do know that most screen
readers apply screen media rules the same as graphical browsers (because
they use WinIE as the rendering engine), so display:none will make the
labels invisible to screen readers, too.

The only UAs who will "see" those labels are those with no support for
the display property - mostly text browsers and those with CSS disabled.
If the intent was to have the labels vocalized in a screen reader,
you've failed.

 

[Toby Inkster]

If the intent was to have the labels vocalized in a screen reader,
you've failed.

As I indicated, I was not intending any particular rendering -- just
posting what makes sense structurally.