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