Re: [WSG] is there a way to force legend text shows in TWO lines?
From: tee [EMAIL PROTECTED] Date: Wed, 26 Nov 2008 18:04:09 -0800 Subject: is there a way to force legend text shows in TWO lines? 1) Can anyone absolutely positively confirm that without legend a site will cause suffering to screen reader's user or cause a traumatic effect to accessibility? I think that whether or not a legend is essential depends on the length and content of your form. If it's a multipage extravaganza then legends would certainly have accessibility benefits, but if it's just a simple form, with no distinct sets of questions, then just correctly using labels etc would satisfy most people. Using headers, legends and labels to indicate the same information has got to be more of an annoyance than anything. I have found instances where a header, hidden legend, hidden label all read name. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
On Nov 26, 2008, at 6:49 PM, Ben Lau wrote: try white-space:normal...? Thanks a lot. This works. James, I accidentally deleted your message and empty my trash, so I am replying to your message in this post–thanks, this must be one of the best useful tips I have learned in year 2008. I knew (well, sort of as I never try to dig in to find out more) that browsers must come with a style sheet for their UIs purpose, and I presumedly thought they will in no way getting into my style sheet, and, or shall I say, they must not. It's rather disturbing and annoying to learn that the many battles, time wasted on trying to make the legend behaves in Firefox, that the whole culprit is from its style sheet. Don't know about you guys, but for me, it has always been a uphill battle to try to make sites as accessible as possible–the people I know but never met who care about accessibility is from this group only; the people I know, have to work with or give me the jobs, care none about accessibility. There is no way one can justify the one whole hour being waste to make the legend displays correctly in FF and there is no way one can tell people who give the jobs that it's important to have the legend attribute when one couldn't get it works in one whole damn hour. These browser vendors, they are just not helping people like me and the 1% of web designers on earth who care the accessibility, all they added are countless frustration, time wasted and irritation and potentially turn people like me to become apathy to accessibility. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
Maybe not the best solution, but I tend to set the legend to
display:none (IIRC, one can't position off-screen in some browsers), and
then insert a tad bit of additional HTML which is styled to emulate a
legend... I call this class .pseudoLegend:
(CSS:)
/* Emulate fieldset/legend: */
div.pseudoLegend {
background: #fff url(line.gif) repeat-x 0 50%; /* 5px X 1px */
margin: 15px 0 5px;
}
div.pseudoLegend h5 {
font-size: 85%;
font-weight: bold;
color: #575f6b;
text-transform: uppercase;
background-color: #fff;
margin: 0;
padding: 0 5px 0 0;
display: inline;
}
/* Hide certain elements for browsers without CSS: */
.hide { display: none !important; }
(HTML:)
...
...
div class=pseudoLegendh5E-mail Story to a friend/h5/div
fieldset
legend class=hideE-mail Story/legend
...
...
It works for me. :)
Cheers,
Micky
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] is there a way to force legend text shows in TWO lines?
On Nov 27, 2008, at 12:27 AM, Micky Hulse wrote: ... ... div class=pseudoLegendh5E-mail Story to a friend/h5/div fieldset legend class=hideE-mail Story/legend It works for me. :) Cheers, Micky Thanks Micky, But isn't this defeats the whole purpose for using legend? I wouldn't care to use the legend at all if it weren't for the screen reader. With the above code, wouldn't screen reader read the h5 and legend? Wouldn't this creates unnecessary obstacle to screen reader? It seems to me it anounces the same sentence twice, one is louder, one is less louder and I can imagine I will get even more annoyed :-) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
On Nov 27, 2008, at 12:37 AM, tee wrote: On Nov 27, 2008, at 12:27 AM, Micky Hulse wrote: ... ... div class=pseudoLegendh5E-mail Story to a friend/h5/div fieldset legend class=hideE-mail Story/legend It works for me. :) Cheers, Micky Thanks Micky, But isn't this defeats the whole purpose for using legend? I wouldn't care to use the legend at all if it weren't for the screen reader. With the above code, wouldn't screen reader read the h5 and legend? Wouldn't this creates unnecessary obstacle to screen reader? It seems to me it anounces the same sentence twice, one is louder, one is less louder and I can imagine I will get even more annoyed :-) Sorry, I'd have just vaguely realized screen reader does not read display none. Still, it creates markup noise and defeat the purpose of using legend tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
hi tee, this article gives you some idea of how screen readers use fieldsets/legends http://www.paciellogroup.com/blog/?p=3 also worthwhile: Too much accessibility - FIELDSET LEGENDS (http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/) In your example, the legend includes instructional text. I suggest a more appropriate legend would be shipping estimate and the select elements label as destination -- with regards Steve Faulkner Technical Director - TPG Europe Director - Web Accessibility Tools Consortium www.paciellogroup.com | www.wat-c.org Web Accessibility Toolbar - http://www.paciellogroup.com/resources/wat-ie-about.html *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] is there a way to force legend text shows in TWO lines?
Hi all, Just to elaborate on this one, has anyone ever found a way to remove the left indent on the legend element in IE? I don't care if I have to add a SPAN inside the LEGEND element, I just want to make sure the text will be left aligned correctly in all browsers. Please send a link if you know a good one! Cheers -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee Sent: Thursday, November 27, 2008 2:43 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] is there a way to force legend text shows in TWO lines? On Nov 26, 2008, at 6:15 PM, Ben Buchanan wrote: 2) I have a column that is 160px wide, but the text in legend is a bit longer, I added a span class, declared a width, but in Firefox, the text still refuse to run in two lines - the rest of the text simply get cut off when the words reaches 160px threshold. I really don't want to add a br /, and it will be more ridiculous to use a p tag for the text so that I can force it display exactly the way my client wanted, then use a negative text-indent to hide the legend. Did you set the span to display: block? Yes, that is the first thing I did. No use. Here is a quick page I just did. http://lotusseedsdesign.com/csstest/legend.html tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
Hey Paul, 1. almost all browsers left-indent the legend element to some degree. They use different amounts, with IE being slightly different to most other browsers. 2. This may have been mentioned in the thread before but FireFox will not allow the legend element to be positioned at all. However, you can place a span inside the legend and move this. 3. You can use relative positioning or negative margins to move the legend to the left. If the positioning or negative margin is applied to the span within the legend it will work across all browsers. 4. Then the only remaining issue is that IE is still slightly different to other browsers. So, you can use a conditional comment, serve IE a new style sheet, and adjust the amount of relative position or negative margin - and this will only affect IE - no other browser. Why use a conditional comment linking to a new style sheet just for ie? - it means you do not have to do any form of hack, you are simply rewriting a rule - if the browser becomes obsolete in the future you can simply remove the conditional comment and style sheet - no need to hunt back through all of your CSS to find work-arounds. Like anything, everyone has their own opinion and their own solutions - this is just one possibility :) HTH Russ on 28/11/08 12:30 AM, Paul Collins at wrote: Hi all, Just to elaborate on this one, has anyone ever found a way to remove the left indent on the legend element in IE? I don't care if I have to add a SPAN inside the LEGEND element, I just want to make sure the text will be left aligned correctly in all browsers. Please send a link if you know a good one! Cheers *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
2008/11/27 tee [EMAIL PROTECTED]: 2) I have a column that is 160px wide, but the text in legend is a bit longer, I added a span class, declared a width, but in Firefox, the text still refuse to run in two lines - the rest of the text simply get cut off when the words reaches 160px threshold. I really don't want to add a br /, and it will be more ridiculous to use a p tag for the text so that I can force it display exactly the way my client wanted, then use a negative text-indent to hide the legend. I can't be 100% sure on this, since I haven't played around much with it, but one thing sprang out at me. I didn't think you could declare a width on an inline element like a span unless you also set its display to block. Could that be the problem here? If adding display:block to your span works, then it is indeed a case of Firefox doing the right thing an dthe others not. ;) Cheers, Seona. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
2) I have a column that is 160px wide, but the text in legend is a bit longer, I added a span class, declared a width, but in Firefox, the text still refuse to run in two lines - the rest of the text simply get cut off when the words reaches 160px threshold. I really don't want to add a br /, and it will be more ridiculous to use a p tag for the text so that I can force it display exactly the way my client wanted, then use a negative text-indent to hide the legend. Did you set the span to display: block? cheers, Ben -- --- http://weblog.200ok.com.au/ --- The future has arrived; it's just not --- evenly distributed. - William Gibson *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
On Nov 26, 2008, at 6:15 PM, Ben Buchanan wrote: 2) I have a column that is 160px wide, but the text in legend is a bit longer, I added a span class, declared a width, but in Firefox, the text still refuse to run in two lines - the rest of the text simply get cut off when the words reaches 160px threshold. I really don't want to add a br /, and it will be more ridiculous to use a p tag for the text so that I can force it display exactly the way my client wanted, then use a negative text-indent to hide the legend. Did you set the span to display: block? Yes, that is the first thing I did. No use. Here is a quick page I just did. http://lotusseedsdesign.com/csstest/legend.html tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
try white-space:normal...? On Thu, Nov 27, 2008 at 1:43 PM, tee [EMAIL PROTECTED] wrote: On Nov 26, 2008, at 6:15 PM, Ben Buchanan wrote: 2) I have a column that is 160px wide, but the text in legend is a bit longer, I added a span class, declared a width, but in Firefox, the text still refuse to run in two lines - the rest of the text simply get cut off when the words reaches 160px threshold. I really don't want to add a br /, and it will be more ridiculous to use a p tag for the text so that I can force it display exactly the way my client wanted, then use a negative text-indent to hide the legend. Did you set the span to display: block? Yes, that is the first thing I did. No use. Here is a quick page I just did. http://lotusseedsdesign.com/csstest/legend.html tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] is there a way to force legend text shows in TWO lines?
Hi If there is CSS related issue that doesn't seem to want play nice, no matter what you do, it's probably a rule being set by the browser in its user agent stylesheet. In firefox's case, it's in firefox install dir/res/forms.css (for forms). Have a peek at that stylesheet and you'll see all the rules it applies by default to forms. If you can't override the rules in that CSS using your own (try !important) then start Firebug, bring up the rule in the Style tab. In the 'Options ' menu on the right you'll see an item called Show User Agent CSS - check that and you'll see the rules applied by Firefox to the relevant element. If the rule is now struck out, then it is being applied. In the case of legend, the relevant rule is: white-space : nowrap; So Ben's suggestion below will override it. Opera also has it's basic styles available in easy to read format, just search for them in the opera install dir. Not sure about Safari (I assume they are in some readable format). For IE, I doubt it.. it's still guesswork. they seem to be in a compiled format last time I looked but maybe that has changed. If all that fails. Set your legend to display : none and stick an h3 or something inside the fieldset below the legend, works just as well without the gutache. HTH James On Thursday 27 November 2008 13:49:19 Ben Lau wrote: try white-space:normal...? On Thu, Nov 27, 2008 at 1:43 PM, tee [EMAIL PROTECTED] wrote: Yes, that is the first thing I did. No use. Here is a quick page I just did. http://lotusseedsdesign.com/csstest/legend.html tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
