Suggestions?

I have two scenarios that I, a) need to make as accessible as
possible, and b) need to keep the code as clean as possible.  The two
examples below are similar to what you might see on some kind of
aptitude test--In example 1 the letters on the second line need to
correspond to the word directly above it.
Example 2 has a line number every 5 lines that needs to be associated
with the line directly to the right of it.


Example 1:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
             A                    B             C                         D


Example 2:
	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	  Aenean mi metus, rutrum sed, interdum id, convallis in, mi.
	  Quisque luctus accumsan lorem. Suspendisse pellentesque.
Line	Donec lacus nulla, blandit scelerisque, consequat vitae, sollicitudin
5	  vel, lacus. Sed ultrices suscipit odio. Pellentesque sem purus, auctor
	  vitae, lobortis sit amet, convallis id, orci. Fusce leo lectus, fermentum
	  eu, scelerisque a, rutrum aliquet, mi. Phasellus mi mauris, mollis eget,
	  tincidunt at, lobortis id, magna. Suspendisse et tellus. Pellentesque
	  habitant morbi tristique senectus et netus et malesuada fames ac turpis
10	egestas. Donec elit eros, auctor eget, dapibus vel, porta ullamcorper,
	  diam. Proin ullamcorper placerat diam. Vestibulum tellus. Nunc suscipit
	  blandit wisi. In hac habitasse platea dictumst. Morbi pretium libero eu
	  arcu. Ut pharetra sapien ac felis. Vestibulum nibh risus, imperdiet sit
	  amet, facilisis non, volutpat non, elit. In dignissim purus et sem.


So far, for both examples, the best I've come up with is to put the
information in tables, using THs with scope to relate the data.  The
problems with this method are a) the code is messy and difficult to
update and b) since the information is split into different cells a
screen reader wouldn't read the entire text without having to be
manually advanced--not to mention that it could be terribly confusing
to find out that there are x headers in the table (possibly giving the
user the impression that there is some tabular data to read)

I've tried to come up with a CSS-based solution for this but haven't
found anything that would seem to work better.

Any thoughts?

Thanks.

Received on Wednesday, 1 December 2004 22:03:42 UTC