Layout reorderer demo design update

Jonathan Hung jhung at
Tue Oct 5 16:36:16 UTC 2010

Hi everyone.

Attached is an illustration of a proposed update to the Layout Reorderer

The notable changes are:
- the use of a locked icon to indicate locked content.
- addition of instructions and description of usage.
- a top "drag bar" to movable content.
- an asymmetrical layout bearing resemblance to a website with 2 sidebars
and a main content area.

Accessibility question:
- How is this demo accessible to screen readers? I feel that the feedback
will need to be descriptive in order to convey the proper ordering and
relationships of objects as they are moved between columns.

1.  Do you think locked content should have a more distinctive appearance?
2. What is your opinion of using a lock icon versus having the words

Implementation question:
3. The lock icons in the content area will be implemented as background
images as to not interfere with ATs (in effect be invisible to screen
readers). However, the lock icon in the instructions will be "seen" by ATs.
It is potentially confusing that the instructions reference a lock image,
but the rest of the demo does not as far as the AT is concerned. How should
this be handled?

Thoughts on the overall design and comments to the above questions are

- Jonathan.

Jonathan Hung / jhung at <jhung.utoronto at>
IDRC - Interaction Designer / Researcher
Fax: (416) 977-9844
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Reorderer.png
Type: image/png
Size: 53228 bytes
Desc: not available
URL: <>

More information about the fluid-work mailing list