E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: ALISTAIR DUGGIN
Date: Thu, Apr 05 2018 3:17PM
Subject: Multiple choice with radio buttons - WCAG conformant markup
No previous message | Next message →

Hi,
Would a multiple choice question with radio buttons that does not use a legend for the question wrapped in a fieldset fail WCAG 2.0 AA? Is it a failure of Success Criterion 1.3.1 Info and Relationships?
eg
<div><h3>Do you wish to continue completing this response form?</h3><ul><li><label for="o6a"><input type="radio" id="o6a" name="o6" value="yes">Yes</label></li><li><label for="o6b"><input type="radio" id="o6b" name="o6" value="no">No</label></li></ul></div>
I'm looking for a WCAG conformant online survey tool and have found a couple that look pretty good apart from this issue.

cheers,Al

From: Detlev Fischer
Date: Thu, Apr 05 2018 3:35PM
Subject: Re: Multiple choice with radio buttons - WCAG conformant markup
← Previous message | Next message →

I don't see the fieldset you mention? Anyway, I would think it either needs the question as legend of a fieldset (role=group referencing the h3 via aria-labelledby may also work) or put all info needed into the label itself.
I have seen forms like this with tabindex=0 put on the question so as you tab through the form the context is pretty clear. Its a judgment call whether this should then pass. The code you quoted I'd probably fail as the h3s likely wouldn't be rendered in screen readers' forms mode, so as you tab through the survey you would need to use browse mode to establish what the question is about. Best, Detlev
> Am 05.04.2018 um 23:17 schrieb ALISTAIR DUGGIN via WebAIM-Forum < = EMAIL ADDRESS REMOVED = >:
>
> Hi,
> Would a multiple choice question with radio buttons that does not use a legend for the question wrapped in a fieldset fail WCAG 2.0 AA? Is it a failure of Success Criterion 1.3.1 Info and Relationships?
> eg
> <div><h3>Do you wish to continue completing this response form?</h3><ul><li><label for="o6a"><input type="radio" id="o6a" name="o6" value="yes">Yes</label></li><li><label for="o6b"><input type="radio" id="o6b" name="o6" value="no">No</label></li></ul></div>
> I'm looking for a WCAG conformant online survey tool and have found a couple that look pretty good apart from this issue.
>
> cheers,Al
> > > >

From: Jared Smith
Date: Thu, Apr 05 2018 4:55PM
Subject: Re: Multiple choice with radio buttons - WCAG conformant markup
← Previous message | Next message →

The <h3> in this case does provide a semantic relationship between the
question and the possible responses. I think it may be a stretch to
call this a WCAG 1.3.1 failure, though a fieldset/legend is clearly
much better (though these weren't supported by many screen readers
until recently - and are still not supported in Chrome).

> I have seen forms like this with tabindex=0 put on the question so as you tab through the form the context is pretty clear.

I'd advise against this approach. Anything that is navigable via Tab
key should also be actionable (almost always a link or button). It
could be very confusing to the user why they are navigating to
something that doesn't do anything.

Thanks,

Jared

From: Detlev Fischer
Date: Thu, Apr 05 2018 9:50PM
Subject: Re: Multiple choice with radio buttons - WCAG conformant markup
← Previous message | Next message →

> Am 06.04.2018 um 00:55 schrieb Jared Smith < = EMAIL ADDRESS REMOVED = >:
>
>> I have seen forms like this with tabindex=0 put on the question so as you tab through the form the context is pretty clear.
>
> I'd advise against this approach. Anything that is navigable via Tab
> key should also be actionable (almost always a link or button).

Maybe I should have been clearer that this was not meant as recommended practice. All I meant was that in a survey context with a repeating pattern of questions and answers, it may still be preferable to *no* proper markup of the radio inputs at all. Others may disagree.

From: Glen Walker
Date: Sat, Apr 07 2018 7:59AM
Subject: Re: Multiple choice with radio buttons - WCAG conformant markup
← Previous message | Next message →

While the headings help, if you tab through the form, all you'll hear is "yes"/"no" with no context. You can shift+"H" on every question to go back to the heading to hear the question, but only once you've figured out the pattern.

If you were building the survey yourself, then it'd be easy to add a <div role="radiogroup" aria-labelledby="q1heading"> around the list of radio buttons. But I'm not sure you'll find a survey that does that.

Sent from my iPad

> On Apr 5, 2018, at 9:50 PM, Detlev Fischer < = EMAIL ADDRESS REMOVED = > wrote:
>
>
>>> Am 06.04.2018 um 00:55 schrieb Jared Smith < = EMAIL ADDRESS REMOVED = >:
>>>
>>> I have seen forms like this with tabindex=0 put on the question so as you tab through the form the context is pretty clear.
>>
>> I'd advise against this approach. Anything that is navigable via Tab
>> key should also be actionable (almost always a link or button).
>
> Maybe I should have been clearer that this was not meant as recommended practice. All I meant was that in a survey context with a repeating pattern of questions and answers, it may still be preferable to *no* proper markup of the radio inputs at all. Others may disagree.
> > > >

From: Birkir R. Gunnarsson
Date: Sat, Apr 07 2018 11:16AM
Subject: Re: Multiple choice with radio buttons - WCAG conformant markup
← Previous message | No next message

This accessibility comparison article says that Google Forms produces
accessible radiobuttons:
http://terrillthompson.com/blog/854

I've been able to create accessible survey questions using Survey
Monkey (admittedly I don't remember how) and Qualtrics (admittedly not
the free version)

I personally always call not using a legend or ARIA group +
aria-labelledby an accessibility defect. aXe does too if the form
controls in the group share a name attribute.
If we look at 1.3.1 the question is how clear the association is
visually, if there is a box around the question and answers we need
something equally strong programmatically, if not, I guess it can be
argued that marking the question as a heading may be good enough. This
is why accessibility is, and remains, a judgment call.
I am privileged in that I can make key decisions for my program but I
am always looking for better decisions, either stricter or more
reasonable, so I like seeing how other accessibility folks interpret
common situations.

Cheers
-B


On 4/7/18, Glen Walker < = EMAIL ADDRESS REMOVED = > wrote:
> While the headings help, if you tab through the form, all you'll hear is
> "yes"/"no" with no context. You can shift+"H" on every question to go back
> to the heading to hear the question, but only once you've figured out the
> pattern.
>
> If you were building the survey yourself, then it'd be easy to add a <div
> role="radiogroup" aria-labelledby="q1heading"> around the list of radio
> buttons. But I'm not sure you'll find a survey that does that.
>
> Sent from my iPad
>
>> On Apr 5, 2018, at 9:50 PM, Detlev Fischer < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>
>>>> Am 06.04.2018 um 00:55 schrieb Jared Smith < = EMAIL ADDRESS REMOVED = >:
>>>>
>>>> I have seen forms like this with tabindex=0 put on the question so as
>>>> you tab through the form the context is pretty clear.
>>>
>>> I'd advise against this approach. Anything that is navigable via Tab
>>> key should also be actionable (almost always a link or button).
>>
>> Maybe I should have been clearer that this was not meant as recommended
>> practice. All I meant was that in a survey context with a repeating
>> pattern of questions and answers, it may still be preferable to *no*
>> proper markup of the radio inputs at all. Others may disagree.
>> >> >> >> > > > > >


--
Work hard. Have fun. Make history.