The original version of this document was last updated 26 April 1999 [ADHTML]. This version supercedes that version with several corrections and further discussion.
To better understand the issues that are addressed, interact with all of the pages refered to in this document
In early 1999, we reviewed The HTML Guru site designed by Jeff Rouyer [GURU]. A snapshot of what we evaluated at that time is available from the Trace Center's site. Thank you Jeff for lending this to us.
Several images on the guru site do not contain alt-text. Providing text equivalents for images is a Priority 1 checkpoint in WCAG 1.0.
Images of cursive text are used instead of "actual" text. This is understandable since techniques for modifying text appearance (other than font-size, font-color, and basic font-family) are not widely supported. However, these images do not have text equivalents. Many of these images are used as links and therefore users who are unable to access the images are also unable to select the graphical links. Providing text equivalents for images is a Priority 1 checkpoint in WCAG 1.0.
The guru site creates several interesting effects by creating "layers" of information then positioning them on the Web page. Image clipping is another technique commonly used. Combining these techniques, Jeff was able to create an animation of a futuristic person raising their hands as part of a mouseover effect. Each of the images used to create the animation and the buttons of the main menu that causes the mouseover events, are positioned relative to each other. However, there are at least three layers on the page and they are positioned at pixels.. Thus, if the window is resized, the 3 layers begin to overlap and the page becomes unreadable. Also, if the text size is increased or decreased, the text begins to overlap. Using relative units for positioning and specifying font size is a Priority X checkpoint in WCAG 1.0.
If a text phrase is drawn to the screen twice, in two colors, at slightly different positions on the page, a "shadow" effect is created. It was anticipated that this would cause a screen reader to read the text twice, but in our tests, it did not. Once again, if a browser does not support scripts or scripts are not enabled and this technique is used, the user will not have access to the text.
The main menu appears in the lower right corner by the animated person. In the upper right corner is a submenu. It was not immediately obvious when using the page in a visual manner that the choices in the submenu changed as main menu items were activated. We were not able to test this example with a screen reader because the link text was not provided. However, the submenu items are the last links a user tabs to. Therefore the screen reader user is unlikely to make the connection between the submenu and menu items. This is true for the visual experience as well, since the menu and submenu are in such different places in the visual display.
We wanted to tackle each of the above issues. Our first step was to investigate some new technologies.
It is possible to use Microsoft filters, supported in MSIE4 and 5 to create the same shadow effects as the guru site. However, this is not a cross-platform solution. As style sheets become more robust, this technique should become platform independent. Example of glowing and shadowed text produced with MS filters.
After a brief look at new technologies we decided to create a site that uses all of the same features as the Guru site but that was accessible. Thus, instead of redesigning an existing site, we decided to create a site from scratch. We have made several attempts at the site. We will discuss each of the improvements made with each attempt as well as the issues created or not solved by each of our existing solutions.
Absolute positioning is used on the MWC pages, but by using the "em" unit (the width of the letter "M" for the current base font size), if the font is increased or decreased, the layout of the page is maintained.
Unlike the Guru site, when a link is selected, the user is taken to an actual resource. Thus, when viewed without style sheets or scripts, if a user selects a link from the table of contents, they are taken to the content that appears later in the page. With scripts and style sheets loaded, the information is displayed dynamically in the blue "content box."
Since the submenus appear directly below the main menu item, if a user is tabbing between links, once displayed, they will tabbed directly from the main menu item to the submenu items before tabbing to the next main menu item.
Because the content is not generated on the fly, the links go to actual resources, and the content is structured so that when scripts and style sheets are not loaded it is a properly marked up HTML document, the page is usable without scripts and style sheets.
Since the content is hidden and displayed using scripts and style sheets, the main URI of the page does not change. Thus a user is unable to create a bookmark to a particular "page" within the "site."
Related to the issue of bookmarking, the "back" button does not work either. The URI does not change, thus pressing the "back" button will take the user to the page that they visited prior to visiting the MWC pages.
A user of a screen reader is used to hearing an indication when they open a menu, and it if has a submenu. Since we are emulating a menuing mechanism, no such indication is given. Thus, a user may think that each time they select a link they are going to a new page and it can be confusing why the same choices ("menu options") are available in different orders on each page. Thus, we need to find a way to make this more obvious.
There are some funky bugs with our implementation in Netscape 4.5. Some of the layers that should be hidden, are visible.
We need to include graphics and animations on the page to discover access issues.
$Date: 2000/08/17 14:57:27 $ Wendy Chisholm