: 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

@BetL925

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.

Vote Up Vote Down

@Bryan171

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:


NOT use a <caption> tag
NOT use <th>
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>

Vote Up Vote Down

@Nimeshi995

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>
<CAPTION>Please Input Your information</CAPTION>
<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.

Vote Up Vote Down