17 replies [Last post]
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hallo monks and gurus,

My forms have obeyed me pretty well but are teh bloats. I thought I'd picked it up from Tyssen but it must have been from Roger than I found the idea of wrapping each label-input pair in order to keep inputs with their respective labels in forms.

An example of one of my forms with wrapping divs, visually doing everything I want:
http://stommepoes.nl/Scooterverzekeren/scooterafsluiten1.html (sometimes in FF inputs and labels don't line up-- just refresh, this is something I'm aware of)

I posted this one because it's pretty stable and will not change in an y significant way any time soon. I have already changed how I do multi-inputs; now I use a nested fieldset in place of a div and use a p as the label (this isn't great as some screen readers only focus on form controls when in Forms mode) and hidden labels for the individual parts. Just as you don't usually see credit card inputs as one long input type="text", our company does not do dates or postal codes in one solid input either. Our online forms are complying with our paper forms here. So while I don't agree with the idea of a fieldset wrapping a single question, it works, even with screen readers.

But the current problem is this: I have divs around each label-input pair in order to keep them as a unit, but if I can remove that bloat it would be nice.
Second problem: I have double labels sometimes to deal with looong-cat-is-looong label text.

Here's an unfinished demo form showing what the problem is when there are no wrappers (other than the fieldset around the date question:
http://stommepoes.nl/Forms/wrappinglabels.html
(last two questions, inputs ride up and no longer align with questions)

My forms have sometimes two labels in the code instead of one. The first label has a class called "vollebreedte" and stretches almost all the way across the form. This prevents the input from riding up to the first line of the label. The second label (second label line) then lines up nicely with the input. However, JAWS reads the last label and from what I've read, Window Eyes reads the first one! Lawlz. The specs say that while a label can't reference more than one input, it's perfectly ok to have multiple labels per input, so long as they all have the same for attribute. So I should be cool here, but I'm not.

Speaking of screen reader bugs, I cannot (Can Not) wrap my inputs in my labels. Yes, it's a bug, but since I can't go tell any blind visitors to go buy a different $1000 screen reader, I just need to avoid wrapping inputs in labels for now. Plus, IE6 doesn't let you click the label to select the input.

For all the demos I've been able to find on teh Tubes, if there were long labels, there was always something wrapping the label input pair OR they wrapped the inputs in the labels. A simple br doesn't work.

Any ideas? No, vertical-align: bottom on the inline inputs doesn't work, not so long as the labels are made into blocks by my floating them (I tried).

http://stommepoes.nl/Forms/formscreen1.gif without double labels
http://stommepoes.nl/Forms/formscreen2.gif with double labels

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Quote:Plus, IE6 doesn't let

Quote:

Plus, IE6 doesn't let you click the label to select the input.

Not so, in my experience. Look again at my form demo in IE6. Clicking the label does move the focus to the associated input.

Now, as soon as I can get to it, I'll look at your form. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

My bad, took another look--

My bad, took another look-- that was when people were substituting the label-wrapping-input for the "for" attribute-- if the for is put back in IE6 is ok too.

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Clarification?

Quote:

Speaking of screen reader bugs, I cannot (Can Not) wrap my inputs in my labels. Yes, it's a bug, but since I can't go tell any blind visitors to go buy a different $1000 screen reader, I just need to avoid wrapping inputs in labels for now.

You could tell them to get Firevox, for free. Smile Don't we all wish we could dictate the client software?

Now for the question; does Jaws not make the connection to a nested input even with an explicit for/id combo? E.g.,

<label for="fname">
  <input type="text" name="fname" id="fname">
</label>
If that's the case, it's definitely a critical bug whose fix should be pushed to the users yesterday, if not sooner.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes it does, but we can't

Yes it does, but we can't ever use a legitimate and extremely useful method of dealing with labels/inputs in wrapping the label around the input cos of one silly bit of software that can't handle things in that fashion, good this coding game isn't it?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

JAWS has no problem with

JAWS has no problem with nested inputs... it's Window-Eyes who has the issue, and yeah, it's a bug, not a feature. I'm not sure why it still exists... I've seen both very old article sites and still new ones complaining about it. : (

JAWS is quite nice, though it's damn hard to learn (for me).

I actually don't mind the wrapping divs as much as the double labels. Every complicated form with nice styling I've found (even on a list of forms from Smashing magazine, who apparently posts stuff regardless of how good teh code actually is) has something wrapping, whether it's divs, p's, labels with the left-floated spans... always something to stop the inputs from riding up, or Jabba-da-script.

The doubled labels are not only teh ugliez but also screw with both popular screen readers in TWO different ways (and I consider BOTH to be bugz as the specs say an input may have multiple labels). And I'm doing it for styling, which is as bad as adding a for styling (I can accept using it in my forms, but I sure know that is NOT content, and is there purely for styling purposes).

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

"it's Window-Eyes who has

"it's Window-Eyes who has the issue, and yeah, it's a bug, not a feature"

How would it have ever been a feature :? and at the vast cost of the software they damn well ought to produce a patch, it's simply ridiculous to think that we have to discard valid markup due to bad software.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:it's simply ridiculous

Quote:

it's simply ridiculous to think that we have to discard valid markup due to bad software.

Like text-shadow?

:last-child?

stuff...

I can has a list of things I'd use but don't because one or two popular browsers don't support : (

There is so much I'd like to use that I cannot-- now, some of you live in enlightened countries where for example IE use is low. I live in teh backwaters (Holland) where everyone uses Windows XP or nowadays Vista and everyone surfs with IE and builds sites for IE because that's what the Internet IS, it's Internet Exploder on Windows, the only OS that exists! My country is so teh Borat. : ( It's even behind the rest of Europe in regards to FF usage : (

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

OK. I recall you talking

OK. I recall you talking about some screen reader shortcomings, and mixed the bugs. :Oops:

Is it a deal breaker to ignore this bug, as being outside reasonable expectations of functionality? Kinda like trying to code a picture gallery for Lynx.

The purpose of nesting the control within the label is to tie the two structurally. If you need the structure, you must add otherwise unneeded markup to appease the one bug-besot application.

edit: Rats! You guys are posting too fast for me.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:Like

Quote:

Like text-shadow?

:last-child?

Not quite the same thing, that's styling, less relevant; markup, another kettle of fish.

If Holland is so backwards enlighten them poes start a campaign, although I find it hard to believe Holland is really that backward in these matters Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

And dammit, I could make a

And dammit, I could make a better choice if I had any stats on the blind in general in my country. I have zero and I still have colleagues elbowing me saying "look, the blind can insure their cars and motorcycles now! tee hee!" and I feel kinda stupid doing it.

I know in the Us JAWS and Window-Eyes are like 50-50 in usage. I have no clue about Holland. This country hardly has wheelchair ramps even, and until the gov't started mandating accessible sites for them, nobody made anything accessible except a few standardistas.

In any case, it wouldn't bother me so much if I didn't keep running into it on teh articles like Roger's. Now those comments may be coming from countries with higher Window-Eyes use, I dunno. I have a copy of JAWS but have never used Window-Eyes (and prolly won't test in something like FireVox simply because I'm testing the real screen readers and FirVox has no obligations to imitate anyone else's bugs or how to handle forms and tables and links the same way as a particular piece of commercial software).

Maybe it this is such a sticking point I'll wait on my forms until I can get s'more info on Window-Eyes.

*edit, Hugo:

Quote:

If Holland is so backwards enlighten them poes start a campaign, although I find it hard to believe Holland is really that backward in these matters

It just lags behind more progressive countries as far as browser usage. The gov't recently set rules at least for their own web sites, which we cheered. And there is a group now, called Fronteers, which is basically front-end people trying to bring standards and accessibility to the Dutch web. I'm planning on going to the next monthly meeting but I dunno if I want to plunk down 100 euro before seeing what all they do with it : )

By our own company stats, we've got over 90% IE users. FF comes in second, and everyone else is below 1%.

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Firevox is a screen reader

Firevox is a screen reader in its own right. It uses existing/downloadable libraries from MSFT or from your Linux distro's repository. Linux, I don't know about MSFT, has an existing screen reader (which is about $1000 less expensive than Jaws) that Firevox uses and adapts for the browser.

See Fire Vox features.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

U mean it's more than just a

U mean it's more than just a browser reader? That's pretty amazing.

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I added a link to my

I added a link to my previous post. You'll notice it runs on Windows, Linux and OS Ⅹ. Firevox itself is for Firefox, but the libraries read from all text in all windows on your desktop—at least in Debian Gnu/Linux. I thought it was pretty cool, but I can't listen that fast. Sad

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yeah the reason I was

Yeah the reason I was staying away from browser-based screen readers was that they were web-only while real screen readers were super complicated simply because they read Everything! You can set real JAWS to start as soon as the Desktop loads (but I doesn't has teh real JAWS). Teh googles were going to make a web-based web-reading screen reader for folks who were using various public computers, but it's not done yet.
Second reason was, if FireVox does everything a screen reader would/could, but, for instance, reads things set to display: none, or reads implicit labels, that doesn't mean I can ignore what the standard commercial guys do.

I wrote:

JAWS has no problem with nested inputs... it's Window-Eyes who has the issue, and yeah, it's a bug, not a feature. I'm not sure why it still exists... I've seen both very old article sites and still new ones complaining about it. : (

Dammit, no. I tested much too fast : ( JAWS will read NORMAL implicit labels, but not with radios and checkboxes! GRRRR...

Unfortunately the thumb drive for JAWS is stuck on version 7 and the real JAWS is up to 9. Everything I can find on wcag is for WE5.x and they're up to I think 7 now. Then again, I dunno how fast people upgrade. If you buy the WE package thingie you get three major upgrades for free (cool).

So I will look further. I've already run across something about using title att's for the inputs which I might have to do for all those places I have a p, which as I said, will get read if you're just surfing along but not in Forms mode (form controls only).
Also ran across another interesting thing-- WE (at least the older ones) don't read the asterisk we use to set stuff to "required" unless the user changes a setting (unlikely according to wcag). Sheesh. But you can write "required" in the input's title, so I'm prolly going to start doing that whenever I make a form with mandatory fields (I haven't yet-- all my forms so far have all forms as mandatory).

Man, I'm surprised there aren't blind users selling their services as web testers due to their proficiency with the software... all the testers that I find on teh interwebs are sighted developers. And we suck at using screen readers (maybe if I seclude myself for 3 months in a closet and practice... but I can't even touch-type!). Plus, my JAWS reads Engrish. There's a Finnish and a Spanish but no Dutch. Sounds pretty weird but that's ok cause I can still tell what it's reading.

And yeah, you can slow JAWS down or speed it up so I'd be wery surprised if you couldn't also do that with FV-- the "normal" speed is damn fast, though. I can't listen fast enough. Mah earz, they are teh SLOWz!

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Yeah, I know you can slow it

Yeah, I know you can slow it down. I haven't because 1) I haven't had/made the time to work with it and get it configured 'properly', and 2) I have keyboard shortcut conflicts that again, I haven't had/made the time to work with it and get it configured 'properly'.

Quote:

Dammit, no. I tested much too fast : ( JAWS will read NORMAL implicit labels, but not with radios and checkboxes! GRRRR...

Does that apply to nested radio/check boxes that are explicitly linked?

Could you possibly translate your sample form for us uneducated mono-linguists? I'd like to get a sense of the labels, especially the double labels.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Oh, I could prolly just make

Oh, I could prolly just make that form Engrish... but this is an insurance form (or, a loose piece of one) with questions like "do you give us the right to automatically electronically deduct your premium?" or "do you have the right to claim (this other tarief you can get if you have at least 10 damage-free cardriving years)?" And they get kinda long... lemme change it though.

I'm no expert, but I fake one on teh Internets

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Okay, I've rewritten my

Okay, I've rewritten my forms a bit and made three of them.

http://stommepoes.nl/Forms/nonwrappinglabels.html is the default. I've changed most of the label text to English and also the help text of the last question. The labels do not wrap the inputs.

http://stommepoes.nl/Forms/wrappinglabels.html is labels wrapping inputs but still explicitly linking to the inputs with the "for" attribute.

http://stommepoes.nl/Forms/wrappinglabelsimplicit.html is labels wrapping input without explicit linking to inputs.

I changed the names of the Yes and No checkboxes because it turns out they were going too fast for me to catch and JAWS pronounces "Ja" like a a little sound, not Ja. It knew the page was in Dutch but I don't have that option with the thumb drive.

In all three pages, in just plain old Say-All mode, all the labels were spoken and actually so were the values at least in the select dropdowns though it was very hard to hear.

In nonwrappinglabels and wrappinglabels (explicit) the checkbox area was read out as so (and I'm getting a different result than normal because I have the question as the legend because I'm wrapping the checks and radios in a fieldset to stop the labels from floating left... normally, people use a P. A

or any non-form control will be read in SayAll, but not in Forms Mode (which is what you're in if you want to actually Fill Out the Form!). I think I'll avoid P's in my forms then, except for visual form invullers.

JAWS7forThumb wrote:

Alarminstallation? Hell Yes checkbox not checked. To check press space bar.

*space*

JAWS wrote:

Alarminstallation? No Way checkbox not checked. To check press space bar.

This is actually for all three pages, though it likes to say the last checkbox label and then directly to the next legend/question without pause in wrappinglabelsimplicit.

But with radios it's bad.

First two pages are fine:

JAWS wrote:

Do you have right to extra no-claim steps with regards to the insured vehicle? Yes radio button not checked. One of one?? To change the selection press up or down arrow.

(not sure about the one of one thing)
*down arrow*

JAWS wrote:

Do you have right to extra no-claim steps with regards to the insured vehicle? No radio button checked. One of one?

Always states the checkboxes as checked thereafter, always rereads the legend but that's normal, it'll always reread the legend except when it leaves the nested fieldset (it starts out speaking the whole legend of the main form until it gets to a nested fieldset.

The wrappinglabelsimplicit.html has trouble at the radio buttons.

JAWS wrote:

Do you have right to extra no-claim steps with regards to the insured vehicle? Yes radio button not checked. One of one. To change the selection press up or down arrow.

*down arrow*

JAWS wrote:

Do you have right to extra no-claim steps with regards to the insured vehicle? Yes radio button not checked. One of one.

No matter what, I can toggle between Yes and No and always get told Yes. I might try a more-than-two list and see if it's always the first label who's listed (all my other forms I was testing on, the finished bloataceous forms, are always always explicitly linked).

While the bulk of the form doesn't look tooooo bad in modern browsers without div wrappers etc, it's total *beep*e in IE6 : (

JAWS read the legends for everyone inside that nested fieldset, and then speaks no legends until it end the form or gets to the next nested fieldset. The re-reading of the legend is annoying and people can turn this off, which is bad if I'm using the legend as a "header" label text. Also, some of the questions are longer than the width of the form, notice, and this is bad because many browsers including I remember FF1.5 would just let the legend go offscreen or get cut off if the form is overflow: hidden. Other browsers wrap the legend. So, I'm limited in what I can use it for.

I'm no expert, but I fake one on teh Internets