More forms with CSS
At the beginning of this month I linked to an article that talked about CSS, forms and fieldsets. This prompted a reader (who wishes to remain anonymous) to send me an example of the kind of things he'd managed to achieve using similar techniques.
Anyway, he said it was ok to pass it on, so I am. He also mentioned that it was designed in a Windows/IE environment. It works in Firefox as well, but looks slightly different. There's definitely scope for improvement. As is, it use no tables and lots of CSS for style and positioning. There's some DHTML in there but there's also some missing functionality. If there's anything you want to add or any way you can think of improving the form, let me know. Feel free to save the HTML and make any changes. I'll publish them in updates to the original.
Skip to the 
You can subscribe to an individual
Jake:
I have a few forms that I use these types of techniques on. Unfortunately, I am only allowed to use them for internal applications.
One question that comes to mind, because I work in an educational environment, is how do screen reader softwares render this form? For example, if a visually impaired person were to come to this web page/form, using JAWS perhaps, would the page be read to them in a logical order? Using tables, the logical order is preserved when the actual page is read.
IBM's Homepage reader seems to read this fine - I haven't tried JAWS though. It seems to only choke on the up/down arrows. The page is read as it appears in the source. The only problem I could see would be forcing a visually impaired user to go back to the address field and then have them go tab to the appropriate TO,CC,BCC field.
IMO, the use of tables for layout doesn't make sense for accessibility. I would think there would be numerous embedded tables so that headers could be associated with each row of your form field presentation, etc.
Mike:
Thanks for the feedback. Your definately correct that numerous embedded tables causes issues for accessibility.
As long as you add the label tag for each form element, the screen readers usually seem to not fuss with the tables too much.
The concern I was having is that some screen readers get choked up on CSS and JavaScript. If that happens, the page is deemed non-compliant, and in my environment, useless.
Again, thanks for the quick insight.
Hey Doug,
I definitely understand your uphill battle with compliancy. If I wanted to use a layout like this for something that needed to be 508 compliant, I would prolly rip out the script that adds the TO/CC/BCC and maybe make them individual SELECT elements instead.
The script for enabling/disabling of fields, to me, is just eye candy and could be ripped out if need be.
As far as the CSS goes, if the page can be read logically and usability is not lost without the style sheet, it would be deemed compliant in my mind. I'm not that familiar with JAWS, however, so take that with a grain of salt.
What about if you changed the colours in the CSS to use the users system colours ? e.g.
.buttonBar{ background-color:ActiveCaption;
...
}
Reference :
{Link}
Well, from a product development standpoint, I would say that changing a color scheme to be Dependant on a user's system settings (while giving the personalization feel), could lose your visual "branding".
If you develop an application with a certain look and feel - that's what a user expects to see. Someone sits down at a kiosk or (better yet) another employee's computer and pulls up the application and doesn't see the same look and feel could be completely lost. Using THREEDFACE as a color option is great... but if you're developing a product - you might not want Susan from Accounting calling you saying she's got a weird red box on a screen when she was in your application just because she forgot her laptop today and someone who used the floater liked a red-centric color scheme. It can generate calls as well as a need to relearn the application each time you sit down at another machine to use it.
I dunno, my 2 cents.
-Chris
Chris that's true but on the other side of the argument the user will be presented with an application interface (at least the colour scheme) with which they are immediately familiar especially if the application is trying to mimic a windows application rather than be a full blown web application in its own right.
As a bonus you can get away from your manager 'suggesting' colours to use ;-)
Mark