$Date: 2000/08/17 14:57:27 $ Wendy ChisholmThe 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.
When the user selects a link to display new content, the request is not sent to the server to retreive a new page. The text is embedded in the script and drawn to the screen on request. When a person accesses the page without JavaScript, they receive the contents of the NOSCRIPT element for this page which says, "get a JavaScript enabled browser." Ensuring that a page is usable when JavaScript is not supported in a browser or is not enabled is a Priority 1 checkpoint in WCAG 1.0. Also, providing a usable alternative, for example in the NOSCRIPT element, is a Priority @@ checkpoint in WCAG 1.0.
Most of the links on the page reference "javascript" rather than an actual resource. This activates a client-side action (javascript) rather than a request to the server. As discussed earlier, many of the links on the page are created with images and these images do not have alt-text. Therefore, when a person uses a screen reader to read the links all that is read is, "javascript, javascript, javascript." Making it this far into the Guru site means that scripts are enabled and working, however other sites use this technique in such a way that if a user does not have script support or scripts enabled they are not able to activate links on that site. Making sure that sites are usable when scripts are not supported or not enabled is a Priority 1 checkpoint in WCAG 1.0. Others that apply??
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.
The primary issue is that the site is completely unusable without images or scripts. If images are not loaded there is no alt-text. Also, the JavaScript loops until all of the images are loaded. If the user has turned image loading off, the opening page will loop infinitely. If scripts are not loaded, the user is told to get a browser that supports scripts. If scripts and images are loaded, since there is no alt-text, none of the links are accessible to a person unable to see the page.
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.
The content is not generated on the fly. All of the content is available in the page, but it is displayed or hidden using style sheets. This means that if style sheets and javascript are not loaded, the page is usable as a text-only page. Part of the reason this is possible is that proper HTML markup was used throughout the page. The "table of contents" when displayed with style sheets and javascript appears as users interact with it. When a user first views the page, only the top three levels of information are displayed. If the user selects one, a "submenu" of more choices is made visible. Thus, it is a dynamic, horizontal table of contents. When scripts and style sheets are not loaded, the table of contents appears as a hierarchical, vertical list - an outline view of a table of contents.
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.