'

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

MacIonmhain, Eoin emacionm at revenue.ie
Thu Apr 17 10:15:11 IST 2008


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)

*************************



More information about the CEUD-ICT mailing list