![[]](bvgraphics/anybrowser3.gif){kind=small}
Last Modified March 25, 1998
Introduction |
Contents |
Key Terms | Design Elements
Design Testing and Considerations |
Accessible Design Tools
Although rarely discussed, color issues are very important when designing accessible sites.
If you want to specify one of the colors (
BGCOLOR,
TEXT,
LINK,
VLINK,
ALINK), specify them all to ensure a pleasant and readable mix.
This is because some users may use different default colors than you expect,
so if you don't specify all the colors of a document they may end up with
colors which are incompatible to the point of making the document
unreadable. Even when using a background image, you should still specify
BGCOLOR, because the user may not have image loading on.
Be careful to avoid the use of
FONT colors unless necessary, since if the user has their
colors set to override those of the document, they may be incompatible
colors with the
FONT color you use and may make the text unreadable.
Also make sure to only use table
BGCOLOR when necessary, both for the reasons stated above, and
because some browsers don't support that feature, so if the text color is
unreadable against the default background color, the text may become
unreadable in a browser that doesn't support table
BGCOLOR.
When you are specifying colors for your page, use the hexadecimal color
codes (such as
"#FF0000"), and not the names of the colors (such as
"red"), as some browsers don't support the color names.
When designing pages, you should also keep in mind that many users view in 256 colors or less, and that the color palettes differ on different platforms and browsers, so make sure to keep your pages readable in 256 colors. It is common to design pages which are compatible with the 216 color Netscape color cube which is common between the Mac and Windows versions of Netscape- it won't be perfect, but it's the best approximation avaiable of colors that are unlikely to dither on a 256 color display in most circumstances. Remember also that some users may use grayscale or black and white displays, so graphics which dither badly enough that they are undecipherable should be avoided if you want to maximize your site's readability for all users. There are also issues involved in designing pages for readability by color blind users- see the special needs section for links to sites that can help.
For more information on which colors are safest for use in web pages, see:
It is possible to have a web site without any images, but it's not very common.
In order to make sure your images are fulfilling their goal, it's
necessary to consider the purpose of each image, and make sure you have
provided appropriate
ALT attributes for all of them. It's important that all
graphics have
ALT attributes because otherwise, the reader of your site won't
have any way of knowing if those graphics are expressing anything they need
to know or are simply decorative. For most graphics, descriptive or
substitute text should be used for the
ALT attribute. For bullet graphics,
or something similar works best. For horizontal rule, a
dashed line is the most useful
ALT attribute. For graphics that provide no useful content, an
ALT attribute should still be supplied- even if all it says is
ALT="decorative graphic here" or
. If the graphic is supposed to flow within the text, it
makes sense to use an ALT with no additional decoration. However, if you
want the ALT to stand out, as may be necessary in cases such as button
links, putting brackets around it, such as
ALT="[Table of Contents]" is a good idea.
For more information on using
ALT attributes in images, see the following sites:
If you think there are any graphics that the visitors to your site may want to download, you may want to specify the image size so the visitor knows how big a graphic they're downloading. You may also want to make the graphic a link to itself, so it can be more easily downloaded.
One way to speed page loading when using graphics is to specify the
HEIGHT and
WIDTH attributes for each graphic so the browser can leave
space for the graphic and load the text first. Not all browsers do this, but
it gives visitors using those browsers an opportunity to read the textual
content of your page while the graphics are loading. For more information on
helping pages load faster, see the
bandwidth conservation section. Note
that some browsers (such as some versions of Netscape) display alternative
text for images in a poor fashion- by trying to fit that alternative text
into the space reserved for the graphic by the HEIGHT and WIDTH attributes,
and cutting off whatever text won't fit. This makes it sometimes a difficult
decision to use the HEIGHT and WIDTH attributes. I recommend that they be
used anyways in most cases because it helps the large percentage of users
who browse with graphics view your pages quicker, and over time browsers
which handle alternative text in this fashion will hopefully fix it, but
this is a personal decision, and you should decide for yourself what fits
your needs.
Choosing the appropriate graphic format for your images is important to accessibility and loading speed. The two preferred formats for graphics on the web are GIF and JPEG. GIF is supported more widely than JPEG, but JPEG is supported in most browsers that support GIF. GIF images are more suitable for graphics that are smaller and have less colors, whereas JPEG is best for larger, photographic images and graphics with many colors. For more information on the difference between the two formats, see JPEG vs. GIF on the Web Design Group site. PNG is a graphic format that has a lot of promise and will hopefully become standard one day in most browsers, but right now there aren't many browsers that support it, so if you choose to use PNG graphics, try not to use them for anything that is essential content of your page. PICT, BMP, XBM, and other graphic formats aren't supported in many browsers, and tend only to be supported on particular platforms, so avoid them.
See the color issues section for more information on using colors in your images that will dither gracefully.
Image maps are sometimes useful on web sites, but they can often provide a barrier to access of site content if they aren't supplemented by other modes of navigation. Many web users don't have graphical browsers, or browse with autoloading of images turned off, which makes navigation of sites difficult if they depend upon image maps.
Whenever possible, make sure that text navigation links or a textual site map is available to make the entire site available to users without images. Don't forget that using textual navigation or separate graphics may be a viable alternative to using image maps entirely.
Indicate in the
ALT text for any image mapped graphic that it is an image map,
so that if the user can load the graphic, they can choose to do so. Also
indicate if there is text navigation available so the user can choose not to
bother loading the graphic if they don't need to.
ALT="Image Map - use text links below." is a popular way of
indicating how the user should deal with the image.
Map the coordinates 0,0,0,0 in your server side image map to your textual site map or alternate page if you have one. Some browsers (such as Lynx) send those coordinates whenever an image map link is selected.
You can provide both a server side and a client side image map, and you
should do so whenever possible, since some browsers only support one or the
other. You can do this by including both the
ISMAP and
USEMAP attributes in the image which you are using for your
image map.
Provide
ALT text for both the image itself, and for the links in the
client side map (the
AREA tags). Some browsers, such as Lynx, use the
ALT text in the client side map to provide a means of
navigating. If you don't provide ALT text, the user gets a list of URLs
instead, which is a lot less helpful.
Animated images can sometimes provide useful information, but more often they just provide decoration to a site. The main issue for making your images useful to those with browsers that don't support animated images is to make sure that the first and last frames of your image (the ones most often displayed by browsers not supporting animated images) are ones that will stand alone in usefulness. You should also consider whether it is really necessary to use animated gifs, as they annoy many users and are not easily stoppable in some browsers, and since they also tend to be much larger than single images.
If you are aiming for accessibility, it is better to present your content with logical structure than to rely upon layout. If you do need to use some layout for your page, and you find the need to create additional space between items on your page, there are a couple different ways to do it.
The way that will work in the most browsers, is by using a non-breaking
space character-
or
 . There are some situations in which this will not
work- non-English language character sets may interpret this character
differently, so if you are writing a non-English page, make sure to test
non-breaking spaces before using them in your document. There are also a few
old English language browsers which will also interpret this character as
something other than a blank space.
This approach to creating more space is more flexible than non-breaking
spaces, but is likely to work in less browsers, and if automatic image
loading is turned off in a browser, the 1-pixel graphics are often displayed
as an image to be loaded, rather than just creating blank space. In
addition, some browsers don't stretch images to fit the suggested
HEIGHT and
WIDTH supplied, so your graphic may end up being displayed as
just 1 pixel square. You should avoid using transparent graphics to create
space on your page if a non-breaking space will suffice.
The
SPACER tag is a Netscape specific tag, and you should probably
not use it if your spacing is critical to the readability of your document.
On the other hand, if a non-breaking space won't fulfill your needs, and
your document will be readable without the space, it may be preferable to
use a
SPACER rather than a transparent graphic, since if it doesn't
work in the browser, it will be safely ignored, whereas a transparent
graphic can display in an unintended manner.
Cascading style sheets give you a lot of control over positioning of elements on a page, and by separating layout from content, they do it in a way which shouldn't interfere with readability on browsers which don't support them. If the spacing is not essential to the document, it is a good idea to look into using cascading style sheets to create it, since it won't interfere with the accessibility of your document and is likely to be supported by most browsers over time. To learn more about style sheets, see the style sheets section.
Tables are one of the most useful features of HTML, but they are also commonly used in ways that make pages unreadable to browsers that don't support them. There are two main types of tables- those that are used for page layout purposes, and those that are used to format data.
Tables that are used for layout purposes don't often pose a severe problem to readability, but to be sure, you should check your page in a browser that doesn't have full table support, such as Lynx to make sure it's still readable and logically ordered. It is best to avoid using tables for layout when possible, because their rendering is unpredictable in different browsers, or even in the same browser on different platforms. This means that even though it may layout perfectly when you test it in your browser, it may come out totally different for someone else, which may make the page difficult to read. One other issue to be considered when using tables for layout of pages is that they can often make pages load much more slowly (because most browsers need to read the entire table before rendering it), so definitely make sure tables are the best approach before using them. You may want to look at cascading style sheets as an alternative to tables for layout. They are supported in less browsers, but are less likely to degrade in an unreadable fashion.
If you have tables used for formatting data, you can still make them
readable, but it requires a bit more effort. There are ways to design pages
using tables that format data so that they are still readable in browsers
that don't support them, and there are also other alternatives that should
be considered, such as using preformatted text. Design tabled content so
that if the table tags were removed, the text would still be in logical
order. Put spaces at the end of table cells and breaks at the end of table
rows so that your content line breaks in the appropriate places. Also avoid
using
ROWSPAN and
COLSPAN if possible, since their absence in a browser that
doesn't support tables is likely to confuse readers as to how the columns
should line up.
For more information on designing pages with tables that can be readable by all browsers, see:
Instead of using tables for formatting tabular data, you may be better off using preformatted text. Preformatted text loads faster than tables and should be readable by anyone. Converting an existing table to preformatted text may be as simple as loading your table into your table capable browser and saving it as text. This won't work all the time, but it is often the fastest and easiest way to do it. Make sure to use spaces rather than tabs when creating preformatted text tables, since tab spacing is not the same in all browsers.
Due to the poor implementation of frames in some browsers, non-existent implementation in others, and their poor degradability, it is best that frames only be used if appropriate and necessary.
Frames should only be used if they fill a purpose that can't be adequately addressed by other means, and if care is taken to ensure that the site is still navigable without the use of frames, both for those users who don't have frames capable browsers, and for those who are confused or annoyed by frames. Before deciding to use frames on a site, make sure you have considered the problems they may cause for your users, including difficulty bookmarking pages and back button confusion in Netscape 2.x.
For more information on appropriate frames usage, see:
Frames do provide a method of making pages readable by non frames
browsers, by displaying all text between the
<NOFRAMES> and
</NOFRAMES> tags only to browsers which don't display the
frames themselves. Therefore you can easily make framed pages readable by
non-frames browsers. Make sure that whatever information is placed on the
NOFRAMES sections is updated with the framed sections. What is
done most commonly is that two entry pages are made, one with frame links,
and one with normal links, and the
NOFRAMES section leads readers to the nonframed entry page. It
is also a very good idea to place a link to the nonframed entry page from
the front page in the framed section, so that users who dislike frames can
access the site using the non framed entry page.
A web service is available for users of non-frames capable browsers to view framed sites:
Style Sheets can be a valuable method of adding an attractive and standard design to all the pages on your site.
What is particuarly advantageous about style sheets is that they are designed specifically with browsers that don't support them in mind. By separating the design from the content of the page, style sheets allow web site designers to design their pages attractively without making their pages difficult to read in other browsers. The biggest barrier to using style sheets on your site now is that they are not supported by many browsers, but since they are designed to not interfere with proper rendering of the page by browsers that don't support them, you can safely use them now on your sites if you like.
See these sites for more information on using style sheets:
Unfortunately, style sheets are not supported in many browsers, and even in many of those that support style sheets, not all elements are supported. Some browsers that do support style sheets to some degree, are Amaya (UNIX), Arena (UNIX), Emacs W3 (UNIX), Grail (Mac, Windows, and UNIX), Internet Explorer 3 and up (Mac and Windows), and Netscape 4 and up (Mac, Windows, and UNIX). But since sites can be designed to take advantage of style sheets without causing problems for non-style-sheet capable browsers, they are worth looking into. When designing a site using style sheets, it is best to test both in browsers that support style sheets and those that don't, to ensure readability is preserved.
Cookies are a feature supported by some browsers which allow sites to keep information on the user's computer to be retrieved when the user revisits the site. Cookies are useful for many things, including page personalization, but many browsers don't support them, and many users consider cookies an invasion of privacy. Think carefully before using cookies, and try not to require their usage to view any of the content of your site, due to the lack of support and the issue of user privacy. In certain cases, such as shopping basket features, cookies may be useful enough to outweigh their problems. If you must use cookies, try to provide some alternate method of performing any tasks on your site that the cookies enable for those who can't or won't use them.
For more information on the usage of cookies, see:
There are many arguments against using javascript on web pages:
Javascript is not supported by most browsers, so if you use Javascript, you must make sure it degrades in a useful manner. In addition, Javascript code can sometimes appear in browsers that don't support it.
Even browsers that support Javascript can encounter problems with it.
If you find it necessary to use Javascript, please take care to make sure that users of non-Javascript and semi-Javascript capable browsers can still access all the content of your site, and make sure to test your Javascript in different versions of Javascript browsers on different platforms to make sure it works as expected doesn't generate errors or cause crashing.
If you must use Javascript, make sure to comment your Javascript appropriately so that browsers that don't support Javascript won't display your Javascript code when rendering your page.
Java is a promising technology, but it is still fairly new and is not supported by many browsers. If you have content on your site that can't be effectively implemented other than by Java, then you should make sure that you use appropriate alternate text for other users and test your applet to make sure it won't crash browsers. Try not to use Java if it's not necessary for presenting your content.
Currently plug-ins are supported by only a few browsers, and the plug-ins that do exist are usually only available for Windows, and only sometimes available for other platforms. Due to this, it is a bad idea to make any of the content of your site only accessible via a plug-in. Even if your visitor has the hardware and browser necessary to run the plug-in, they still must make the effort of downloading the plug-in. Enhancing your site with the use of plug-ins that aren't required to access your content won't keep your site from being accessible, but visitors to your site without the plug-in may be annoyed by the dialog box their browser may display telling them to go download the plug-in.
If you distribute files from your web site, you should consider the accessibility of the format they are in.
For text documents, it is best to distribute files in text format- don't distribute a file in a word processor's format unless it is necessary for you to preserve the formatting of the document. Remember that not everyone has access to the same word processor that you do. If you must preserve the formatting, make sure that the format you distribute your document in is likely to be available to your target audience.
If you are distributing compressed files, make sure to choose the format that makes the most sense to your users. If your files are likely to be used by people on multiple platforms, it is probably best to either distribute it in multiple formats, or to choose a format that you know those multiple platforms all can read files in, and provide pointers for downloading the appropriate software. Zip is probably the best format if you know you will have users from all platforms and can only provide your file in one format, since software is available for reading it on more platforms than any other format that I know of.
If you are distributing files that are likely to be only used by a specific platform, it is best to use the compression format which is most widely used on that platform, for example: .sit files for the Mac, .zip files for Windows, and .tar, .gz, or .Z files for UNIX.
Accessible Site Design Guide:
Introduction |
Contents |
Key Terms | Design Elements
Design Testing and Considerations |
Accessible Design Tools