Certain characters are reserved and can not be used in URLs without encoding (in hexadecimal format). Some browsers may handle some of these characters properly anyways, but this does not indicate that these characters are safe to use without encoding in any browser. For example, spaces are special characters that aren't allowed in URLs without encoding them to
%20. Internet Explorer users may not catch this problem since it error corrects for this, but Netscape and many other browsers do not, so you should be especially careful to encode these properly. In general, you should avoid the use of characters in your file or path names that may require encoding and you should always encode a character if there is some doubt as to whether it can be placed asis in a URL. As a rule of thumb, any character other than a letter, number, or any of the characters $-_.+!*'(), should be encoded to their hexadecimal equivalents.
URLs (Links) are generally case sensitive. Some web servers may not be case sensitive (this generally only affects a server, not a browser), but it is best if you create all links as if they are case sensitive so that you don't have to change them if you move from one server to another. (The domain part of a URL is not case sensitive, but the rest of it can be).
Although rarely discussed, color issues are very important when designing accessible sites.
If you want to specify one of the colors (
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.
It is now recommended that formatting specific settings like colors be set in a style sheet rather than in the HTML itself (note that when setting colors for the BODY you should still set them for all types of text). This will make it less likely that the colors cause a problem for the user and allow a separation of style from content. It will also probably reduce the amount of repetitive tags needed on your pages. Note that it is possible to set colors in both places but care should be taken not to rely on colors set in CSS when setting colors in HTML, so that if the style sheet is not used the user won't end up with an unreadable combination.
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
FONT tag is also depreciated in newer versions of HTML so if you want to color your text it is better to do that in a style sheet.
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. Setting the table background colors in a style sheet is the preferred method and less likely to produce unreadable combinations.
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 all the color names.
Safe Colors and Color Palettes
When designing pages, you should also keep in mind that some 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 available 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, substitute text should be used for the
ALT attribute (depending on whether the graphic is there to serve a functional purpose or to illustrate something). For bullet graphics,
ALT="*" 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="". 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. Note that there is also a
TITLE attribute which can be used to provide descriptive text associated with an image in addition to the replacement text provided by the required
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
HEIGHT 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 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 attributes, and cutting off
whatever text won't fit. This makes it sometimes a difficult decision to use
HEIGHT 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 most browsers these days will use a popup or some other format to display the alternative text instead, 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 three preferred formats for graphics on the web are GIF, JPEG and PNG. GIF and JPEG are more widely supported, but recently some browsers have been dropping GIF support because of patent concerns. PNG is less well supported but is typically supported in newer browsers and doesn't have the same patent problems that GIF does. 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 appropriate for replacing both GIF and JPEG in some cases. Browser support for PNG is now fairly good and may make it appropriate for you to use PNG on your pages, although there are still some browsers that don't support it and some which don't support the full specification (especially alpha channel transparency), so keep that in mind if you're putting important content in images. Also note that PNG does not support animation although there is a new standard called MNG which does, but which isn't yet supported well. 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 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. Some 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. Search engines in particular can't typically navigate sites with 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.
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. Although pretty much all browsers support client side maps if they support image maps, there are still some very old browsers which only support server side maps. To use both types of image maps you can include both the
USEMAP attributes in the image
which you are using for your image map.
Alternative Text in Client Side Image Maps
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.
Common sense tip: Don't use animated images on a page unless you want to draw extra attention to that image or that area of the page. Animated images tend to distract users from other sections of the page and draw their eye to the animation. Many web designers make the mistake of using animations as much as possible, rather than saving animations for specific cases in which attracting the user's eye is the main goal. This diminishes the effectiveness of the animations, as well as bogging down page loading and distracting the user for little useful effect.
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-
. 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 fewer 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
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
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
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
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
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 older browsers.
For more information on appropriate frames usage, see:
Making Framed Sites Usable By All
Frames do provide a method of making pages readable by non frames browsers,
by displaying all text between the
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
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,
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.
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 fully supported by all browsers (although at this time support is pretty widespread for most CSS features), 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 sheet support varies widely between browsers and there are some which have no style sheet support. Since sites can be designed to take advantage of style sheets without causing problems for non-style-sheet capable browsers, they are worth using, but be careful about using them in a way that can cause content to be unreadable when the style sheet is not loaded. 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. Note: Most compatibility issues you'll encounter when using style sheets are in browsers which partially support them (rather than those which gracefully ignore them), so make sure to test carefully and check the online style sheet references.
For more information on the usage of cookies, see:
Java is a promising technology, but it is still fairly new and is not supported by many browsers, and in addition, many users turn Java off in their Java capable browsers for speed, security, or reliability concerns (some corporate firewalls filter it out too). 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.
Although it is popular to design pages targeted for a specific screen size, this is rarely a good idea. Keep in mind that many users may not have a screen big enough to display the whole page (and although vertical scrolling is considered an acceptable solution, horizontal scrolling is almost never a good idea). This is especially an issue for users on specialized devices such as PDAs and television based browsers, although many browsers on small screen devices compensate for this issue by ignoring certain formatting instructions or reformatting the page to fit. It is also an issue for people who prefer to web browse in a window that doesn't take up the entire screen (very common on non-Windows platforms) and for those who set their font sizes higher than normal (especially common with older Internet users who may have difficulty with small default font sizes). If you design your page to be formatted to fit a certain size screen there are a lot of things that can go wrong for your site visitors, even in the most popular browsers.
Whenever possible keep formatting with absolute pixels sizes to a minimum and tend towards use of percentage sizes. Try your page at different window sizes and font sizes so you can catch the most common problems with readability that exact pixel sizing will exhibit. If you must use absolute pixel sizes, assume a large font and a small screen so that your page will work with the largest variety of visitor's environments.
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. Adobe Acrobat format (PDF) is available to most users, so if you must preserve formatting, distributing documents in PDF is probably the easiest and most commonly readable way.
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.
> Next Section (Testing and Considerations)