Accessible Design Guide - Design Elements

Links

Reserved Characters

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.

Case Sensitivity

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).

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.

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.

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. The 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:

Images

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, 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 ALT attribute.

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 WIDTH and 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 WIDTH and HEIGHT attributes, and cutting off whatever text won't fit. This makes it sometimes a difficult decision to use the WIDTH and 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.

Graphic Formats

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

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.

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. 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 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.

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.

Spacing

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 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 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

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.

Frames

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 <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.

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 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.

Cookies

Cookies are a feature supported by most 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 some browsers don't support them, and many users consider cookies an invasion of privacy and disable them. 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:

Javascript

There are many arguments against using javascript on web pages:

Problems With Javascript in Non-Javascript Capable Browsers

Javascript is not supported by all browsers and Javascript implementations vary between browsers, so if you use Javascript, you must make sure it degrades in a useful manner. In addition, Javascript code can sometimes appear on the screen in browsers that don't support it, so if you use inline Javascript be sure you comment the code appropriately so older browsers will be able to ignore it.

Problems With Using Javascript in Javascript Capable Browsers

Even browsers that support Javascript can encounter problems with it.

  • Javascript has a tendency to crash browsers.
  • Javascript support for various functionalities varies widely so writing cross-browser supporting Javascript can sometimes be difficult (popular libraries such as JQuery will often work around many of the browser specific issues for you)
  • Due to security concerns and features of Javascript which sometimes annoy users (like popup windows), some web users turn Javascript off in browsers which support it. Because of this, you can't count on Javascript being available even if people are browsing with supported browsers.

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 and doesn't generate errors or cause crashing.

Providing Alternative Content to Non-Javascript Users

If you use Javascript on your site for anything that provides content you will need to provide alternative access to that content for non-Javascript users. To do this, you can use the NOSCRIPT tag to encase the alternative content. Browsers with Javascript support will ignore the content inside the NOSCRIPT tag and browsers which don't support Javascript will show the alternative content. Note: It is much better to use the NOSCRIPT tag for alternative Javascript content than to try to guess from the browser name whether Javascript is supported because it may be disabled even if supported in the browser.

Commenting

If you must use Javascript, make sure to comment any inline Javascript appropriately so that browsers that don't support Javascript won't display your Javascript code when rendering your page.

Java

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.

Plug-Ins

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.

Screen Size

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.

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. 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.

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.

> Next Section (Testing and Considerations)