WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Markup of 'view only' form 'mode'

for

From: D A
Date: Nov 9, 2009 3:00PM

My thread petered out a bit. I thought I'd try to kick-start it again...

To recap, I'm looking at various ways to layout some data that can be
edited in a form, but also needs a read-only view. This is a state
within a web application.

Quick sample:

form view:

Name (label) (form field)
Favorite Food (header)
ice cream (checkbox, checked)
hot dog (checkbox)
pizza (checkbox)

I now need to create 'read-only' view that just shows the data. Up to
this point, I've been using divs:

name (div.label)
bob smith (div.data)
favorite food (div.label)
ice cream (div.data)

That works, but isn't very semantic. Is that important? Can I use
something more semantic here that would also improve accessibility?

One suggestion from the last time I asked was to keep it as an actual
form, but disable the inputs. I'm not a fan of disabled forms. I find
them to bring potential usability issues into play. In addition, there
are specific form fields where this might get messy, such as when we
have a long list of check box items. We'd only want to show the items
that were selected in read-only mode.

I could create a table. There is a definite TH/TD relation. However,
it'd only be a one-row table and would make the markup a bit less
flexible (as we are going to allow for various CSS to change positions
of labels and such if desired).

A definition list 'looks' nice and proper, but from what I understand,
a DL wouldn't actually add any functionality/context for assistive
technologies.

Headers? I could wrap each div.label inside a header in stead (h3?
h4?). That would be semantic, but is would that introduce unnecessary
verbosity to anyone using a screen reader?

Leave them as a pair of DIVs? Plain, but given that they are typically
going to be read/seen in a linear fashion, perhaps acceptable?

Aside from the disabled form field options, any comments/suggestions?

-Darrel