Accessible Design Guide - Design Elements

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

For a web based URL encoding tool see:

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

It is recommended that formatting specific settings like colors be set in a style sheet rather than in the HTML itself. 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. You may also want to ensure that you set the document wide colors for all link types as well as background and text colors when you set any, so that if there are unexpected defaults in the browser you don't end up with an unreadable mix.

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.

Color Contrast

When choosing a color palette for your site, be sure to choose colors with sufficient contrast. This is important not only for color blindness, but also for people with low contrast sensitivity, problematic lighting conditions and general readability. W3C guidelines recommend that you ensure a contrast ratio of at least 4.5:1 exists between text and background colors.

Color Blindness

Approximately 8% of people are affected by some degree of color blindness, so it's important to take into account those users when making color choices on your website. This is a factor not just for general readability of content, but especially for cases where the meaning of your content is lost without color cues, such as in charts where the only distinction might be the color.

For more information on accounting for color blind users in your design, see:

Images

It is possible to have a web site without any images, but it's not very common.

CSS Based Decoration instead of Images

Historically images were often used for content such as bullets, buttons and headers to make them stand out. CSS is now a better solution to most of these needs. Whenever possible, use CSS to improve the styling of text rather than replacing it with images.

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 images have ALT attributes because otherwise, the reader of your site won't have any way of knowing if those images are expressing anything they need to know or are simply decorative.

For most images, substitute text should be used for the ALT attribute. 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 images that provide no useful content or repetitive content, ALT="" should still be supplied so that speech readers know to ignore it.

For more information on using ALT attributes in images, see the following site:

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 PNG are non-lossy, which means that no data is lost when saved in that format. JPEG achieves better compression at the cost of loss of some data. Whenever you are using a JPEG you should always make any changes in the original non-lossy format rather than editing and saving the JPEG format. JPEG and PNG support a larger range of colors than GIF, which is limited to 256 colors. For images without a lot of color, GIF can be preferable due to small size.

GIF and JPEG are more widely supported, but there are patent concerns regarding GIF which discourages the use of them. PNG is supported in all modern browsers, but some older browsers do not fully support alpha transparency in PNG or animated PNG.

For certain types of graphical content it may be wise to look into using SVG, which is more of an image recipe than an image. This is a very popular format for generated graphical content like charts and maps. However some advanced SVG functionality is not reliably supported in all browsers so that should be taken into account.

For more information about which image format is appropriate for various types of images, see:

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.

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. This is usually the best approach to optimizing the spacing of your content. To learn more about style sheets, see the style sheets section.

Non Breaking Spaces

If you are looking to force extra space without allowing the browser to break between elements, a non-breaking space may be the easiest approach. To insert a non-breaking space character, use   or  .

Transparent 1 pixel Graphic

This is the most popular historical approach to creating space, but with widespread support of cascading style sheets it is no longer recommended to use images to force spacing.

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 are not generally recommended for layout purposes now that cascading style sheets support is widespread. When using tables for layout the content can sometimes be organized in an unreadable format in cases in which the tables are not supported, such as in speech readers. You should ensure that if you do use a table for layout that the content is still readable and logically ordered without the table structure. 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).

Tables Used for Formatting Data

If you have tables used for formatting data, there are some recommended techniques to improve accessibility. Providing a caption, properly identifying header scope, and avoiding elements which span multiple rows and columns whenever possible will help users dependent on screen readers to understand the content.

For more information on formatting data tables for accessibility, see:

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. They may also result in users ending up on non-framed versions of your content via search engines without a way to navigate.

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. All modern browsers support most CSS attributes, although some newer ones have spotty support.

See these sites for more information on using style sheets:

Style Sheet Support

Unfortunately, style sheets sheet support varies widely between browsers. 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 some attributes are not supported or are implemented in a buggy fashion. Before using any newer CSS attributes for critical content, you should check to see how widely the attribute is supported.

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 and shopping cart functionality, but they are sometimes blocked or disabled for privacy or security reasons. Try not to require cookies for any functionality for which they are not necessary.

Javascript

Javascript is widely used for advanced functionality on web sites, but browser support varies widely and it can sometimes be blocked or unsupported in some browsers so it should be used sparingly. Many web design techniques which once required Javascript to implement can now be implemented more efficiently with pure CSS.

Problems With Using Javascript in Javascript Capable Browsers

Even browsers that support Javascript can encounter problems with it.

  • Javascript can make browser crashes more likely.
  • 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 some Javascript functionality 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. It's best whenever using newer Javascript features to look up how widespread the support is for the feature before relying on it.

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.

Java

Java was once a promising technology for advanced web functionality but due to security and other factors, it's no longer widely supported by 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.

Plug-Ins

Plug-in support varies widely across browsers and platforms and some can have serious security issues (such as Flash), so it is recommended that you avoid requiring any plug-ins to access content on your site unless absolutely necessary. Now that HTML 5 is widely supported by browsers there are better alternatives for the vast majority of features that once required a 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 mobile phones 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 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 pixel sizes to a minimum and tend towards use of percentage sizes or other relative measurements. Try your page at different window sizes and zoom levels 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.

Responsive Design

With the widespread popularity of mobile browsers, adjusting content layouts to a variety of screen sizes has become more important. CSS provides media query support which can allow you to apply different CSS rules based on the screen layout. At smaller screen sizes you may want to suppress certain decorative content, adjust the display and functionality of navigational elements, or collapse multiple column layouts.

For more information about responsive design:

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.

> Next Section (Testing and Considerations)