A few weeks ago, my co-workers asked me to demonstrate how to convert a form built using
HTML table elements into a more meaningful
form structured with semantic HTML. Given
the accessibility issues that affect table-based forms, I was more than happy to oblige.
Just to be clear, I don’t think that “tables are evil.” I actually feel
quite the opposite. Tables have their place—they are absolutely fantastic for marking
up tabular data like train schedules, stock quotes, spreadsheets and etceteras (which is
what they were actually intended for.)
However, given their inherent grid-like structure, tables are sometimes used to lend a
scaffolding to other elements like forms and divs that are inherently unstructured. Using
tables in this way is an abuse and runs counter to the widely accepted notion that we, as
web designers and developers, should strive to isolate our structural
(CSS), and behavioral
Why Tables Are Inappropriate For Forms
Using tables to mark up forms is inappropriate for a few reasons:
Marking up forms with tables adds unnecessary markup and decreases maintainability.
Inserting form elements like labels and inputs in separate table cells erodes the
fundamental relationships otherwise defined by their proximity to one another. This
prevents users who rely on screen readers or other assistive devices from efficiently
navigating your form.
Tables are devices intended for information output, while forms are intended form
information input.This is a fundamental inconsistency.
The HTML source for the table based form:
The CSS for the table based form:
Why You Should Build A More Semantic Form
There are several HTML elements that are
specifically intended for use inside of forms and you should always make it a point to use
them. Some of these elements include: divs, labels, and inputs. Here are a couple advantages
of using them:
Labels and inputs have an explicit, meaningful relationship. Placing these elements next
to each other in your form will help to better convey the meaning of your document to
web crawlers, screen readers and other assistive devices.
Using divs to group related items (i.e. labels and inputs) will cutdown on the amount
of code needed to markup a form. What’s more, divs were expressly intended to
group related content and using them in appropriate fashion will improve the semantics
of your document which, in turn, improves your SEO.
By applying CSS intelligently, you can use
these elements to construct a form that can take almost any shape—with less code. Furthermore,
by separating structure from presentation, you can make your form more maintainable so changes
to your layout merely require an adjustment to your CSS
(rather than an adjustment to your CSS and your
The HTML for a more semantic form:
The CSS for a more semantic form:
To Be Continued…
In Part 2, we’ll explore a
few additional attributes and elements you can
add to your forms in order to make them even more meaningful, accessible, and user friendly.