[Irl-dean] HTML Question - Forms, labels and table based layouts

[Dónal Rice]

Eoin,
this is a non-trivial questions and one which may have a number of
solutions.  Maybe some of the developers on the list will have some further
suggestions??
My tuppence worth:

   - I agree with Eamon re correct labelling of form and aslo about
   breaking problem down into its simplest components
   - its definitely stretching the definition of a data table to say it
   applies in this instance!!  However probably in this case it may not be a
   cardinal sin to use a very simple table for layout but a more elegant,
   accessible and semantically correct solution should be out there
   - consider using the form mark-up as you described but  use CSS to
   have the forn label appear *above* the text input box for the first
   line of the form (for Author name, publisher, date published and ISBN no)
   and perhaps hiding these form labels for each recurring line.  I have never
   implemented such a solution and unfortunately dont have a code example to
   hand.
   - Consider if the use of fieldset element and legend attribute would
   assist with
   - Please see the guidance on form layout on the NDA IT Accessibility
   Guidelines website for a little more help with this.


DEV 7.1 Simplify form design, use good spacing and sensible grouping <
http://accessit.nda.ie/web-resources/guidance/developers/forms/dev-7.1>DEV
7.2 Provide labels for every form element, place correctly, explicitly
associate
<http://accessit.nda.ie/web-resources/guidance/developers/forms/dev-7.2<http://accessit.nda.ie/web-resources/guidance/developers/forms/dev-7.2>
>Regards,
Dónal.
On Thu, Apr 17, 2008 at 10:42 AM, Eamon Mag Uidhir <eamon at maguidhir.com>
wrote:

>
>
> Eoin, unless I am misinterpreting the information you supplied, it
> looks like you are complicating your life by trying to take in
> multiple books at the same time. Better to take in one book at a time
> so you simply have a Title field and not Book 1, Book 2 etc multiple
> fields. You  might start at the other end and see what the database
> schema wants from the person filling out the form in the way of data
> and not try and design the system from the front-end back. A report
> derived from the data can come back in tabular form with Book 1, Book
> 2 etc as rows or columns, but for the data input keeping it "as simple
> as possible and no simpler" seems the best way to go.
>
> Screenreader applications like well-tempered forms better than they
> like tables because proper form mark-up gives a very clear idea of the
> semantic structure, while tables impose a geometric and visual
> structure instead. Forms with CSS beat tables anytime for creating a
> form that is very usable with a  screenreader.
>
> Eamon
>
>
>  Éamon Mag Uidhir
> '''''''''''''''''''''''''''''''''''''''''''
>                      eamon at maguidhir.com
>
>
>
>
>
> RESPONSE TO "MacIonmhain, Eoin" <emacionm at revenue.ie>:
>
>
>
> >
> > Hi all,
> >
> >
> > I made an attempt at sending this question yesterday, but it didn't work
> - so
> > apologies in advance if the original one actually turns up, and you end
> up
> > having to read this twice!
> >
> > I've got a HTML accessibility question that has been bugging me all day
> -
> > I've yet to find a comprehensive answer on the web - was hoping that
> someone
> > on the list might be able to give me a few tips!!
> >
> > For arguments sake, lets say I have a form for some online Library
> > application in order for new books to be added to the catalogue -
> something
> > that looks like this (hopefully the formatting will be preserved!):
> >
> >               Author Name                     Date Published
> > Publisher                     ISBN Number
> > Book 1        <text input box>                <text input box>
>      <text
> > input box>            <text input box>
> > Book 2        <text input box>                <text input box>
>      <text
> > input box>            <text input box>
> > Book 3        <text input box>                <text input box>
>      <text
> > input box>            <text input box>
> > Book 4        <text input box>                <text input box>
>      <text
> > input box>            <text input box>
> >
> >
> > If I were to code this up as a table -
> >
> > with Author Name, Date Published, Publisher, ISBN Number, Book 1, Book
> 2,
> > Book 3, Book 4 all marked up as <th> table headers,
> >
> > and with each <input type="text"... input boxes inside a table cell with
> the
> > headers attribute included -
> >
> > (for example:
> > <table>
> > <tr>
> >
> >       <th id="authorname">Author Name</th>
> >
> >       ...etc
> >
> > </tr>
> > <tr>
> >       <th id="book1">Book 1</th>
> >
> >       <td headers="authorname book1">
> >               <input type="text".....
> >       </td>
> >
> >       ...etc
> >
> >
> > </tr>
> > </table>
> > )
> >
> > would a screenreader understand that the "Author Name and Book 1
> headers"
> > were essentially the "label" for the input field?
> >
> > Or do I need to define a label for every input field? Like so:
> >
> > <label for="book1_authorName">Book 1 - Author Name</label><input
> type="text"
> > id="book1_authorName" />
> > <label for="book1_datePublished">Book 1 - Date Published</label><input
> > type="text" id="book1_datePublished" />
> > <label for="book1_Publisher">Book 1 - Publisher</label><input
> type="text"
> > id="book1_publisher" />
> > <label for="book1_ISBN">Book 1 - ISBN Number</label><input type="text"
> > id="book1_ISBN" />
> >
> > <label for="book2_authorName">Book 2 - Author Name</label><input
> type="text"
> > id="book2_authorName" />
> > <label for="book2_datePublished">Book 2 - Date Published</label><input
> > type="text" id="book2_datePublished" />
> > <label for="book2_Publisher">Book 2 - Publisher</label><input
> type="text"
> > id="book2_publisher" />
> > <label for="book2_ISBN">Book 2 - ISBN Number</label><input type="text"
> > id="book2_ISBN" />
> >
> > and so on...
> >
> >
> > I would rather not have to define a label for every input field - since
> it
> > then means that the user will see loads of label text that to my mind
> adds a
> > huge amount of clutter to the form!
> >
> > I realise that you're not supposed to use tables for layout, and only
> for
> > tabular data - but in this case I'm hazy as to whether the table is
> being
> > used to lay out the form, or whether we can view the data being entered
> into
> > the form as tabular data, therefore making the use of a table ok.
> >
> > Any ideas you have would be greatly appreciated :)
> >
> > Cheers
> >
> > Eoin
> >
> >
> >
> > ************************
> >
> > This message has been delivered to the Internet by the Revenue
> > Internet e-mail service (OP)
> >
> > *************************
> > _______________________________________________
> > Irl-dean mailing list
> > Irl-dean at list.eeng.dcu.ie
> > http://list.eeng.dcu.ie/mailman/listinfo/irl-dean
> >
>
>
>
> _______________________________________________
> Irl-dean mailing list
> Irl-dean at list.eeng.dcu.ie
> http://list.eeng.dcu.ie/mailman/listinfo/irl-dean
>



-- 
Dónal Rice
Senior ICT Advisor
Centre for Excellence in Universal Design
National Disability Authority
email: drice at nda.ie, drice.nda at gmail.com
Tel: + 353 (0)1 608 0430
http://www.universaldesign.ie
http://www.accessIT.nda.ie
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://list.universaldesign.ie/pipermail/ceud-ict/attachments/20080417/84eaedb2/attachment.html