Accessible Site Design Guide


Last Modified March 25, 1998

Introduction | Contents | Key Terms | Design Elements
Design Testing and Considerations | Accessible Design Tools

Design Elements

Color Issues

Although rarely discussed, color issues are very important when designing accessible sites.

Document Colors

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.

Font Colors

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.

Table Background Colors

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.

Color Codes vs. Color Names

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.

Safe Colors and Color Palettes

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.

Alternate Text

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:

Graphics for Downloading

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.

Helping the Browser Load the Text First

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.

Graphic Formats

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.

Safe Colors and Color Palettes

See the color issues section for more information on using colors in your images that will dither gracefully.

Image Maps

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.

Alternative Means of Navigation

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.

Image Map Alternative Text

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.

Default Coordinates

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.

Server vs. Client Side Image Maps

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.

Alternative Text in Client Side Image Maps

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

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.

Non Breaking Spaces

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.

Transparent 1 pixel Graphic

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

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

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 Used for Layout

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.

Tables Used for Formatting Data

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:

Preformatted Text as an Alternative

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.

Are Frames Appropriate for Your Site?

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:

Making Framed Sites Useable By All

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

Style Sheets can be a valuable method of adding an attractive and standard design to all the pages on your site.

Separating Design from Content for Better Accessibility

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:

Style Sheet Support

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:

Problems With Javascript in Non-Javascript Capable Browsers

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.

Problems With Using Javascript in Javascript Capable Browsers

Even browsers that support Javascript can encounter problems with it.

Testing Your Javascript

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.

File Distribution

If you distribute files from your web site, you should consider the accessibility of the format they are in.

Text Documents

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.

Compressed Files

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

Cari D. Burstein - campaign at