[thelist] CSS-Only Forms That Don't Suck

[Jeff Howden]

Stephane,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Stephane Deschamps
> 
> > http://dev.jeffhowden.com/css_forms/
> 
> Something about accessibility: the "required" error
> message may not be perceived as relevant to the form
> element it's supposed to be related to.
> 
> Think linear here:
> 
> - beginning of page: "We encountered errors in the
> information you submitted. Please check the fields
> marked below and try again."
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Ideally, I'd like to include a definition list of the errorsin the form
below where the definition term is the text label of the field and the
definition data is the actualy error.  The error could be anchored by id to
the form field lower in the page.  For example:

We encountered errors in the information you submitted. Please check the
fields marked below and try again.

       First Name:  Required.
        Last Name:  Required.
            Email:  Required.
   Re-enter Email:  Required.
  Message Subject:  You must either select one of
                    the available message subjects
                    or enter your own.
     Availibility:  Please select at least one.

Being able to do this will create a lot more work in the initial creation of
the form, regretably.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> - "Please enter your name and address as they are listed
> for your debit card, credit card, or bank account."
> - [1] field name: "First Name: "
> - [2] important information: "Required."
> - [3] second field: "Last Name:"
> 
> I get the impression that a user with a screen reader
> will not naturally understand the relationship and will
> feel that 2 is related to 3.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Yes, I think you're probably right.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> Maybe you could try something like "First name
> (REQUIRED) :" and then through CSS pull "required" out
> of the flow for the desired effect.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

I don't think that the error message belongs in the label itself,
semantically or otherwise, especially when it's a particularly long error
message.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> Of course in my example I don't take into account bigger
> messages like the username error message, for which I
> don't have an answer right now.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Perhaps a better solution might be to have the error message take the lead
in the label(s)/input(s) div?  That way you're reading the error message,
then it's associated label/input.  I'll play around with that and see if it
works any better.  If not, then it's off to do some user testing to see if
it's really a problem.

Thanks,

 [>] Jeff Howden
     jeff at jeffhowden.com
     http://jeffhowden.com/