WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Newspaper style captions

for

From: Jukka K. Korpela
Date: May 11, 2003 9:11PM

On Sun, 11 May 2003, Kimberly Chapman wrote:

> Basically, he wants the picture to be floating in the text with the caption
> right under the picture, and for it to be clear that the caption is not
> part of the body text. Now, by caption, I mean the newspaper meaning of
> caption...I understand that there is a caption tag in HTML but it doesn't
> seem to bear a resemblance to this style.

The caption element is for table captions only. But it might actually have
a role to play here.

> How do I do this in a manner that is both accessible and is visually
> understandable? I don't want to use a table because then the paragraph
> that the picture is integrated with will appear above or below, not around.

You could use an align attribute in a table element, and draw borders
around the table. If you have <table align="left" ...>...</table>, then
subsequent content will flow around the table on the right, which is
probably the goal here. (Posting the URL of a PDF file showing the desired
appearance could have helped to make sure we understand the issue the same
way.)

But there are more modern methods as well, based on the principle that in
CSS you can float virtually everything, not just images. Here's a simple
approach: In HTML, use
<div class="illus"><img ...><div>Caption text</div></div>
before the text with which the image is to be integrated. This means that
in non-CSS browsing situations, the image or its alt text comes first,
then the caption as a block of its own, then the normal text. This should
normally be tolerable, but you could always add
<div class="explain">The following picture illustrates the point
made in the text after it.</div>
with .explaing { display: none; } in CSS, though it would be difficult to
write such explanations without sounding too naive.

Anyway, in CSS you could then have e.g.

.illus { border: solid gray 1px;
margin: 0 0.6em 0.2em 0;
float: left;
text-align: center;}
.illus div { font-style: italic;
font-size: 90%;
padding: 0.1em 0.2em; }

It would take some experimentation to create a style sheet that creates
the desired visual appearance, but once done, it could be used
consistently across a site.

> Only he wants captions below like I did here at the bottom of the page:
> http://citizenalert.org/newsltr/winter2003essay.html

That page has some serious accessibility issues. If, for example, I print
preview it for a standard A4 size print, the first few letters of each
line of text are chopped off. This is because the page quite unnecessarily
imposes some faily large minimum width for its presentation - which means
that it won't work well in "small" browser windows. Actually I don't think
my typical browser window size, half of a normal 17" screen is
particularly small; good accessibility means a page's ability to adapt to
considerably smaller display areas, unless the content itself prevents
that. Here the problem has several roots: the navigation menu on the left
(which means eating up horizontal space), the relatively large photo, and
the rather wide logo.

The page carries a set of icons claiming this or that conformance or
validity. What is the real value of such icons to users? I'm sure it's
negative. What would _you_ think if you saw or heard, on a page you're
visiting, something like "R7K SGZF 42.5!"? This is what all those
"W3C HTML 4.01!" means to most users. For some
more arguments see http://www.cs.tut.fi/~jkorpela/www/acctools.html#stamp
http://www.cs.tut.fi/~jkorpela/html/validation.html#icon

(Besides, as so often, there's a mismatch between the claims and the
actual content. For example, the embedded style sheet
width=556px;height=78px does _not_ comply with any CSS specifications.)

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/