# we choose to use tables to layout web forms: (how) can we make them valid/accessible?

we are building a site with dozens of very complex forms and we decided that the best solution for us is to make them using <table>

but we are worried about accessibility and standards.

what i think is that a form may be totally accessible and standards valid if it is made in a proper way

for example:

<table>
<tr>
<th><label for="name">Name</label></th>
<td><input id="name"></td>
</tr>
<tr>
<th><label for="surname">Surname</label></th>
<td><input id="surname"></td>
</tr>
</table>


for me this is a perfectly valid form and accessible too. but I may be wrong. am I?

what should i do, where my attention needs to go, in order to make accessible forms/standards valid forms nowadays?

i'm also interested in a seo perspective.

p.s. our tables are not simple tables, we use rowspan, colspan a lot, but the structure (cols and rows meaning, headings etc is perfectly fine)

• Have you considered the potential problems you'll run into with '<table>' tags in regards to responsive design? – Athoxx Mar 24 '13 at 15:51
• @PatrikAlienus yes thats a problem... :( – skyline26 Mar 25 '13 at 7:58
• You say your forms are very complex. Your example is very simple. That makes it a bit hard to really consider your question. – Su' Mar 25 '13 at 9:11
• we changed our mind, we are going to use display:table with nested tables instead... hope the question helps someone btw – skyline26 Mar 25 '13 at 9:25
• @skyline26 And since it's a problem with responsive design, perhaps re-think the whole <table> completely? Since 30 % of traffic that results in a purchase comes from a smartphone or tablet these days, not going responsive is not really an option... Just my 2 cents. Besides, it's not hard to create a form with div's, span's and some pretty basic CSS, especially if you have a CMS which can handle difficult-to-remember class names for you... =) – Athoxx Mar 26 '13 at 21:04

Accessibility in general can vary depending on which HTML Doc Type i.e:

• XHTML 1.0 Transitional
• HTML 4.01 Transitional
• HTML5

This is because W3C has many accessibility attributes obsolete in HTML5, so your first decision should be which DOC type your going to support. Accessibility isn't my strongest field and not something I need to cater for but I decided to have a crack and I used HTML5 and used W3C HTML Techniques for Web Content Accessibility Guidelines 1.0 which you should use if Accessibility is important on your web design.

Anyway moving on in HTML5 good accessibility using tables will look something like this:

<table>
<tr>
<th><label for="firstname" accesskey="n">Name</label></th>
<td><input id="firstname" tabindex="1"></td>
</tr>
<tr>
<th><label for="surname" >Surname</label></th>
<td><input id="surname" tabindex="2"></td>
</tr>
</table>


Basically you need to ensure that things are described well as you know, the Caption field works well speech synthesizers and it should read exactly what the table is.. Your Information is pretty broad and you should describe your table best you can as this is important to impaired users, So in this example 'Please Input Your Information' is a good description as its asking for information, additionally you could add somewhere on the page why you require that information for even better accessibility.

The tabindexsets the tab order, blind people and other impaired users will use tab very often as its a great key for them navigating.

The accesskey sets focus point on the table, so in this case pressing N will focus the table.

In HTML4 you can use things like ABBR which speech synthesizers will read out over labels as preferred method, for reasons unknown I'm not sure why this has been removed in HTML5 but none the less HTML5 fails validation when using it.

The other useful field I came across is <table summary="I am a input table for user information"> which again is obsolete in version HTML5 which again unsure why because it seems pretty useful to add additional information, maybe W3C want the caption being used more, maybe someone else can answer this.

• thank you for your answer... i'm also reading the html5 specification!! see the headers="" attr if you are interested – skyline26 Mar 25 '13 at 7:59
• abbr is still allowed in HTML5. acronym was removed; you should use abbr now for it, too. – unor Mar 25 '13 at 8:36
• Why would you explicitly define tabindex here? The form elements are focusable by default, and you didn't change the tab order. – unor Mar 25 '13 at 8:37

It is strongly recommended that you don't use table for layout.

But let's say you still want to use table for layout and be accessible about it, you should:

1. NOT use a <caption> tag
2. NOT use <th>
3. If you're using HTML5, don't use the summary attribute because it's deprecated

This is because of success criterion 1.3.1 and to be compliant you must avoid common failures. Specifically common failure number 46. You are not compliant if you use a common failure.

Using CSS for presentation is considered an advisory technique (meaning it enhance existing accessibility). The main reason why it's not a sufficient technique is because assistive technology completely ignores stylesheet to display content. And it's a really, really good thing.

I can guarantee, without even looking at the entire form, that it is not 508 or WCAG compliant.

Also, if you think from the perspective of a screen reader user, your form will sound like

Table with 2 column and 2 rows. Input your information. Row 1 Column 1 Name Column 2 edit Row 2 Column 1 Surname Column 2 edit

This is only for 2 fields in a really simple table. If you add rowspan your table might actually cause another failure (FR49).

You should definitely avoid this technique.

PS. As for SEO the markup is not really important but Google announced a while back that page speed will impact your ranking and tables definitely makes your HTML heavier.

<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name" /></td>
</tr>


Is significantly longer to both code and load than

<label class="cssClass" for="name">Name:
<input type="text" name="name" id="name" />
</label>


Using CSS for layout is definitely preferred over using HTML table markup for layout. In cases where it would take a lot of effort to convert existing layout tables to CSS, an alternative technique is to give the layout table an ARIA role of presentation.

ARIA presentation role tells AT user agents that this element is presentational and can safely be ignored.