[LWN Logo]

From: Tom Christiansen <tchrist@mox.perl.com>
Subject: Ten Tips toward *DIVERSITY COMPLIANCE* in Web Design
Date: 11 May 1999 10:17:36 -0700

    +------------------------------------------------------+
    | Ten Tips toward *DIVERSITY COMPLIANCE* in Web Design |
    +------------------------------------------------------+
		    by Tom Christiansen

It is extremely important that all information be maximally accessible
to everyone, even people who use systems different than your own.
If the choice ever comes down to making something should look nice for
some people at the expense of being virtually unusable to others, you
*must* choose the more humdrum look.  This is about information sharing,
ladies and gentlemen, not about holding someone prisoner.

Here are ten simple guidelines I give to people designing HTML to help
them avoid unfairly discriminating against people who aren't like thems.
This provides optimal accessibility for all.  I test all my web pages
under at least four different browsers: netscape, amaya, arena, and
especially lynx.  Some people add emacs and opera as well.  Think of it
as a form of "diversity compliance".

1) Have no absolute pixel widths for anything that isn't in pixels,
   that is, pictures.  No absolute widths for tables, table elements,
   frames, or anything textual.  This discriminates against people with
   different sized windows or fonts than you have.  Don't do that!

   Test all pages by viewing them with both a large font (24pt) and a
   small one (10pt), and both a large window (full 20" screen) and a
   small one (small 4" window, like on a lap-top).  I realize that the
   smallest viewing areas are a something of an inevitable problem with
   pictures, but you can at least minimize this risk by limiting it to
   pictures alone, not to text.

2) Don't put everything in a table just because you're trying to
   control widths (which you should *not* be doing).  Doing so means
   that nothing can be viewed until the whole page is downloaded, which
   unfairly discriminates against people on modems.  Don't do that!
   Small embedded tables are ok, though.  Break any large tables up
   into manageable chunks.  Test viewing of all pages over a 9600 or
   at most a 19.2 baud modem connection.  You might even try multiple
   simultaneous loads over that connection for a taste of the real world.

3) All <IMG> tags must have useful ALT-text, and be navigable even 
   without pictures.  Not doing this unfairly discriminates against
   the visually challenged -- and the modemspeed-challenged as well.
   Don't do that!  Test this by loading the pages with lynx, or with
   autoloading of graphics disabled.

4) Do not rely upon subtle color shadings to convey information.  First
   off, this unfairly discriminates against the color-blind, of
   which there is no shortage in the male population.  Don't do that!
   Furthermore, what you see as a color is not absolute.  People have
   different monitors, and other applications might have stolen available
   colors from the available palette.  You might say "orange", and see
   orange, but people on different systems who aren't even color-blind
   might see yellow or red instead, just because this stuff is already
   used in their X server.  Most layout people don't realize this, but
   it's the way the technology works; colors just aren't what you think
   they are.  And when used poorly, they are distracting.

4) Make sure that you use nothing but standard HTML.  Never ever use
   MS-HTML -- ever.  It turns out that most tools that written by
   Microsoft, or which target Microsoft systems, intentionally
   employ non-standard, invalid extensions to plain ASCII text
   and to the HTML character set.  This unfairly discriminates
   against people who do not wish to be locked into a closed,
   proprietary systems.  See http://mox.perl.com/misc/ms-ascii or
   http://www.fourmilab.ch/webtools/demoroniser/ for further details.
   
5) Make sure the HTML validates.  W3C has several validators, including
   weblint -pedantic and more.  It's very important to use these,
   and to fix them if they've gone awry.  Weblint is but one tool
   out of many.  Go to www.w3c.org for more validators. 

6) Neal Postman wrote: "Contempt, rather than celebration, is the proper
   response to advertising and the system that makes it possible."  If you
   do not wish to held in contempt, then don't force-feed readers adverts
   they don't want to see it.  If you feel you must use ads, these should be
   subtly placed, low-key, and easily disabled by an opt-out strategy;
   a good way to do this is to cluster them all on a separate page
   that has only advertisements.  Most importantly, there must be no
   absolutely advertising on pages that are essentially informational,
   like manpages or the magazine's articles.

   This should not be misunderstood to be an admonition against
   establishing standard headers and footers to provide a uniform look
   and feel for the whole site are of course expected and fine, however.
   Discrete textual footers are of course desirable.

7) There must be no moving pictures or pop-ups, *ever*, even if someone
   wants to personally pay ten grand for it.  These are unbelievably
   disorienting -- even debilitating -- especially to that non-trivial
   portion of hackers with attention-deficit disorder or task-switching
   deficit disorder.  The viewing of web pages must not put the reader
   at risk of epileptic seizures.

8) Never use plug-ins of any sort.  Are they available for all platforms?
   Are they available for all browsers?  Of course not.  Therefore,
   plug-ins only limit your audience.  They probably violate several
   of the other principles outlined about.

9) Eschew frames, javascript, java, and style-sheets.  These are nearly
   as bad as plug-ins for much the same reason.  Additionally, some sites
   completely disable javascript and java in the proxy at their corporate
   firewall due to security concerns.  If you can't avoid using these,
   make sure you offer frame-free and javascript-free versions.

10) There is a special pit of hell reserved for those who use <BLINK>
    tags.  Don't even consider it.  While not as bad as moving pictures,
    it has similarly deleterious effects upon the target audience,
    unfairly discriminating against the differently attented.  You won't
    want to be trapped in an elevator with a red flashing strobe light.
    So don't do so to others.
-- 
 "Even the most experienced programmers find faults in their programs"
 HP-11C users's manual