WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Navigation in HTML forms

for

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

From: Hadi Rangin
Date: Tue, Apr 21 2009 9:40AM
Subject: Navigation in HTML forms
No previous message | Next message →

Hello,

For many years we have been recommending to use fieldset/legend elements to
make radio buttons and check boxes accessible. With this technique you
associate each
radio or checkbox item with the proper legend element so a screen reader
user always knows what group of radio or checkbox items he is dealing with.
so far so good.

On the other hand, I have been recommending to make the question surveys a
heading (h2-h6) especially in large surveys. This would allow screen reader
users to navigate easily between questions and/or skip selected questions
using screen reader heading navigation function.

Here's the problem:

Apparently, HTMl does not allow the use of header elements inside or outside
the legend element so I can't not make my radio or checkbox question a
heading in the form. See the question 3 and 4 at:

http://illinois.edu/goto/TestSurvey

If they were using ordered list for the survey questions, there wouldn't be
a strong need to make the questions a heading because screen reader programs
offer a good navigation mechanism for lists; question numbering is hard
coded and are not coming from OL.

Here's my questions and I would be thankful if you share your feedback with
me and/or the group.

1. How many of you in particular screen reader users use the heading
navigation in a mid-size or large surveys.

2. Do you consider making survey questions a heading as a Best Practice for
mid-size or large HTML forms?
Note that in large surveys you might need to skip one or a set of survey
questions so you need a mean to easily jump over selected questions.

Thanks,
Hadi

From: Seth Kane
Date: Tue, Apr 21 2009 10:00AM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

I personally wouldn't use a H# tag for the questions. When using JAWS
users can use the short cut keys to display all the headers. This would
allow the user to bounce around from question to question rather than
follow them in sequence.

I would use the H# tag to define certain sections i.e. Required
Question, Optional Questions, Billing Information, Shipping, etc.... and
then just use the FIELDSET, LEGEND and LABEL tags to have the correct
information associate to each of the form elements.




-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Hadi Rangin
Sent: Tuesday, April 21, 2009 10:38 AM
To: WebAIM Discussion List
Subject: [WebAIM] Navigation in HTML forms

Hello,

For many years we have been recommending to use fieldset/legend elements
to
make radio buttons and check boxes accessible. With this technique you
associate each
radio or checkbox item with the proper legend element so a screen reader
user always knows what group of radio or checkbox items he is dealing
with.
so far so good.

On the other hand, I have been recommending to make the question surveys
a
heading (h2-h6) especially in large surveys. This would allow screen
reader
users to navigate easily between questions and/or skip selected
questions
using screen reader heading navigation function.

Here's the problem:

Apparently, HTMl does not allow the use of header elements inside or
outside
the legend element so I can't not make my radio or checkbox question a
heading in the form. See the question 3 and 4 at:

http://illinois.edu/goto/TestSurvey

If they were using ordered list for the survey questions, there wouldn't
be
a strong need to make the questions a heading because screen reader
programs
offer a good navigation mechanism for lists; question numbering is hard
coded and are not coming from OL.

Here's my questions and I would be thankful if you share your feedback
with
me and/or the group.

1. How many of you in particular screen reader users use the heading
navigation in a mid-size or large surveys.

2. Do you consider making survey questions a heading as a Best Practice
for
mid-size or large HTML forms?
Note that in large surveys you might need to skip one or a set of survey
questions so you need a mean to easily jump over selected questions.

Thanks,
Hadi

From: Randi
Date: Tue, Apr 21 2009 5:35PM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

I didn't know how to describe my response as a screen reader user
until I read Dave's response. I agree fully.

On 4/21/09, David Andrews < = EMAIL ADDRESS REMOVED = > wrote:
> I am a screen reader user -- and I wouldn't tend to use header
> navigation in surveys. This is primarily because surveys are
> generally one off things, that is, I do it, and am done, so may not
> be that familiar with it. That makes me less likely to use larger
> navigation jumps -- I would tend to just down arrow quickly, as I
> wouldn't necessarily know how far I had to go or skip.
>
> Dave
>
> At 10:37 AM 4/21/2009, you wrote:
>>Hello,
>>
>>For many years we have been recommending to use fieldset/legend elements to
>>make radio buttons and check boxes accessible. With this technique you
>>associate each
>>radio or checkbox item with the proper legend element so a screen reader
>>user always knows what group of radio or checkbox items he is dealing with.
>>so far so good.
>>
>>On the other hand, I have been recommending to make the question surveys a
>>heading (h2-h6) especially in large surveys. This would allow screen reader
>>users to navigate easily between questions and/or skip selected questions
>>using screen reader heading navigation function.
>>
>>Here's the problem:
>>
>>Apparently, HTMl does not allow the use of header elements inside or
>> outside
>>the legend element so I can't not make my radio or checkbox question a
>>heading in the form. See the question 3 and 4 at:
>>
>>http://illinois.edu/goto/TestSurvey
>>
>>If they were using ordered list for the survey questions, there wouldn't be
>>a strong need to make the questions a heading because screen reader
>> programs
>>offer a good navigation mechanism for lists; question numbering is hard
>>coded and are not coming from OL.
>>
>>Here's my questions and I would be thankful if you share your feedback with
>>me and/or the group.
>>
>>1. How many of you in particular screen reader users use the heading
>>navigation in a mid-size or large surveys.
>>
>>2. Do you consider making survey questions a heading as a Best Practice for
>>mid-size or large HTML forms?
>>Note that in large surveys you might need to skip one or a set of survey
>>questions so you need a mean to easily jump over selected questions.
>>
>>Thanks,
>>Hadi
>>
>>
>>

From: David Andrews
Date: Tue, Apr 21 2009 5:50PM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

I am a screen reader user -- and I wouldn't tend to use header
navigation in surveys. This is primarily because surveys are
generally one off things, that is, I do it, and am done, so may not
be that familiar with it. That makes me less likely to use larger
navigation jumps -- I would tend to just down arrow quickly, as I
wouldn't necessarily know how far I had to go or skip.

Dave

At 10:37 AM 4/21/2009, you wrote:
>Hello,
>
>For many years we have been recommending to use fieldset/legend elements to
>make radio buttons and check boxes accessible. With this technique you
>associate each
>radio or checkbox item with the proper legend element so a screen reader
>user always knows what group of radio or checkbox items he is dealing with.
>so far so good.
>
>On the other hand, I have been recommending to make the question surveys a
>heading (h2-h6) especially in large surveys. This would allow screen reader
>users to navigate easily between questions and/or skip selected questions
>using screen reader heading navigation function.
>
>Here's the problem:
>
>Apparently, HTMl does not allow the use of header elements inside or outside
>the legend element so I can't not make my radio or checkbox question a
>heading in the form. See the question 3 and 4 at:
>
>http://illinois.edu/goto/TestSurvey
>
>If they were using ordered list for the survey questions, there wouldn't be
>a strong need to make the questions a heading because screen reader programs
>offer a good navigation mechanism for lists; question numbering is hard
>coded and are not coming from OL.
>
>Here's my questions and I would be thankful if you share your feedback with
>me and/or the group.
>
>1. How many of you in particular screen reader users use the heading
>navigation in a mid-size or large surveys.
>
>2. Do you consider making survey questions a heading as a Best Practice for
>mid-size or large HTML forms?
>Note that in large surveys you might need to skip one or a set of survey
>questions so you need a mean to easily jump over selected questions.
>
>Thanks,
>Hadi
>
>
>

From: Priti Rohra
Date: Tue, Apr 21 2009 11:35PM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

Hello Hadi,

I am a screen reader user and will not recommend use of headings for
presenting survey questions. Yes but certainly relish use of headings, for
grouping of related questions in to understandable sections and mark them
using heading level markup. This will help us to understand what all the
survey includes.

As far as navigation is concerned, screen reader users will use the Arrow
keys to access the information. In case of surveys, users are mainly asked
to select from the set of options and associating check boxes and radio
buttons using fieldset and legends should serve the purpose.
In addition, for selecting checkboxes and radio button options screen reader
users no longer have to turn on "Forms Mode" either and they can navigate to
next question by simply using "Jump to different element" keystroke
supported by most of the screen readers today.

Thanks & Regards,
Priti Rohra
Accessibility Tester
Net Systems Informatics (India) Pvt. Ltd.
Web: www.n-syst.com | www.barrierbreak.com
Blog: www.barrierbreak.com/blog

Please don't print this email unless you really need to. This will preserve
trees on our planet.


----- Original Message -----
From: "Hadi Rangin" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, April 21, 2009 9:07 PM
Subject: [WebAIM] Navigation in HTML forms


> Hello,
>
> For many years we have been recommending to use fieldset/legend elements
> to
> make radio buttons and check boxes accessible. With this technique you
> associate each
> radio or checkbox item with the proper legend element so a screen reader
> user always knows what group of radio or checkbox items he is dealing
> with.
> so far so good.
>
> On the other hand, I have been recommending to make the question surveys a
> heading (h2-h6) especially in large surveys. This would allow screen
> reader
> users to navigate easily between questions and/or skip selected questions
> using screen reader heading navigation function.
>
> Here's the problem:
>
> Apparently, HTMl does not allow the use of header elements inside or
> outside
> the legend element so I can't not make my radio or checkbox question a
> heading in the form. See the question 3 and 4 at:
>
> http://illinois.edu/goto/TestSurvey
>
> If they were using ordered list for the survey questions, there wouldn't
> be
> a strong need to make the questions a heading because screen reader
> programs
> offer a good navigation mechanism for lists; question numbering is hard
> coded and are not coming from OL.
>
> Here's my questions and I would be thankful if you share your feedback
> with
> me and/or the group.
>
> 1. How many of you in particular screen reader users use the heading
> navigation in a mid-size or large surveys.
>
> 2. Do you consider making survey questions a heading as a Best Practice
> for
> mid-size or large HTML forms?
> Note that in large surveys you might need to skip one or a set of survey
> questions so you need a mean to easily jump over selected questions.
>
> Thanks,
> Hadi
>
>
>

From: Randall Pope
Date: Wed, Apr 22 2009 7:10AM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

Hi Dave and Randi,

In a survey, would it be wise to leave the heading in as an option for the
screen readers?

With Warm Regards,
Randall "Randy" Pope
American Association of the Deaf-Blind
Website: http://www.aadb.org

301 495-4402 VP/TTY
301 495-4403 Voice
301 495-4404 Fax
AIM: RandyAADB

Want to keep up with the latest news in the Deaf-Blind Community? Consider
subscribing to the monthly newsletter, "AADB Today" at http://aadb.org. It's
free and AADB membership is not required.


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of David Andrews
Sent: Tuesday, April 21, 2009 6:56 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Navigation in HTML forms

I am a screen reader user -- and I wouldn't tend to use header
navigation in surveys. This is primarily because surveys are
generally one off things, that is, I do it, and am done, so may not
be that familiar with it. That makes me less likely to use larger
navigation jumps -- I would tend to just down arrow quickly, as I
wouldn't necessarily know how far I had to go or skip.

Dave

At 10:37 AM 4/21/2009, you wrote:
>Hello,
>
>For many years we have been recommending to use fieldset/legend elements to
>make radio buttons and check boxes accessible. With this technique you
>associate each
>radio or checkbox item with the proper legend element so a screen reader
>user always knows what group of radio or checkbox items he is dealing with.
>so far so good.
>
>On the other hand, I have been recommending to make the question surveys a
>heading (h2-h6) especially in large surveys. This would allow screen reader
>users to navigate easily between questions and/or skip selected questions
>using screen reader heading navigation function.
>
>Here's the problem:
>
>Apparently, HTMl does not allow the use of header elements inside or
outside
>the legend element so I can't not make my radio or checkbox question a
>heading in the form. See the question 3 and 4 at:
>
>http://illinois.edu/goto/TestSurvey
>
>If they were using ordered list for the survey questions, there wouldn't be
>a strong need to make the questions a heading because screen reader
programs
>offer a good navigation mechanism for lists; question numbering is hard
>coded and are not coming from OL.
>
>Here's my questions and I would be thankful if you share your feedback with
>me and/or the group.
>
>1. How many of you in particular screen reader users use the heading
>navigation in a mid-size or large surveys.
>
>2. Do you consider making survey questions a heading as a Best Practice for
>mid-size or large HTML forms?
>Note that in large surveys you might need to skip one or a set of survey
>questions so you need a mean to easily jump over selected questions.
>
>Thanks,
>Hadi
>
>
>

From: Christophe Strobbe
Date: Wed, Apr 22 2009 8:10AM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

Hi Hadi,

At 17:37 21/04/2009, you wrote:
>Hello,
>
>For many years we have been recommending to use fieldset/legend elements to
>make radio buttons and check boxes accessible. With this technique you
>associate each
>radio or checkbox item with the proper legend element so a screen reader
>user always knows what group of radio or checkbox items he is dealing with.
>so far so good.
>
>On the other hand, I have been recommending to make the question surveys a
>heading (h2-h6) especially in large surveys. This would allow screen reader
>users to navigate easily between questions and/or skip selected questions
>using screen reader heading navigation function.
>
>Here's the problem:
>
>Apparently, HTMl does not allow the use of header elements inside or outside
>the legend element so I can't not make my radio or checkbox question a
>heading in the form. (...)

Indeed, HTML 4 does not allow this. My first reaction was to check whether
HTML 5 and XHTML 2 would allow this.
HTML 5 does not allow it:
<http://dev.w3.org/html5/spec/Overview.html#the-legend-element>;.
In XHTML 2, the matter is a little bit more complex because it uses
XForms. XForms doesn't use 'fieldset' and 'legend' elements;
the XForms counterparts of these HTML elements are called
'group' and 'label'. The 'label' element does not appear to allow
heading elements.

However, in both HTML 5 and XHTML 2 it should be possible to use headings
elsewhere in a form. Some commenters seem to find this helpful.

Best regards,

Christophe


--
Christophe Strobbe
K.U.Leuven - Dept. of Electrical Engineering - SCD
Research Group on Document Architectures
Kasteelpark Arenberg 10 bus 2442
B-3001 Leuven-Heverlee
BELGIUM
tel: +32 16 32 85 51
http://www.docarch.be/
---
"Better products and services through end-user empowerment"
http://www.usem-net.eu/
---
Please don't invite me to LinkedIn, Facebook, Quechup or other
"social networks". You may have agreed to their "privacy policy", but
I haven't.

From: Hadi Rangin
Date: Tue, Apr 28 2009 11:10AM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

I would like to thank everyone who responded to my question.
I was expecting that you would support the use of header element in the
survey especially in large surveys to provide a mechanism to navigate
between questions but apparently not everyone is with me on the same page.

I don't know but arrowing down in a large survey with 384 questions is not
an option for me considering the fact that everything is linearized in the
screen reader view and there will be a huge amount of the text to go over if
I have to read line by line.

And Dave, I don't understand when you say
> I would tend to just down arrow quickly, as I
> wouldn't necessarily know how far I had to go or skip.

Exactly the use of header element with questions texts could help here. Just
consider, you are reading question 4 and you decide to skip it, using your
screen reader header navigation command, you can easily skip the question 4
and land on the next question.

As I mentioned in my original e-mail, our goal is to improve our Web Best
Practices at http://html.cita.uiuc.edu
I know that many developers won't follow the Best Practices but what I
wanted to learn was indeed the use of header element with question text in a
survey is a Best Practice and we should not confuse it with our personal
habit.

Thanks again,
Hadi

----- Original Message -----
From: "David Andrews" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, April 21, 2009 5:56 PM
Subject: Re: [WebAIM] Navigation in HTML forms


>I am a screen reader user -- and I wouldn't tend to use header
> navigation in surveys. This is primarily because surveys are
> generally one off things, that is, I do it, and am done, so may not
> be that familiar with it. That makes me less likely to use larger
> navigation jumps -- I would tend to just down arrow quickly, as I
> wouldn't necessarily know how far I had to go or skip.
>
> Dave
>
> At 10:37 AM 4/21/2009, you wrote:
>>Hello,
>>
>>For many years we have been recommending to use fieldset/legend elements
>>to
>>make radio buttons and check boxes accessible. With this technique you
>>associate each
>>radio or checkbox item with the proper legend element so a screen reader
>>user always knows what group of radio or checkbox items he is dealing
>>with.
>>so far so good.
>>
>>On the other hand, I have been recommending to make the question surveys a
>>heading (h2-h6) especially in large surveys. This would allow screen
>>reader
>>users to navigate easily between questions and/or skip selected questions
>>using screen reader heading navigation function.
>>
>>Here's the problem:
>>
>>Apparently, HTMl does not allow the use of header elements inside or
>>outside
>>the legend element so I can't not make my radio or checkbox question a
>>heading in the form. See the question 3 and 4 at:
>>
>>http://illinois.edu/goto/TestSurvey
>>
>>If they were using ordered list for the survey questions, there wouldn't
>>be
>>a strong need to make the questions a heading because screen reader
>>programs
>>offer a good navigation mechanism for lists; question numbering is hard
>>coded and are not coming from OL.
>>
>>Here's my questions and I would be thankful if you share your feedback
>>with
>>me and/or the group.
>>
>>1. How many of you in particular screen reader users use the heading
>>navigation in a mid-size or large surveys.
>>
>>2. Do you consider making survey questions a heading as a Best Practice
>>for
>>mid-size or large HTML forms?
>>Note that in large surveys you might need to skip one or a set of survey
>>questions so you need a mean to easily jump over selected questions.
>>
>>Thanks,
>>Hadi
>>
>>
>>

From: Benjamin Hawkes-Lewis
Date: Tue, Apr 28 2009 12:30PM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

On 28/4/09 18:06, Hadi Rangin wrote:
> I don't know but arrowing down in a large survey with 384 questions is not
> an option for me considering the fact that everything is linearized in the
> screen reader view and there will be a huge amount of the text to go over if
> I have to read line by line.

Is answering a survey with 384 questions an option for anybody, of any
ability?

Who even writes such a survey?

--
Benjamin Hawkes-Lewis

From: David Andrews
Date: Tue, Apr 28 2009 6:35PM
Subject: Re: Navigation in HTML forms
← Previous message | Next message →

I understand what you are saying about skipping a question. However,
in an unknown site, I may not be positive about how far I will jump,
or how reliably. So, I would tend to use a more manual method for
safety reasons.

Dave

At 12:06 PM 4/28/2009, you wrote:
>I would like to thank everyone who responded to my question.
>I was expecting that you would support the use of header element in the
>survey especially in large surveys to provide a mechanism to navigate
>between questions but apparently not everyone is with me on the same page.
>
>I don't know but arrowing down in a large survey with 384 questions is not
>an option for me considering the fact that everything is linearized in the
>screen reader view and there will be a huge amount of the text to go over if
>I have to read line by line.
>
>And Dave, I don't understand when you say
> > I would tend to just down arrow quickly, as I
> > wouldn't necessarily know how far I had to go or skip.
>
>Exactly the use of header element with questions texts could help here. Just
>consider, you are reading question 4 and you decide to skip it, using your
>screen reader header navigation command, you can easily skip the question 4
>and land on the next question.
>
>As I mentioned in my original e-mail, our goal is to improve our Web Best
>Practices at http://html.cita.uiuc.edu
>I know that many developers won't follow the Best Practices but what I
>wanted to learn was indeed the use of header element with question text in a
>survey is a Best Practice and we should not confuse it with our personal
>habit.
>
>Thanks again,
>Hadi
>
>----- Original Message -----
>From: "David Andrews" < = EMAIL ADDRESS REMOVED = >
>To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>Sent: Tuesday, April 21, 2009 5:56 PM
>Subject: Re: [WebAIM] Navigation in HTML forms
>
>
> >I am a screen reader user -- and I wouldn't tend to use header
> > navigation in surveys. This is primarily because surveys are
> > generally one off things, that is, I do it, and am done, so may not
> > be that familiar with it. That makes me less likely to use larger
> > navigation jumps -- I would tend to just down arrow quickly, as I
> > wouldn't necessarily know how far I had to go or skip.
> >
> > Dave
> >
> > At 10:37 AM 4/21/2009, you wrote:
> >>Hello,
> >>
> >>For many years we have been recommending to use fieldset/legend elements
> >>to
> >>make radio buttons and check boxes accessible. With this technique you
> >>associate each
> >>radio or checkbox item with the proper legend element so a screen reader
> >>user always knows what group of radio or checkbox items he is dealing
> >>with.
> >>so far so good.
> >>
> >>On the other hand, I have been recommending to make the question surveys a
> >>heading (h2-h6) especially in large surveys. This would allow screen
> >>reader
> >>users to navigate easily between questions and/or skip selected questions
> >>using screen reader heading navigation function.
> >>
> >>Here's the problem:
> >>
> >>Apparently, HTMl does not allow the use of header elements inside or
> >>outside
> >>the legend element so I can't not make my radio or checkbox question a
> >>heading in the form. See the question 3 and 4 at:
> >>
> >>http://illinois.edu/goto/TestSurvey
> >>
> >>If they were using ordered list for the survey questions, there wouldn't
> >>be
> >>a strong need to make the questions a heading because screen reader
> >>programs
> >>offer a good navigation mechanism for lists; question numbering is hard
> >>coded and are not coming from OL.
> >>
> >>Here's my questions and I would be thankful if you share your feedback
> >>with
> >>me and/or the group.
> >>
> >>1. How many of you in particular screen reader users use the heading
> >>navigation in a mid-size or large surveys.
> >>
> >>2. Do you consider making survey questions a heading as a Best Practice
> >>for
> >>mid-size or large HTML forms?
> >>Note that in large surveys you might need to skip one or a set of survey
> >>questions so you need a mean to easily jump over selected questions.
> >>
> >>Thanks,
> >>Hadi
> >>
> >>
> >>

From: Tim Harshbarger
Date: Wed, Apr 29 2009 6:35AM
Subject: Re: Navigation in HTML forms
← Previous message | No next message

Hadi,

Just as a suggestion, for these types of questions, it might be better
to ask people using screen readers questions like "If you want to review
all the questions in a survey, how might you move from question to
question?" or "If you were on question #8, but wanted to look again at
question #2, what would be the easiest way for you to be able to read
that question again?"

Those types of questions are more likely to cause the person answering
them to have to reflect on how they have done that type of task before
or how they might expect to perform that kind of task. Additionally, it
does not provide them with a ready made answer to say "yes" or "no" to,
so they have to provide you with their own answer. That may give you a
better idea of what the end user expects which may give you an idea on
what the best practice might be.

Tim