Creating a widely accessible web site

by Dave Lo

How accessible is your web site? As browsers load-up with more and more new features, it becomes more and more common to see web sites that are accessible to fewer and fewer users. Yet accessibility is important and easy to achieve.

Outline:

Myths about Accessibility

An accessible web site is one where users can easily obtain information. Some web designers don’t consider accessibility in their design because of misconceptions about accessibility. Here are some common myths.

Myth 1: Accessible means boring HTML 2.0 text.

By carefully using features that transform gracefully and by providing alternatives, a well-designed web site can provide rich contents accessible to most users. Keep in mind that text is just a medium for relaying information, it is the contents that make a site exciting or boring.

Myth 2: The blind isn’t my audience.

"Users" of your web site include not just those with physical challenges, but also search engine robots, users of terminals (text-mode), users with low-speed connections, users with cost-per-minute connections, users with small and/or monochrome displays, etc. Imagine someone web-surfing using a cell-phone with a built-in browser that has a 40 character by 8 line black and white LCD display. How accessible is your web site’s contents to this high-tech user?

Myth 3: Everyone uses BrowserX.

What you see may not be what someone else sees. Users could be running with different preferences set in their browser and computer, or with a different version of your browser, or with a different browser, or running on a completely different hardware platform. Depending on organization policy and software compatibility, they may not have a choice of which browser they use or what plug-ins they can download. Again, by using features that transform gracefully and by providing alternatives, your web site contents can be accessible to most broswers.

Myth 4: Accessibly don't apply to fast connections.

Consider the follow speed related issues: And speed is only one of the factors in considering accessibility. Security concerns may prohibit certain types of downloads or browser configuration changes. Getting the data to the user faster does not necessarily mean they are capable of viewing your data.

Easy ways to increase accessibility

Write Well

Text is still the most effective way of presenting your message using the minimum bandwidth. Techniques for writing well still apply to the web, with additional guidelines added for this new medium.

Use the active voice.

It informs your readers directly and succinctly. The passive voice should be avoided; the information is received by readers in a less direct way.

Write scannable text.

On the web, users don’t read, they scan. Three common reasons for scanning are: there is already an overload of information, extended reading on computer monitors are not comfortable, and an Internet connection costs money to establish. To make your material more scannable, organize your material and use meaningful highlights and headings.

Use meaningful links.

The text that will be hypertext links should be meaningful even without the surrounding text. The following is a prevalent example of ineffective link writing: "click here for more information about our products, or click here for technical support". The web page model of information retrieval is to select a link for more information, so we don’t need to repeat that to the user. A more effective way is to use just the links in a list:

Complement with Graphics

Accessible web design complements the text with graphics, instead of replacing text with graphics.

Provide alternatives.

Graphics and animation plug-ins and Java scripts can make a web page look cool, and sometimes even enhance a page. But how accessible is that page if these extra features are unavailable or disabled due to bandwidth or security concerns? Images can transform gracefully through the use of the alt= attribute. Other features need to have text alternatives in order for your information to be accessible.

Write Useful Alt Text.

Writing useful alt text for images is just as important as providing alt text. When an image conveys information, the alt text should convey similar information. For example, [Graph of sales figures] is typical of the alt text that one sees. A more meaningful version might be [Graph: sales have skyrocketed for 3 consecutive quarters; 16K].

Size matters.

On the Internet, the old saying "a picture is worth a thousand words" becomes "a picture costs thousands of words". In traditional printed information, the delivery cost of pictures is zero because the picture is already printed on the page. On the Internet, delivering pictures has a bandwidth cost (and thus costs the user time and money). Effective ways of reducing picture sizes include reducing the color depth (e.g. instead of 8-bit 256 colors, perhaps 4-bit 16 colors will do), reducing the resolution (a screen’s resolution is 72dpi, so a 150dpi compression level is overkill), and increasing compression ratios.

Use HTML Appropriately

Avoid changing font colors and sizes.

Font settings that are legible on your system may be illegible on a different system. This is especially true when you use smaller font sizes. Changing colors also affect accessibility. For example, say you change the text color to make the text appears legible on top of a dark background. Now if the background is not loaded (because image loading is turned off), you might be get bright yellow text or even white text on a white background. In many instances, custom font faces, sizes, and colors simply denote heading levels. In these cases, use headings <h1>, <h2> etc. in conjunction with style sheets to improve accessibility.

Be platform independent.

Don’t rely on anything that is operating system, browser or configuration dependent. For example, if you use HTML in a non-standard way, you’re tying your content to a specific browser version’s implementation of HTML. Also keep in mind users' browser preferences. For example, if you change link colors to be the same as text color because you think links are always underlined, then you've made an incorrect assumption, and your page will be much more difficult to navigate.

To frame or not to frame.

Frames are a controversial item in web site design. It’s not that frames are bad, it just that frames are very often badly applied, such as using a frame to keep a logo or advertising on the screen. There is a limited amount of space in a browser window, and very, very few web page contents are that important that they must be seen prominently at all times. Frames are good when you need to see multiple, independent pages at once (e.g. comparison of a translated work, or commentary on other web sites), or when the navigation is an integrated and intensive part of using your web site. However, a site with integrated frames means it doesn’t work well without them and won’t transform gracefully. A site with frames that can work well without frames means the site doesn’t really need frames.

A rule of thumb for evaluating a set of frames is to see how often you use the different parts of the frame. The parts that are used least often can be removed from the set.

Conclusion

It is important and easy to create web sites that are accessible to many users. Just keep in mind three basic principles: 1. Content comes first, 2. Use techniques and features that transform gracefully, 3. Provide alternatives. For more information regarding accessibility in web site design, visit the following web sites: