E-mail List Archives
Thread: Legend wrap (or not)
Number of posts in this thread: 25 (In chronological order)
From: Stephanie Sullivan
Date: Mon, Aug 27 2007 10:10PM
Subject: Legend wrap (or not)
No previous message | Next message →
I've got a conundrum and I've googled with nothing recent that
appeared in the results... I thought I'd request the opinion of the
group here...
I'm coding an application that has several form pages... We've marked
them up semantically with fieldset/legend groups and label/input
pairs... The overall layout and most elements are coded in em
units... and all is mostly well (as forms that vary from browser to
browser can be)... My instructions are that they do not have to be
EXACT, but should be consistent. And for the most part, that's working.
My problem enters with the legend. In some browsers, it wraps. In
some it doesn't. In some I can force the wrap with a width. In some I
can't. <sigh /> When I can not, it forces the form to wider widths
and messes up my page rendering. I've been unable to come up with a
solution that doesn't require me to use a <br /> element within the
legend itself at a logical place. And quite frankly, that's not
really lovely either ... even though it's rare it needs to be used,
in some browsers, due to em units I suppose, the wrap happens
naturally, and then the break happens after (causing a stacking
effect that is unattractive... so far, it's mainly Safari I've seen
this in -- I'm sure due to its different rendering of default text
size).
I'd really like to stick with the fieldset/legends and not move into
headings instead. I considered classing the <br /> and then
attempting to hack for Safari so that the break is not rendered
(though I don't see anything at centricle that will allow me to show
Safari something that Moz-based browsers can't see... but I feel like
I read something somewhere sometime. I just rarely need to hack
Safari). But gracious, I've been able to code this thus far with
nothing but a small IECC. Isn't there a more graceful way to solve
the legend issue? Any opinions?
Ciao,
Stef.
---
Stephanie Sullivan
http://www.w3conversions.com
Dreamweaver Task Force for WaSP
http://www.communitymx.com
From: Tim Beadle
Date: Tue, Aug 28 2007 2:50AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On 28/08/07, Stephanie Sullivan < = EMAIL ADDRESS REMOVED = > wrote:
> (though I don't see anything at centricle that will allow me to show
> Safari something that Moz-based browsers can't see...
You could use the html:lang rule to *hide* a rule from safari, after
setting the safari-specific value previously in a more general rule.
e.g.
p {
/* safari rule */
}
html:lang(en) p {
/* rule for everything but safari */
}
Disclaimer: I'm weaning myself off of CSS hacks, but sometimes they're
necessary.
Regards,
Tim
From: Stephanie Sullivan
Date: Tue, Aug 28 2007 1:30PM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Aug 28, 2007, at 4:45 AM, Tim Beadle wrote:
> You could use the html:lang rule to *hide* a rule from safari, after
> setting the safari-specific value previously in a more general rule.
Hmmmm... so I can try that I guess (though I've not used a "hack"
outside an IECC for ages). I was just hoping for an actual legend fix
-- as in something that would make it behave properly without
hacking... but with the resounding silence, I guess no one knows of
one...
Ciao,
Stef.
---
Stephanie Sullivan
http://www.w3conversions.com
Dreamweaver Task Force for WaSP
http://www.communitymx.com
From: Keith Parks
Date: Tue, Aug 28 2007 2:20PM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Aug 28, 2007, at 12:30 PM, Stephanie Sullivan wrote:
>
> On Aug 28, 2007, at 4:45 AM, Tim Beadle wrote:
>
>> You could use the html:lang rule to *hide* a rule from safari, after
>> setting the safari-specific value previously in a more general rule.
>
> Hmmmm... so I can try that I guess (though I've not used a "hack"
> outside an IECC for ages). I was just hoping for an actual legend fix
> -- as in something that would make it behave properly without
> hacking... but with the resounding silence, I guess no one knows of
> one...
So to clarify, in Safari you're seeing the text within a Fieldset
Legend does not wrap when the width of the Fieldset is specified in
EMs? Or is it the width of an element enclosing the Fieldset that has
a specific width applied? (Just trying to replicate.)
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
(Objects on your screen may be closer than they appear)
From: Stephanie Sullivan
Date: Tue, Aug 28 2007 4:40PM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Aug 28, 2007, at 4:12 PM, Keith Parks wrote:
> So to clarify, in Safari you're seeing the text within a Fieldset
> Legend does not wrap when the width of the Fieldset is specified in
> EMs? Or is it the width of an element enclosing the Fieldset that has
> a specific width applied? (Just trying to replicate.)
Nope... in Safari it DOES wrap (which is causing the problem when I
use the <br> element to force the wrap in the browsers that won't do
it automatically)... in Safari (and Opera), it wraps automatically (a
word before the <br) and then wraps again where the BR is. Ug-ly!
On a Mac, legends will wrap automatically in Opera, Safari,
Explorer ... the do not in Netscape, Mozilla, FireFox ... (Obviously
the Moz-based browsers) On a PC, they don't wrap in Netscape,
Mozilla, FireFox, IE ... Someone said that you could use a width on
the legend in IE to force the wrap, but I didn't find that to be true
in my case.
For my situation, the form has a width of 34em ... the fieldset has
no border or styling really -- it's just used for semantics. It does
not have a width, but I've also tried it WITH a width with no
difference in rendering ... The legend is styled with a fairly large
font (it used to be an h2) and the lines where there is too much to
fit on a line and need to wrap are where I'm running into trouble due
to the above wrap/no wrap issues...
Does that help? :)
---
Stephanie Sullivan
http://www.w3conversions.com
Dreamweaver Task Force for WaSP
http://www.communitymx.com
From: Jukka K. Korpela
Date: Wed, Aug 29 2007 12:00AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Tue, 28 Aug 2007, Stephanie Sullivan wrote:
> I've got a conundrum and I've googled with nothing recent that
> appeared in the results... I thought I'd request the opinion of the
> group here...
Please use normal English punctuation instead of terminating every
sentence in an ellipsis. That will make your messages more accessible.
> My problem enters with the legend. In some browsers, it wraps. In
> some it doesn't.
It's a tricky issue, with various markup and styling and design issues.
But the essential thing, especially from the accessibility point of view,
is this:
If wrapping or non-wrapping matters, it's too long. The legend should be a
short heading-like text, not e.g. a long question. So if it's so long that
it might need to wrap (in a fairly normal canvas), move the text after the
legend element and write new contents for the legend element.
Example:
<legend>How much do you watch television, estimated as an average number
of hours per day, during the last six months?</legend>
would become
<legend>Watching TV</legend>
How much do you watch television? Please estimate this as an average
number of hours per day, during the last six months.
In addition to solving the wrapping problem, this has basically the same
benefits as the use of short descriptive headings.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Tim Beadle
Date: Wed, Aug 29 2007 3:30AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On 29/08/2007, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = > wrote:
> Please use normal English punctuation instead of terminating every
> sentence in an ellipsis. That will make your messages more accessible.
Well done Jukka. There goes another community member, leaving via the
door marked 'unsubscribe'. At least, they will do if they have any
sense.
Tim
From: Patrick Lauke
Date: Wed, Aug 29 2007 4:50AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
> Jukka K. Korpela
> <legend>Watching TV</legend>
> How much do you watch television? Please estimate this as an average
> number of hours per day, during the last six months.
>
> In addition to solving the wrapping problem, this has
> basically the same
> benefits as the use of short descriptive headings.
But how do you tie the text - which gives important information on how to answer the question - to the form controls that follow? Assuming that you're intending this to be a series of radio buttons, you seem to suggest (simplifying the markup)
<fieldset>
<legend>Watching TV</legend>
<p>How much do you watch television? Please estimate this as an average number of hours per day, during the last six months.</p>
<input type="radio" name="..." id="..." value="1" />
<label for="...">1 hour</label>
...
<input type="radio" name="..." id="..." value="72" />
<label for="...">72 hours</label>
</fielset>
Now, in forms mode or similar, a screen reader user may just hear "Watching TV - 1 hour" or something to that effect...
(although, in this particular example, I would actually go for a text input, which would make the whole "How much..." probably a label, with no need for a fieldset/legend)
P
From: Jukka K. Korpela
Date: Wed, Aug 29 2007 6:00AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Wed, 29 Aug 2007, Patrick Lauke wrote:
>> Jukka K. Korpela
>
>> <legend>Watching TV</legend>
>> How much do you watch television? Please estimate this as an average
>> number of hours per day, during the last six months.
>>
>> In addition to solving the wrapping problem, this has
>> basically the same
>> benefits as the use of short descriptive headings.
>
> But how do you tie the text - which gives important information on how
> to answer the question - to the form controls that follow?
It is tied with them by its presence inside the same fieldset element. On
the other hand, no special would really be needed, since it immediately
preceeds the controls.
> Assuming that
> you're intending this to be a series of radio buttons,
I actually was, but I agree that an input field might be better in this
case. However, a few radio buttons, associated with ranges like "less than
1 hour", "1 to 3 hours", and "more than 3 hours" (if suitable for the
purposes of the study being conducted) might be more accessible by making
the choice easier: people would not need to decide whether its 1,5 or 2
hours but just answer at the precision requested.
Anyway, let's assume this markup:
> <fieldset>
> <legend>Watching TV</legend>
> <p>How much do you watch television? Please estimate this as an average number of hours per day, during the last six months.</p>
> <input type="radio" name="..." id="..." value="1" />
> <label for="...">1 hour</label>
> ...
> <input type="radio" name="..." id="..." value="72" />
> <label for="...">72 hours</label>
> </fielset>
(though a "neutral" choice like "Can't tell" should always be included in
a set of radio buttons)
> Now, in forms mode or similar, a screen reader user may just hear
> "Watching TV - 1 hour" or something to that effect...
That would be odd, wouldn't it? A browser that skips the textual content
of a form would skip _essential_ information on _many_ pages. Would it be
the <fieldset> and <legend> markup that causes it? And would this happen
in important browsers? Then the practical conclusion would be to stop
using those elements. There's no point in using semantic markup if it
causes wrong processing more often than anything useful. Those elements
are really not _necessary_ ever; they are supposed to help, not hurt, and
if browsers get this wrong, well...
Instead of <legend>, a heading at a suitable level could be used. Instead
of <fieldset>, a <div> with class could be used, and styled as desired.
The styling would not help in non-visual mode, but the use of headings
could still divide the form into manageable chunks.
> (although, in this particular example, I would actually go for a text
> input, which would make the whole "How much..." probably a label, with
> no need for a fieldset/legend)
Not necessarily. Labels should be short, too. A label/field pair can be
preceded by explanatory text if needed. E.g.:
<fieldset>
<legend>Watching TV</legend>
How much do you watch television? Please estimate this as an average
number of hours per day, during the last six months.
<div><label for="tv-hr">Hours per day:</label>
<input id="tv-hr" type="text" size="2" maxlength="2"></div>
</fieldset>
This would mean repeating the text "hours per day", which is _good_ here
in my opinion, since it's essential information. But if desired, the label
text _could_ be just "Hours:".
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Keith Parks
Date: Wed, Aug 29 2007 9:00AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Aug 29, 2007, at 4:49 AM, Jukka K. Korpela wrote:
> Not necessarily. Labels should be short, too. A label/field pair
> can be
> preceded by explanatory text if needed. E.g.:
>
> <fieldset>
> <legend>Watching TV</legend>
> How much do you watch television? Please estimate this as an average
> number of hours per day, during the last six months.
> <div><label for="tv-hr">Hours per day:</label>
> <input id="tv-hr" type="text" size="2" maxlength="2"></div>
> </fieldset>
>
> This would mean repeating the text "hours per day", which is _good_
> here
> in my opinion, since it's essential information. But if desired,
> the label
> text _could_ be just "Hours:".
Is there any reason not to wrap the <label> around text that is
already there?
From your example:
<fieldset>
<legend>Watching TV</legend>
How much do you watch television? Please estimate this as an average
number of <label for="tv-hr">hours per day</label>, during the last
six months.
<input id="tv-hr" type="text" size="2" maxlength="2">
</fieldset>
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
World Peace through Cascading Style Sheets.
From: Moore, Michael
Date: Wed, Aug 29 2007 12:10PM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
Stephanie Sullivan wrote:
For my situation, the form has a width of 34em ... the fieldset has no
border or styling really -- it's just used for semantics. It does not
have a width, but I've also tried it WITH a width with no difference in
rendering ... The legend is styled with a fairly large font (it used to
be an h2) and the lines where there is too much to fit on a line and
need to wrap are where I'm running into trouble due to the above wrap/no
wrap issues...
Does that help? :)
Stephanie,
Try this, I have tested it with IE 6 and FF 2.0 (The only browsers
available to me at the office).
<legend>
<span style="display:block; width:34em">
This is just a string of nonsense text to demonstrate
that the style markup associated with the span will cause the desired
wrapping behavior.
</span>
</legend>
You will probably want to move the styles to the stylesheet.
Now on to the screen reader accessibility considerations of the
solution.
Screen reader users tend to enter forms mode upon entering a form, or at
least after encountering the first edit field. (input of type text).
They generally do not exit forms mode until they complete the form. The
exit is handled by the assistive technology.
When in forms mode screen readers will announce the content of the
legend element unless the user is not using the default verbosity
settings. Most of the users in our organization (>150) use intermediate
or advanced verbosity settings in JAWS, the advanced mode does not
announce the legend unless the user turns that announcement back on.
The screen reader will announce the legend before the label for every
form input contained within the fieldset. This can become a usability
issue, especially with needing to listen to the same question 5 or 6
times while trying to review the answer choices. Now imagine listening
to a survey with 50 questions each containing 5 answer choices.
In the case of nested fieldsets, the screen reader will only announce
the legend for the immediate fieldset parent of the input.
<fieldset>
<legend>first level</legend>
...
<fieldset>
<legend>second level</legend>
<label>label text</label><input ... /> <!--only second
level legend announced with label here -->
...
</fieldset>
</fieldset>
The screen reader will only announce form inputs (input, select, etc.),
labels and legends while in forms mode, it will not announce the content
of heading elements or paragraphs.
A method that I am currently experimenting with is to place a hidden gif
within the label for the first input in a set of answers for a question.
The question itself can be contained within a paragraph, list item or
span element. The alt text for the gif also contains the question. This
is working well using JAWS 6.0, 8.0 and Window Eyes 6.0. The form looks
normal for visual users and screen reader users only hear the question
one time unless they are listening to the form outside of forms mode.
Their verbosity settings do not matter. If out of forms mode they will
hear the question twice for the first input only.
<label for="test"><img src="tiny_clear.gif" width="1" height="1"
alt="question text here" />Answer Choice 1</label>
Mike Moore
From: Stephanie Sullivan
Date: Wed, Aug 29 2007 8:40PM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Aug 29, 2007, at 1:50 AM, Jukka K. Korpela wrote:
> Please use normal English punctuation instead of terminating every
> sentence in an ellipsis. That will make your messages more accessible.
Sorry I am hard for you to read. I answer hundreds of emails a day
and dealing with proper English tends to slow me down substantially.
Thus, I write in "thoughts." Can't promise I won't do it anymore, but
I'll try. :)
(And to the gentleman that suggested I might be offended, I've been
on this list for ages - maybe years. And though I don't read often
and post even less often, I know Jukka. Smart man, lacks tact.
Probably not his fault completely, but I won't let it bother me. ;))
>
>> My problem enters with the legend. In some browsers, it wraps. In
>> some it doesn't.
>
> It's a tricky issue, with various markup and styling and design
> issues.
>
> But the essential thing, especially from the accessibility point of
> view,
> is this:
>
> If wrapping or non-wrapping matters, it's too long. The legend
> should be a
> short heading-like text, not e.g. a long question. So if it's so
> long that
> it might need to wrap (in a fairly normal canvas), move the text
> after the
> legend element and write new contents for the legend element.
>
> Example:
>
> <legend>How much do you watch television, estimated as an average
> number
> of hours per day, during the last six months?</legend>
>
> would become
>
> <legend>Watching TV</legend>
> How much do you watch television? Please estimate this as an average
> number of hours per day, during the last six months.
>
> In addition to solving the wrapping problem, this has basically the
> same
> benefits as the use of short descriptive headings.
Your example would surely work if I were using fieldsets to group
simple little single pairs of label/inputs. But I'm not. I'm using
fieldsets to group like sections of the form. Quite frankly, this
client is being quite conversational and familiar in his style on
this site (it's a web 2.0 app) and it's refreshing. But we may have
to look at paring it down a bit due to other comments in the thread.
Thanks for the input,
Stef.
---
Stephanie Sullivan
http://www.w3conversions.com
Dreamweaver Task Force for WaSP
http://www.communitymx.com
From: Stephanie Sullivan
Date: Wed, Aug 29 2007 8:50PM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Aug 29, 2007, at 7:49 AM, Jukka K. Korpela wrote:
> That would be odd, wouldn't it? A browser that skips the textual
> content
> of a form would skip _essential_ information on _many_ pages. Would
> it be
> the <fieldset> and <legend> markup that causes it? And would this
> happen
> in important browsers? Then the practical conclusion would be to stop
> using those elements. There's no point in using semantic markup if it
> causes wrong processing more often than anything useful. Those
> elements
> are really not _necessary_ ever; they are supposed to help, not
> hurt, and
> if browsers get this wrong, well...
No, it's not the fieldset/legend... It's forms mode for the assistive
technology. Many AT don't read P or headings within a form. So that
information is lost to the person using it. Thus my desire to use
proper semantic markup instead.
>
> Instead of <legend>, a heading at a suitable level could be used.
> Instead
> of <fieldset>, a <div> with class could be used, and styled as
> desired.
> The styling would not help in non-visual mode, but the use of headings
> could still divide the form into manageable chunks.
Same problem as above with the heading... and the fieldset is created
to group like information. Why would I switch to a non-semantic div?
---
Stephanie Sullivan
http://www.w3conversions.com
Dreamweaver Task Force for WaSP
http://www.communitymx.com
From: Stephanie Sullivan
Date: Wed, Aug 29 2007 9:00PM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Aug 29, 2007, at 9:37 AM, Moore, Michael wrote:
> Try this, I have tested it with IE 6 and FF 2.0 (The only browsers
> available to me at the office).
>
> <legend>
> <span style="display:block; width:34em">
> This is just a string of nonsense text to demonstrate
> that the style markup associated with the span will cause the desired
> wrapping behavior.
> </span>
> </legend>
>
Bingo! I am anti-span (hate adding them in) but sometimes they're
necessary. So far, this works in every browser I can test in (need to
redownload NN to test that one). And to confirm, I've been away from
email today and my friend, Derek Featherstone told me the same thing
on IM tonight. You both win the prize. :)
>
> Screen reader users tend to enter forms mode upon entering a form,
> or at
> least after encountering the first edit field. (input of type text).
> They generally do not exit forms mode until they complete the
> form. The
> exit is handled by the assistive technology.
>
> When in forms mode screen readers will announce the content of the
> legend element unless the user is not using the default verbosity
> settings. Most of the users in our organization (>150) use
> intermediate
> or advanced verbosity settings in JAWS, the advanced mode does not
> announce the legend unless the user turns that announcement back on.
Hrm...
>
> The screen reader will announce the legend before the label for every
> form input contained within the fieldset. This can become a usability
> issue, especially with needing to listen to the same question 5 or 6
> times while trying to review the answer choices. Now imagine listening
> to a survey with 50 questions each containing 5 answer choices.
>
Oh gah. So most of these fieldset/legends contain a couple/few
questions. However, one of them has an ordered list with three items
(each LI in the list has at least one label/input pair, but the third
one contains an unordered list with 7 label/input pairs)... this
sounds like it will read ugly.
And are you saying that BECAUSE I have an ordered list inside my
fieldset, even though this list items don't contain any text outside
the label/input pair, they may not be read? Or am I safe to use lists
WITH labels?
> In the case of nested fieldsets, the screen reader will only announce
> the legend for the immediate fieldset parent of the input.
>
> <fieldset>
> <legend>first level</legend>
> ...
> <fieldset>
> <legend>second level</legend>
> <label>label text</label><input ... /> <!--only second
> level legend announced with label here -->
> ...
> </fieldset>
> </fieldset>
>
>
> The screen reader will only announce form inputs (input, select,
> etc.),
> labels and legends while in forms mode, it will not announce the
> content
> of heading elements or paragraphs.
So I'm guessing the third item in my ordered list should become a
nested fieldset/legend with the list inside that. (well, depending on
your answer to the above question.)
>
> A method that I am currently experimenting with is to place a
> hidden gif
> within the label for the first input in a set of answers for a
> question.
> The question itself can be contained within a paragraph, list item or
> span element. The alt text for the gif also contains the question.
> This
> is working well using JAWS 6.0, 8.0 and Window Eyes 6.0. The form
> looks
> normal for visual users and screen reader users only hear the question
> one time unless they are listening to the form outside of forms mode.
> Their verbosity settings do not matter. If out of forms mode they
> will
> hear the question twice for the first input only.
>
> <label for="test"><img src="tiny_clear.gif" width="1" height="1"
> alt="question text here" />Answer Choice 1</label>
>
Interesting idea. I should shortly have my own set of testers and
will play with this...
Thanks for your input, Michael!
Stef.
---
Stephanie Sullivan
http://www.w3conversions.com
Dreamweaver Task Force for WaSP
http://www.communitymx.com
From: Jukka K. Korpela
Date: Thu, Aug 30 2007 12:10AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Wed, 29 Aug 2007, Stephanie Sullivan wrote:
> No, it's not the fieldset/legend...
Now _I_ am offended by your continued odd punctuation, not just by your
(and someone else's) pointless complaints about my polite request to use
normal English punctuation, for accessibility of your messages.
> It's forms mode for the assistive
> technology. Many AT don't read P or headings within a form. So that
> information is lost to the person using it.
Do people actually use such AT in a mode like that? Then the vast majority
of forms on web pages will be inaccessible to them, at least if the
skipping extends to any text inside a form not wrapped into any container
element. (If it's just p and headings, it's very weird: it would punish
authors - and users - for the use of adequate markup.)
(There might be some point in using such a mode on a page that the user
knows well, so that he knows what the form is and wants to use a "fast"
mode. In such a situation, lengthy legends work against the idea of
"fast".)
> Thus my desire to use
> proper semantic markup instead.
The semantics of the legend element is defined in HTML specifications as
assigning a _caption_ to a fieldset element. Long texts seldom make good
captions, or semantically captions at all.
Look at the examples of forms in general and legend elements in particular
in the HTML 4.01 specification. Surely they illustrate that the legend
element is supposed to be a short, heading-like caption, not a lengthy
question, and that explanatory texts are common and normal inside form and
fieldset elements. Any software that skips them is unusable for normal
filling of forms on web pages that have been constructed at least loosely
by the specifications.
(The examples in the spec are bad in the sense of often lacking label
markup, but that's a different issue.)
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Patrick Lauke
Date: Thu, Aug 30 2007 3:00AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
> Jukka K. Korpela
> Now _I_ am offended by your continued odd punctuation, not
> just by your
> (and someone else's) pointless complaints about my polite
> request to use
> normal English punctuation, for accessibility of your messages.
Please...give it a rest.
> Do people actually use such AT in a mode like that?
Unless things have changes in recent versions, JAWS actually requires the user to be in forms mode in order to fill in a form. So yes, a large number of users will invariably use AT in that mode. Hence the importance of making sure legend and label elements provide sufficient information for screen reader users to fill in a form.
P
From: Moore, Michael
Date: Thu, Aug 30 2007 7:30AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
Stephanie Sullivan wrote:
Bingo! I am anti-span (hate adding them in) but sometimes they're
necessary. So far, this works in every browser I can test in (need to
redownload NN to test that one). And to confirm, I've been away from
email today and my friend, Derek Featherstone told me the same thing on
IM tonight. You both win the prize. :)
Mike:
Derek is a great guy, I have known him for a few years. Either Derek or
James Craig were probably my original source for that technique.
Mike:
> The screen reader will announce the legend before the label for every
> form input contained within the fieldset. This can become a usability
> issue, especially with needing to listen to the same question 5 or 6
> times while trying to review the answer choices. Now imagine listening
> to a survey with 50 questions each containing 5 answer choices.
>
Stephanie:
Oh gah. So most of these fieldset/legends contain a couple/few
questions. However, one of them has an ordered list with three items
(each LI in the list has at least one label/input pair, but the third
one contains an unordered list with 7 label/input pairs)... this sounds
like it will read ugly.
And are you saying that BECAUSE I have an ordered list inside my
fieldset, even though this list items don't contain any text outside the
label/input pair, they may not be read? Or am I safe to use lists WITH
labels?
Mike:
Sorry for the confusion, adding the label/input structure to the list
will cause JAWS, Window Eyes, and HPR to read label for the input even
when contained within a list or other any other valid element, I have
not tested with HAL or Super Nova but I would say that the odds are
pretty good that they will work too. The key is the label/input
binding. I always recommend explicit binding using the for and id
attributes.
Stephanie:
So I'm guessing the third item in my ordered list should become a nested
fieldset/legend with the list inside that. (well, depending on your
answer to the above question.)
Mike:
If the third item is not already contained within a label that is
associated with an input, then wrapping it within a fieldset and legend
would get the job done as long as it continues to make sense
structurally. Of course I am probably preaching to the choir here given
your WaSP affiliation.
Mike:
>
> A method that I am currently experimenting with is to place a hidden
> gif within the label for the first input in a set of answers for a
> question.
> The question itself can be contained within a paragraph, list item or
> span element. The alt text for the gif also contains the question.
> This
> is working well using JAWS 6.0, 8.0 and Window Eyes 6.0. The form
> looks normal for visual users and screen reader users only hear the
> question one time unless they are listening to the form outside of
> forms mode.
> Their verbosity settings do not matter. If out of forms mode they
> will hear the question twice for the first input only.
>
> <label for="test"><img src="tiny_clear.gif" width="1" height="1"
> alt="question text here" />Answer Choice 1</label>
>
Stephanie:
Interesting idea. I should shortly have my own set of testers and will
play with this...
Thanks for your input, Michael!
Stef.
Mike:
The biggest problem that I have seen thus far is if images are turned
off, the alt text is displayed by the browser. This can be ugly. I
think that positioning the image off screen will fix the problem unless
images and css are both absent. I have not tested this yet though. I
hate it when the hacks start to get to complicated <grin />
Mike Moore
From: Andrew Kirkpatrick
Date: Thu, Aug 30 2007 8:30AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
> Do people actually use such AT in a mode like that? Then the
> vast majority of forms on web pages will be inaccessible to
> them, at least if the skipping extends to any text inside a
> form not wrapped into any container element. (If it's just p
> and headings, it's very weird: it would punish authors - and
> users - for the use of adequate markup.)
Yep, there are so many keyboard commands that form functionality
keystrokes overlaps so a separate mode is needed. Users can and do
enter and exit forms mode during the course of interaction with a form,
however, so the information is not gone, it just isn't as readily
presented.
AWK
From: Kat Clancy
Date: Thu, Aug 30 2007 11:20PM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
I was thinking that too Tim, but having never posted on this list I
didn't want it to be my first post. Some of us on here are not experts
in accessibility, hence why we subscribe to learn more. A private post
to the person would have been sufficient enough. Public humiliation is
not the best way to get a message across.
And in addition, if the use of ellipsis is inaccessible, then generation
Y must not be able to communicate with a lot of people (have you ever
seen an msn conversation between gen Y friends).
Tim Beadle wrote:
> On 29/08/2007, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Please use normal English punctuation instead of terminating every
>> sentence in an ellipsis. That will make your messages more accessible.
>>
>
> Well done Jukka. There goes another community member, leaving via the
> door marked 'unsubscribe'. At least, they will do if they have any
> sense.
>
> Tim
>
From: Jukka K. Korpela
Date: Fri, Aug 31 2007 12:30AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Thu, 30 Aug 2007, Andrew Kirkpatrick wrote:
>> Do people actually use such AT in a mode like that? Then the
>> vast majority of forms on web pages will be inaccessible to
>> them, at least if the skipping extends to any text inside a
>> form not wrapped into any container element. (If it's just p
>> and headings, it's very weird: it would punish authors - and
>> users - for the use of adequate markup.)
>
> Yep, there are so many keyboard commands that form functionality
> keystrokes overlaps so a separate mode is needed. Users can and do
> enter and exit forms mode during the course of interaction with a form,
> however, so the information is not gone, it just isn't as readily
> presented.
So this means that if we design a form logically, using explanatory texts
as needed for filling out the form, using legend (or heading) elements as
short heading-like captions, and using concise labels associated with
input elements via markup, the form will be generally accessible, though
with some need for mode switching to some users. And I would expect those
users to be or to get familiar with mode switching, since the vast
majority of forms - perhaps excluding very simple and intuitive search
forms - on web pages have not been designed to suit the specifics of the
software they use.
This avoids the problem of lengthy legends.
The alternative of designing forms so that all the information in it is
wrapped in legend and label elements would mean serious accessibility
problems. For example, if some question really needs a lengthy explanation
before it can be asked and answered, should all that appear inside a
legend element, resulting in a rather odd rendering on normal graphic
browsers? What would you do with explanatory texts containing links to
additional information, for people who may need it? And putting all the
explanations and links _before_ the form is not reasonable at all if the
form is relatively long and the explanations and links relate to specific
parts there.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Patrick Lauke
Date: Fri, Aug 31 2007 4:00AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
> Jukka K. Korpela
> So this means that if we design a form logically, using
> explanatory texts
> as needed for filling out the form, using legend (or heading)
> elements as
> short heading-like captions, and using concise labels associated with
> input elements via markup, the form will be generally
> accessible, though
> with some need for mode switching to some users. And I would
> expect those
> users to be or to get familiar with mode switching, since the vast
> majority of forms - perhaps excluding very simple and
> intuitive search
> forms - on web pages have not been designed to suit the
> specifics of the
> software they use.
It's a balancing act. Yes, users should be aware of how to switch between modes, and yes the majority of forms in the wild are marked up in such a crappy way that they've been forced to learn this...but, if you want to make the forms more usable, you'll try to minimise the need for mode switching and backtracking through the form to get to the explanatory text and try to make the legends and labels themselves carry enough information to make the form understandable.
P
From: Andrew Kirkpatrick
Date: Fri, Aug 31 2007 8:50AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
> So this means that if we design a form logically, using
> explanatory texts as needed for filling out the form, using
> legend (or heading) elements as short heading-like captions,
> and using concise labels associated with input elements via
> markup, the form will be generally accessible, though with
> some need for mode switching to some users. And I would
> expect those users to be or to get familiar with mode
> switching, since the vast majority of forms - perhaps
> excluding very simple and intuitive search forms - on web
> pages have not been designed to suit the specifics of the
> software they use.
Yep, that's all fair to say. It is desireable for forms to be simple
enough so that explanatory text (and therefore mode switching) is not
needed, but this isn't always possible.
> This avoids the problem of lengthy legends.
Maybe. One situation where legends are almost always beneficial is for a
radio group. The screen reader will guess at the prompt for a radio
group since at least some AT don't read a second label that references
all of the members of a radio group in the way that legend text wrapping
a radio group is voiced. It would be great to be able to have
explanatory text or radio group prompts be labels that refer to multiple
id's, but that isn't working now as far as I know.
> The alternative of designing forms so that all the
> information in it is wrapped in legend and label elements
> would mean serious accessibility problems. For example, if
> some question really needs a lengthy explanation before it
> can be asked and answered, should all that appear inside a
> legend element, resulting in a rather odd rendering on normal
> graphic browsers? What would you do with explanatory texts
> containing links to additional information, for people who
> may need it? And putting all the explanations and links
> _before_ the form is not reasonable at all if the form is
> relatively long and the explanations and links relate to
> specific parts there.
This problem is not unique to the web. I can't find the reference, but
I recall reading a microsoft guidelines document that indicated for
desktop appls that it was necessary to put the extra text necessary for
comprehension of a dialog/form/application into the tab order so that it
could be read when interacting with the form. In desktop apps there is
only forms mode (well, there's also a "mouse emulation mode" but that's
not a good analog to the HTML reading modes in SR's), so the user either
eneds to get the info by it being in the tab order, or they can request
that the full window be read and piece it together themselves. In
application use, as with HTML forms, users rely on a variety of
strategies to be certain of what they are doing.
In HTML, the extra text could be put into the tab order also, but that
opens up a whole other can of worms. One could also add links (which
are tabbable in forms mode) in a form that would open javascript alerts
or open a separate page with explanatory information, or even that would
modify the DOM to add the explanatory text into the tab order. These
all would either be regarded as moving toward application-like
functionality or as hacks (or both), but as you point out, form access
is not trivially easy once form complexity increases.
AWK
From: Moore, Michael
Date: Fri, Aug 31 2007 9:20AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
Jukka wrote:
So this means that if we design a form logically, using explanatory
texts as needed for filling out the form, using legend (or heading)
elements as short heading-like captions, and using concise labels
associated with input elements via markup, the form will be generally
accessible, though with some need for mode switching to some users. And
I would expect those users to be or to get familiar with mode switching,
since the vast majority of forms - perhaps excluding very simple and
intuitive search forms - on web pages have not been designed to suit the
specifics of the software they use.
Mike's response:
Yes, however there is a cost in terms of usability and efficiency for
screen reader users. Typical behavior among screen reader users that I
have talked to, including those who train other JAWS users, is to
attempt to complete the form by moving through it in forms mode without
exiting. When they think that they may have missed something they exit
and move back up the form line by line. They find forms where
information is not included in the tab ring difficult to use, not
inaccessible.
Jukka:
This avoids the problem of lengthy legends.
The alternative of designing forms so that all the information in it is
wrapped in legend and label elements would mean serious accessibility
problems. For example, if some question really needs a lengthy
explanation before it can be asked and answered, should all that appear
inside a legend element, resulting in a rather odd rendering on normal
graphic browsers? What would you do with explanatory texts containing
links to additional information, for people who may need it? And putting
all the explanations and links _before_ the form is not reasonable at
all if the form is relatively long and the explanations and links relate
to specific parts there.
Mike:
There are a number of other alternatives, admittedly these are all hacks
and each method represents a trade off with other potential issues:
1. Use spans and styling to make the visual presentation of labels and
legends look as if intervening text was coded structurally. Cost:
Reduction in non-visual semantic or structural meaning within the form.
2. Place the intervening text inside of the label for the first input
following the intervening text through the use of alt text within a
transparent gif. Cost: redundant information for screen readers users
who are not in forms mode, possible visual rendering issues if images
are not downloaded.
3. Break up the form into a series of interfaces so that the intervening
text can be placed prior to the first form input on each page of the
interface. Cost: Increased programming complexity and potential loss of
efficiency for users waiting for pages to download. Potential added
benefit: reduced scrolling for all users.
In an "ideal" world, screen reading software would include paragraph and
heading elements within the tab ring when in forms mode. However, not
being an expert on the inner workings of this software I do not know if
it is technologically feasible at this time. It certainly does not
appear to be a priority for any of the screen reader vendors.
In the "real" world, intervening text poses a real problem for screen
reader users. As an industry, we have made many changes to improve the
usability of applications based upon the way the people actually use
computers rather than the way the they "should" use computers. The
result is that most people can now open a new application, or visit a
new web site, with no training at all. Working in an agency that serves
a large community of users who are blind, I am biased toward providing
that same consideration to those users. In my opinion, form design on
the web is unimaginative and poorly implemented, and fails to take
advantage of the medium in which these forms are delivered. As designers
we are making progress in moving away from simply rendering good paper
designs on a computer monitor, however, very little progress has been
made with forms resulting in the use of unnecessary intervening text and
lost opportunities to break up the interface into logical user friendly
chunks. A few typical examples follow:
1. Please answer yes or no to the following questions: (Radio buttons or
select boxes make this obvious).
2. If you answered no to question 5 skip down to question 14, otherwise
complete the following questions. (Great opportunity for branching
logic).
3. In this section please... (Opportunity to break up the form into
multiple sections).
That's my two cents worth anyway.
Mike Moore
From: Jukka K. Korpela
Date: Fri, Aug 31 2007 10:00AM
Subject: Re: Legend wrap (or not)
← Previous message | Next message →
On Fri, 31 Aug 2007, Patrick Lauke wrote:
> It's a balancing act. Yes, users should be aware of how to switch
> between modes, and yes the majority of forms in the wild are marked up
> in such a crappy way that they've been forced to learn this...but, if
> you want to make the forms more usable, you'll try to minimise the need
> for mode switching and backtracking through the form to get to the
> explanatory text and try to make the legends and labels themselves carry
> enough information to make the form understandable.
But where is the balance between the needs of people using technologies
that skip content in forms mode and the needs of all other people? Verbose
legends and verbose labels are are problem to many people. This includes
the legend formatting issue (which is more than just the wrapping issue)
and the clarity of the association between labels and fields.
Sometimes the forms mode issues might be important enough to justify
slightly illogical markup, or maybe a separate version of the form. But
making the basic form less accessible to the majority does not sound like
balance to me.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
From: Joelle Tegwen
Date: Tue, Sep 04 2007 8:10AM
Subject: Re: Legend wrap (or not)
← Previous message | No next message
Stephanie Sullivan wrote:
> My problem enters with the legend. In some browsers, it wraps. In
> some it doesn't. In some I can force the wrap with a width. In some I
> can't. <sigh />
We use <legend><span>Legend text goes here</span></legend> and then
style the span. It seems to work for all browsers that we have tried.
Joelle