Consider the Computing Device and Software the User may be Using

First, keep in mind that the users of your website may be accessing your web pages over many different types of devices, which may include:

• Desktop computers running Windows, the Mac OS, Linux, or other operating systems
• Laptop computers running Windows, the Mac OS, Linux, or other operating systems
• A set-top box connected to a television set
• A tablet computer
• A PDA, such as a Palm Pilot
• A cell phone
• They may use an iPod to listen to or view an audio recording or video recording they downloaded from your web site.

Web site users will probably be accessing your site through Microsoft Internet Explorer, Firefox, Opera, Safari, or Internet Explorer for the Macintosh, but there are many other web browsers. Some users may be using a text-only browser, such as Lynx. Some users may use screen readers, voice browsers, or other assistive technologies. Some may use older versions of a web browser. Some widely used web design tools such as CSS display differently over different browsers, and monitors vary widely in size and resolution. We also need to keep in mind that your user’s browser can only display the fonts that are installed on his or her computer. The heading you typed in the Harry Potter font may look clever and cute to you, but it will almost definitely not be on the user’s computer, so your heading will display in the default font selected for his or her web browser.

Organize the Content of Your Web Page to Make it Easily Understood and Navigated

Frames, Tables, CSS - Don’t use frames to organize the content on your page. They often create problems for all users, not just those with physical challenges. You can do everything you can do with frames MUCH better with CSS! If you use tables, use them to present tabular data, not to lay out your web pages. If you use tables, use header tags that will connect the header and content in the cells under it. Do not nest tables inside tables, inside tables, etc. Do not use blinking text or other elements. Everyone but you will hate your web page if you use blinking text! Use CSS to layout your web pages and to separate the formatting from the content, but don’t get carried away and fill your pages with unnecessary DIVs (web page sections). Don’t use JavaScript when you can accomplish the same effect with simple HTML code. Web browsers often do not display JavaScript correctly, or do not display it at all. If you do use JavaScript, use a “<noscript>” tag so browsers that can’t interpret JavaScript can display your web pages.

Fonts and Colors – Use the half-dozen or so fonts that display well on monitors (Times, Times New Roman, Arial, Helvetica, Verdana, Georgia, Trebuchet). When specifying font size use ems or percentages instead of points or pixels. For bold text, use the “<em>” tag instead of the “<b>” tag, because the “<em>” tag will allow the screen reader’s tone to change so the text is emphasized. Always use a text color that will be readable on the monitor screen. Never, for instance, use dark blue text with a black page background. Don’t refer to colors in the text of your pages; for instance, don’t say, “Refer to the blue box.”

Hypertext Links – Describe the link with text that will make sense to a viewer who is using a screen reader. For instance, do not use “Click here for this week’s reading assignment.” Something like, “Reading for the week of September 10 is in file sept10.html,” is much better. Use link colors that will display legibly on all monitors. The old standard of blue, red, purple links still works well, unless you use a very dark page background.

Using Images on Your Web Pages

Always use the “<alt>” tag with each image you place on a web page. For example, if you insert the image of the textbook used in your course, the alt tag could read, “Perl for Dummies, textbook for Programming 2306.” Remember, if you use a background image on a web page, there is no alt attribute for it. If you use charts and graphs in your pages, summarize the information contained in them so they are merely supplementing the information on the page. If you use image maps, provide alternative text for each hot spot (clickable area) on the image map.

Tips for Using Multimedia on the Web

If you use streaming video with dialogue or sound, include close-captioning within the video or provide a text version of the dialogue. If your media requires a plug-in such as Apple QuickTime or Flash, and you use an image as a link to it, use alt text to describe the link. If you use Flash animations, upgrade to Flash 8 if possible, because it has enhanced accessibility options. Please don’t use JavaScript to detect Flash on the user’s computer and save yourself some headaches!