E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: D A
Date: Mon, Nov 02 2009 10:25AM
Subject: Markup of 'view only' form 'mode'
No previous message | Next message →

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

From: Andrew Kirkpatrick
Date: Mon, Nov 02 2009 10:30AM
Subject: Re: Markup of 'view only' form 'mode'
← Previous message | Next message →

Why not just mark the form controls as read only in the read only state of the form?

Thanks,
AWK

Andrew Kirkpatrick

Senior Product Manager, Accessibility

Adobe Systems

= EMAIL ADDRESS REMOVED =

From: D A
Date: Mon, Nov 02 2009 10:40AM
Subject: Re: Markup of 'view only' form 'mode'
← Previous message | Next message →

> Why not just mark the form controls as read only in the read only state of the form?

From a usability standpoint, this seems to bring with it some issues.
Maybe not inherent to the method, but given that it's not an oft-used
approach. Seeing the data in a form layout of some sort would seem to
indicate that I can interact with it on some level, and from my
understanding of 'readonly' that is the case in some browsers (you can
modify the fields but nothing would obviously be saved).

There's the additional issue that in various situations the layout of
'read only' would be different than 'edit mode'. So being able to
further separate the visual cues would help.

-Darrel

From: Karl Groves
Date: Mon, Nov 02 2009 10:50AM
Subject: Re: Markup of 'view only' form 'mode'
← Previous message | Next message →

If that is the case, you can use CSS to alter the appearance of the
read-only input.
Alternately, (and probably preferred, in this case) you can use 'disabled'
attribute.

http://www.w3.org/TR/html4/interact/forms.html#h-17.12





Karl Groves
Director of Strategic Planning and Product Development
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8961 (o)
443.889.8763 (c)
http://www.ssbbartgroup.com

Accessibility-On-Demand


>

From: D A
Date: Mon, Nov 02 2009 11:15AM
Subject: Re: Markup of 'view only' form 'mode'
← Previous message | Next message →

> Alternately, (and probably preferred, in this case) you can use 'disabled'
> attribute.

True, but aren't I still looking at the full set of form data rather
than just record data? For instance, we have a need where one might be
checking items from a long list of checkboxes. In 'view' mode, we'd
only want the items that were checked to be displayed.

I could modify the disable check box list via javascript and
selectively remove items from it but that seems to be adding a
different level of complexity in terms of making sure it's accessible.

-Darrel

From: D A
Date: Mon, Nov 09 2009 3:00PM
Subject: Re: Markup of 'view only' form 'mode'
← Previous message | No next message

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