WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alternative stylesheets

for

From: Jukka K. Korpela
Date: Dec 13, 2005 1:00AM

On Tue, 13 Dec 2005, Amanda Penrose wrote:

> I have an alternative stylesheet to create a 'printer friendly' layout
> - simplifies the design and removes the navigation.

In principle, that should be enough, if the <style> elements have
adequate title attributes, with content that is understandable in
a user interface. In practice, it isn't enough, since some browsers,
most notably IE, do not support alternate style sheets the CSS way.
Instead, you would need to create two versions of a page, each
with a different style sheet as its normal (persistent) style sheet,
and this is apparently what you have done.

> How should I label the link to get BACK to the 'normal' layout/design?

BACK? When someone arrives at a page through a link or a search engine,
or maybe after typing the address the manually, "back" means something
different than you expect. Don't write "Back to XYZ", write "XYZ".
Well, you seem to have done so, but "Back to..." links are surprisingly
common.

> At the moment the links look like this
>
> Style: Print - Normal
>
> Where print and normal are links.

Only one of them should be a link. A link should not be
"self-referencing", i.e. refer to the current page (as a whole - same-page
links to specific destinations, with href="#something" are of course
a different matter). If you wish to make things as clear as possible,
you could have

Style: Print (now in view) / _Normal_

where _..._ indicates that ... is a link. Or maybe you could use
"Screen" instead of "Normal", but this is debatable.

There's a minor problem: that text would be printed too, and it looks
rather foolish on paper. You could avoid this by using CSS code
that suppresses it on printing.

On the other hand, you could do the whole thing that way. Instead of two
pages, each with a different style sheet, you could use a single page
and a single style sheet (or two style sheets but one automatically
including the other via @import) that has different rules for different
media, using

@media print { ... }

No links and no user action would be needed to select between the styles:
whenever the page is printed, the @media print rules take effect (and can
be organized so that they override the normal rules). The disadvantage is
that users will be surprised and users may think that the page is not
printable, or they try to find out a way to suppress the menus etc.,
without realizing that it has been taken care of. Users can use
the Print Preview of a browser to see what the page will look like when
printed, and experienced users often do this routinely (since they know
that many pages print _badly_). So there's no simple answer, but as a
rule, I'd take the path of progress (using a simple approach in the
authoring side, avoiding references to technicalities in visible page
content, and promoting the idea that a page may look different on screen
and on paper, just as it may look different on different screens
or with different settings).

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