Request a meeting room reservation at Northside Learning Center

Web Accessibility: Tips & Tricks

The following are ideas to make your web page(s) more accessible to a wider variety of users, including visuall impaired persons and Web surfers using cell phones or PDAs. Many of these ideas come from the excellent website: www.diveintoaccessibility.org/.

1. Doctype, XHTML, and Language

Doctype tells a Web browser what version HTML or XHTML you're using to build your page. Dreamweaver usually takes care of the doctype for you. Look at the very top of your Web page (in the source code) to see this. It probably looks something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

or this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Knowing your doctype and the version of HTML or XHTML you're using is essential for specifying the language of your page, as well as for other accessibility issues. When making a new page in Dreamweaver, you can often choose between HTML or XHTML. If you are designing with handheld (cell phone, PDA, etc.) users in mind, XHTML is the better choice.

What is XHTML? It's a slightly stricter, more consistent form of HTML. The differences are not very big at all, and you can learn to write XHTML very easily.

Language is also important. It's very easy to specify the language, by adding a short attribute to the <html> tag. If you're using some version of HTML (as opposed to XHTML), your <html> tag should look like this:

<html lang="en">

XHTML documents have a slightly more complex language statement. Here is the statement for XHTML 1.0:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Specifying the language for your page is helpful for viewers using JAWS (Job Access With Speech), as it tells the program that reads to the visitor what language to read in! It also helps people who are using Google. Many Google searchers like to limit their search results to pages in their native language.

2. "Table Trick"

This comes from Dive Into Accessibility and is an easy way that some of us can fix our tables in our Web pages, to make the content more accessible to users of text browsers (such as Lynx) or screen readers, like JAWS. Here are two tables. The first is built in the "regular" way, and the second adds a very small cell on top of the Navigation Menu, to change the way the table is "read" by programs.

table trick 1    table trick 2

The cell with the transparent GIF image changes the order in which the contents of the table appear in the HTML code, which is the order used by Lynx and JAWS.

A "regular" table appears below, which will force a person using Lynx or JAWS to go through the Navigation Menu before reaching the Main Content part of the Web page.
    <tr>
         <td colspan="2">Banner (image and/or text) </td>
    </tr>
    <tr>
         <td>Navigation Menu</td>
         <td>Main Content</td>
    </tr>
The same table, with the extra cell added. Note the order of the contents!
    <tr>
         <td colspan="2">Banner (image and/or text) </td>
    </tr>
    <tr>
         <td>Invisible GIF image</td>
         <td rowspan="2">Main Content</td>
    </tr>
    <tr>
         <td>Nav. Menu</td>
    </tr>

3. Use "empty" Alt attributes with invisible images

Some designers use invisible GIF images as spacers in Web pages. The Alt attribute should always be used with invisible GIF images, to prevent them from appearing in text browsers (Lynx) or being read by screen readers (JAWS). A typical spacer image might look like this:

    <img src="images/spacer.gif width="5" height="15" alt="">

The quotes must be empty! A space in there will cause JAWS to try to "read" the Alt message.

4. Create style sheets for PDA and cell phone users

This is easier than you might think. If you already use a CSS file for your page, then you're half-way there!

  1. When you link to your regular CSS file, make sure to choose Screen as the Media.

  2. When creating your CSS file for handheld users, it might be easiest to copy the original styles into the new file and delete the styles are not needed, or modify them to suit the handheld display.

  3. Link the handheld CSS file to your page, making sure to choose Handheld as the Media.

Some hints for a handheld CSS file:

  • Turn off the images! This is easily accomplished with the following style:

        img {display: none;}

  • Place important information/links as high on the page as possible and as far to the left as possible. Otherwise, handheld users have to engage in a frustrating hunt through your page.

  • Narrow your page, if you can! This will reduce horizontal scrolling for handheld users.The optimum width for a handheld display is 150-200px.