WebAIM - Web Accessibility In Mind

E-mail List Archives

Markup of 'view only' form 'mode'

for

From: D A
Date: Nov 2, 2009 10:25AM

When marking up a form, there are logical containers: Label and Input.
Easy enough.

I'm working on an application where we also want to display the data
in the same visual layout as 'edit mode' is with the forms.

We're debating what to replace with Label and Input tags with in that situation.

I started with a div.dataitem wrapper and then a div.label and div.data

Some options that we're debating:

1) a table. A table would make semantic sense with TH and TD, but
given that there'd only be one 'row' of data it seems overkill. In
addition, it makes toggling of the display (labels on top of data vs.
to the side of data) much more complicated and likely not something we
could accomplish with CSS only.

2) a definition list. I like the semantics of this. However, there are
issues. One, there isn't a block level wrapper around each label/data
pair. Secondly, it seems that a DL would be no better than generic
DIVs in the context of screen readers or keyboard navigation.

3) a H3 + div/p pairing. Using headers seems a bit overkill for
individual data items but, then again, what is a TH if not a header?
This seems to be the best compromise in terms of layout flexibility,
semantic relevance, and giving support to assistive technology.

Any thoughts on the above? Does #3 sound like the way to go? Any other
alternatives we should consider?

-DA