Freepages-Help-L Archives

Archiver > Freepages-Help > 2010-02 > 1267201122


From: the cohens <>
Subject: [FreeHelp] Need help formatting accessible tables
Date: Fri, 26 Feb 2010 08:18:42 -0800


This is a different twist on accessibility issues, one of visual
accessibility for people whose browsers do not display tables. The
code that may make a table understandable for someone using a screen
reader does not necessarily view well in all browsers without added
tweaking.

I decided to put my city directory transcriptions into tables instead
of xls (spreadsheet) files, but I now am having trouble getting the
formatting right.

I have a page up with various test formats on it [different test
formats used for different years]. I have two basic issues to
resolve:

1. make more space between the page numbers and the listings themselves.

2. make the space above, below, and between paragraphs or cells look
decent not only in standard browsers, but also in my oddball older
opera and lynx browsers, so they are readable by folks on mobile
devices as well, on systems for which more up to date browsers are
not available.

http://freepages.family.rootsweb.ancestry.com/~thecohens/dubinskydir.html

I think I can fix #1 by adding an empty cell as a spacer between the
left and right cells without causing problems in the weird browsers.
I had used cellpadding in an earlier version, but am afraid that might
have created too much empty space, which is why I think I took it out.

But what I have no idea how to resolve is #2.

What I find from the Feb 14 version of the page up there now:

1900 1902 1906 look good in opera, bad in lynx (not enough spacing)

1901 1903 1904 1905 look bad in opera, good in lynx

1887 to 1899 look good in lynx, but opera shows too much space between
cells and between tables and headers for the next year, and I would
guess the same is true for IE and Firefox, too much empty space.

What I mean when I say "looks bad in lynx", what I mean is there is no
space between cells, so the entries are all run together. The only
ways to insert space between tables and cells recognized by lynx that
I have found are to either insert "p" tags, or a set of 2 "br" tags
with an "nbsp" between them.

I tried the trick of inserting space with a div tag, but that was not
recognized by my browsers.

What I see for years like 1900 and 1902 in lynx right now looks like
the following sample snip, which has no space between Mary Doe and
Page 234:

---example 1--
Doe, John, baker, 10 Main St.
Doe, Mary, seamstress, 25 Burch
Page 234

Doe, Morris, painter, 23 Fir St.
Doe, Phillip, teacher, 25 Burch
--end example 1--

I want the above to look like the following [with space above and
below the table's page number cells] in browsers that cannot display
tables, and also to render properly in IE, firefox, etc.

---example 2--
Doe, John, baker, 10 Main St.
Doe, Mary, seamstress, 25 Burch

Page 234

Doe, Morris, painter, 23 Fir St.
Doe, Phillip, teacher, 25 Burch
--end example 2--

I put the page through a test at http://wave.webaim.org/, and it gave
me alerts about issues in other parts of the page [stuff in external
links and headers and footers], but no help with my table display
issues.

Thanks!

This thread: