PICK A MONTH PAGE RATIONALE

After a user has indicated that they would like to submit a Change of Address form, a page is displayed with a table of buttons with images that represent each month of the year. The user is then asked to select the month that the Change of Address is to take effect.

What follows is a description of the original page, the strategies we tried, and finally a solution that we recommend be used. We have also included links to the original page and our current solution. Please look through these and send us your comment s and suggestions to web-team@trace.wisc.edu

PROBLEM WITH THE ORIGINAL PAGE

The original page, with images not loaded, consists of the image icon and a three-letter abbreviated month name label for each of the 12 months in a six column by four row table.

With images loaded the image icons become pictures representing each month. For example, February is represented by a picture of snow covered trees. Above this picture, in the preceding row, is the three-letter month abbreviation.

When viewed with a screen reader, the user is able to read the names of the months yet nothing happens if they try to click on any of these names. The user sees that there is a line of image icons on the next line but if one of these is selected, the ima ge is loaded and now nothing is read when the screen reader passes over the image. Most users have no way of knowing what each image represents since most screen readers can not yet read by columns.

To a screen reader that verbalizes images this page would look like:

image image image
Please pick the month that this change takes effect
Jan Feb Mar Apr May Jun
image image image image image image
Jul Aug Sep Oct Nov Dec
image image image image image image
image image image

Turn autoload images off and view The original pick a month page. Then load the images and the view the page.

If you would like to view the page as it was before you loaded images without flushing your disk cache first, make sure autoload images is off then view the original again .


STRATEGIES INVESTIGATED

Investigation 1. Simply adding alt-text to images.
Our first plan was to simply use an alt-text three-letter abbreviated month name for each of the months. However, this was a bit confusing because we now had two names for each month; The label, which was not a link, and the alt-text month name, which was a link. In that some screen readers do not read the graphic to which the alt-text is linked, there was not an easy way, when reading the text with the arrow keys, to tell which name was the link and which was not.

Investigation 2. Distinguishing between links and headings.
To solve that problem, we changed the alt-text month name from the abbreviation used on the original page to the complete name of the month. Now, we had two representations of month names for each month, which made it easier to discriminate between the two. But one was still not sure, unless they were using a screen reader which allowed searching for links, which of the month names were in fact links. Even worse, the full month names were too long to fit on the page and scrolled off of the screen to the right.

It was also very confusing visually to view this page with Lynx. One saw a line of six month name abbreviations then a line of six month names that were links.
Second investigation as viewed with Lynx.

Another concern was how to make a table easily readable with a text-based browser. When the original page is viewed with LYNX, the table is joined into one long line of text. Using line breaks between rows of the table put rows on separate lines when vi ewed with LYNX, but pushed the beginning of the table down the page a few lines when viewed with Netscape.


CURRENT SOLUTION

The current plan is to actually include the month label in the image used to represent the month. Thus, the only month label which will appear when graphics are not loaded would be the label in the alt-text. When graphics are loaded, the user would see the graphic for each month along with a label for each month. This also changes the layout of the table to six columns by two rows (rather than four rows).

Including line breaks within the last column element of a row (before th closing TD) rows will appear on separate lines in LYNX and the appearance when viewed with Netscape will not be affected.

Turn autoload images off and view our current solution. Then load the images and compare.

If you would like to view the page as it was before you loaded images without flushing your disk cache first, make sure autoload images is off then view our current solution again .


Return to the WINGS Access Project