For All the World to Share: Developing and Implementing Accessible Web Sites
Patricia Tuohy, National Library of Medicine; Helen Garton, National Library of Medicine; Julie Beeler, Second Story; John Slatin, University of Texas at Austin, USA
Using the National Library of Medicine's recent on-line exhibition Changing the Face of Medicine: Celebrating America's Women Physicians as a study, this paper will discuss issues of design, accessibility, and government responsibility in the creation of accessible Web sites.
The early pioneers of the internet created an open environment where users and developers freely shared ideas. This open and non-exclusive philosophy guided many of the successful innovations of the World Wide Web. The federal government has continued this egalitarian philosophy and, in 1998, the U.S. Congress amended the Rehabilitation Act to require federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 was then enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. But what does that mean to users of the internet? To government agencies? To the creative community?
Keywords: on-line exhbition, re-design, accessibility, government, history of medicine, women
In 2000, the National Library of Medicine at the National Institutes of Health in Bethesda, Maryland, committed to developing an exhibition about the history of America's women physicians. Through the use of biography, Changing the Face of Medicine: Celebrating America's Women Physicians illustrates the larger themes in the history of women in medicine. The Library's Exhibition Program worked with a twenty-five-member advisory group comprised of representatives from the medical and history communities to nominate over 300 notable and accomplished women for inclusion in the exhibition.
The women's stories are exciting, moving, compelling, inspiring. There are stories about many different kinds of women practicing medicine in many different ways with different patients. The project team strove for diversity in all areas, wanting everyone to find someone in the show to identify with and to find that person in the Digital Portrait Gallery of physicians.
This commitment to diversity and access to the exhibition's content extended into the creative process. Working with Second Story - technically proficient, intellectually capable, conceptually innovative people — and working closely with the Library's information technology office created a visually compelling Web site that provides an equivalent experience for all visitors.
Eliminating Barriers in Information Technology: Background
In 1998, Congress amended the 1973 Rehabilitation Act to require federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities. Section 508 of the Rehabilitation Act was enacted to eliminate barriers in information technology because inaccessible technology can interfere with an individual's ability to obtain and use information quickly and easily.
Section 508 is vital, since, according to the United States 2000 Census, there are approximately 50 million people in America with some type of disability. This number is expected to grow dramatically as the population ages. The 2000 Census further estimates there are 48.4 million people living in the United States who are 55 years of age or older, with this figure projected to skyrocket to over 100 million by 2025.
As this population ages, there will be heavier reliance upon electronic and information technology to support information dissemination. The 1998 amendments to Section 508 directed the Architectural and Transportation Barriers Compliance Board (Access Board) to develop and publish standards and the technical criteria necessary for achieving accessibility to electronic and information technology by individuals with disabilities. The criteria for Web-based technology and information are based on access guidelines developed by the Web Accessibility Initiative of the World Wide Web Consortium (W3C). Many of these provisions ensure access to Web-based information for people with vision impairments who rely on various assistive products, such as screen readers which translate what's on a computer screen into automated audible output.
For those unfamiliar with accessibility issues pertaining to Web page design, the need for Section 508 compliance is clear: we must understand that many users may be operating in contexts very different from our own:
To accommodate users' different needs, as stated above, the National Library of Medicine is required to comply with Subpart B - Technical Standards, Section 1194.22 Web-based Intranet and Internet information and applications of the Section 508 final standards. In order to provide accessible design solutions for problems that users with certain disabilities may encounter, the following are the 16 Access Board guidelines that must be followed by the National Library of Medicine's Web masters:
The intent of Section 508 is to ensure that federal employees and/or members of the public with disabilities have access to and use of electronic and information technology comparable to that of the employees and members of the public without disabilities. Since the National Library of Medicine is a federal agency that provides information to the public and to their employees through their Web sites, the Library must ensure that these sites are accessible to all people, including people with disabilities. That is why the National Library of Medicine is committed to the spirit of the Section 508 Law.
Dynamic Design Solutions
Over the years, the Web community has defined standards for creative developers to use in order to publish materials on-line. These standards serve as guidelines for developing accessible Web sites and their content for people with disabilities; however, it is often left to subjective interpretation as to how well the standards have been implemented and how well they meet the checkpoints of the three priorities: Must, Should and May satisfy the requirements of Section 508. In developing the Changing the Face of Medicine exhibition Web site for the National Library of Medicine, the designers and programmers overcame a variety of challenges in order to realize the two main project goals, which were to
Developing a Web site that meets the requirements of Section 508 and also offers a variety of media-rich interactive experiences is a tremendous challenge because there is often a series of compromises or trade-offs that need to occur in order to meet both of these goals. There are two main reasons for creating Web sites: to provide access to information, and to create an interactive experience. If all the developer needed to do were just to provide access to information, the creation of a Web site that is compliant with Section 508 requirements would be much easier. In this scenario, developers often create page-based content comprised of a series of templates and text-based information that uses HTML, XML and CSS programming languages to create a series of Web pages that function as a publishing tool.
page of Changing the Face of Medicine
The challenge arises when you try to take this content and put it in the context of a time-based, dynamic interactive experience. Creating an immersive, engaging, cinematic experience through Web publishing is very challenging because it takes advantage of media-rich graphics, audio, video, and animation and in essence layers information over a period of time.
an interactive page.
In order to reach the largest audience possible, the Web site needs to employ an overall information architecture that makes the content understandable and navigable. The interface design needs to accommodate a high degree of flexibility so that users with assistive products can customize the viewing of the content specific to their needs. This is our challenge: to design a controlled, graphic rich, visual interface with the flexibility of an ever-changing environment that can adapt to any tools and technology being used by the end user to view the Web site. There is a variety of programming languages and checklists in place to help developers create accessible Web sites that ensure graceful transformation so that content remains accessible and visual graphics and layout retain a level of graceful integration across all pages, browsers and platforms.
The following is a checklist of priorities:
The exhibition team at the National Library of Medicine provided early concept documents and content outlines. These revealed graphically rich interfaces with animations and illustrations that communicated highly complex concepts and game-like environments to engage and educate students and users of all ages. Immediately it was clear that these objectives could not be met in a traditional page-based Web interface using standard programming languages such as HTML, XML, etc. Rather than clicking from page to page to have access to information, the user needed to navigate through a variety of time-based content that layered information based on user input (with unique options and choices) to complete the activity.
The development of these concepts required the use of Flash Player, a Plug-in that can be used in a variety of Web browsers. Although some of the latest Web browsers are distributed with the Flash Player, it is still viewed as an additional requirement for viewing the Web site, and is thus a technological barrier to accessing information. This challenge requires the development of multiple, alternate versions of the content for it to be accessible to the largest possible audience and to fulfill the priorities of Section 508 compliance.
But the degree to which one develops and accommodates the highest priority of Section 508 requirements undermines the overall development costs. In terms of development, it is technically possible to achieve the highest compliance amongst Section 508 requirements for media-rich, time based interactive experiences; however, it is not cost effective. Often in developing these types of interactive experiences a series of goals, objectives and specifications need to be outlined before the concepts are further defined and the programming is implemented. This allows all team members to review and assess the alternative options that will need to be developed in order to satisfy the priorities of Section 508 compliance.
The creation of the Educational Activities, Video Documentaries and Artifact Interactives all required content to be presented in a time-based environment and required development authoring using either Macromedia Flash or Apple QuickTime. Developers had to ensure graceful transformation across the alternative options as well as employ the standard page-based Section 508 compliance checklist.
The levels of complication began to multiply, and additional programming and scripting were implemented to allow the Educational Activities to be functional for visitors who do not use mice and/or use E-Readers for the Web browser (see fig.3)..
An alternate text only option was made available to visitors who prefer not to view graphics, animations or other interactive content (see fig 4).
With the newer versions of QuickTime (4.1-6.5), videos were authored to display in-line captions which are accessible on demand through activating system links (see fig.5). For visitors who prefer not to view and download videos, text only transcripts were made available (see fig. 6).
The Artifact Interactives were developed as kiosks for the exhibition. Each kiosk is placed directly in front of a physical exhibition artifact, and via computer-run touch screen monitors, visitors can bring to life each artifact in ways that cannot be done to the real artifacts since they sit enclosed in a glass case. These Artifact Interactives had to be modified from the kiosk versions in order to be presented on the Web to meet Section 508 compliance (see fig.7).
Since they require the Flash Player, specific programming scripting was put into place to prompt visitors and offer a text-only alternate (see fig.8).
The role that the presentation plays in the contextualization of content is very important. Although these alternate options and versions that were provided tend to strip the content of its context, there is often little that can be done about this issue due to the types of tools and technologies available for development. These alternative options provide the opportunity to reach the largest, most diverse audience possible and ensure graceful transformation of all media-rich, time based, dynamic interactive experiences so that they are accessible to people with disabilities. As the tools and technologies continue to evolve, there will be greater strides towards developing more powerful technology to deliver accessible Web content to people with disabilities.
Evaluation of the Accessibility of Changing the Face of Medicine
John Slatin examined three specific pages from Changing the Face of Medicine to evaluate the merits of two different approaches to interactive multimedia used in the on-line exhibition. He looked at:
He also looked at two of the four activities linked from the Activities Interactives page, The Doctor Is In and Sickle-Cell Anemia.
His review included three steps: testing with an automated tool (Bobby Worldwide), manual compliance checking (to follow up on the Bobby report), and an expert review in which he compared his own sense of the pages as I experienced them through the JAWS screen reader against the results of the automated review and the compliance checks. This third component was where things got more complicated (and more interesting).
Before discussing his findings, however, let us say a few words about screen readers.
Screen readers are the essential tools for people who are blind. In case you've never encountered one, in essence, screen readers do what the name suggests: they read the screen aloud. (It's actually a good deal more complicated than that, but this will do for present purposes.) Reading starts at the top of the page and proceeds left to right, line by line, until it comes to the end or the user stops it. If there's text on the page, the screen reader speaks it aloud in a synthetic voice. It also identifies different types of links, including graphical links, image map links, and this-page links to other locations on the current page. Screen readers also indicate the presence of graphics and other elements such as tables, lists, frames, headings, and forms. Some screen readers, including JAWS, can also handle multimedia and animation created with Macromedia Flash.
It's worth noting that it isn't easy to pass both automated tests and what Bobby calls 'user checks,' as these pages do. Passing these tests and meeting Section 508 requirements mean, for example, that every image element has an alt attribute to provide something for screen readers to use in place of the image. It also means that color isn't used as the only means of conveying information -an important thing for people with color deficient vision, including most seniors, and people whose monitors don't display color.
The pages still make sense without style sheets, too. Cascading Style Sheets (CSS) are the best way to control everything from font- and color-selection to spacing and layout, but there are people who use browsers that display only 'plain vanilla' text, while others substitute style sheets that meet their own special needs. Moreover, screen readers ignore visual effects created by style sheets (including the visual order of text and images). Section 508 requires that pages make sense under these circumstances.
The video clip of Dr. Elders speaking about her life meets all the Section 508 requirements: the window in which it appears includes a link to turn on captions (these text equivalents for audio are essential for people who are deaf or hard of hearing, and important also for people who aren't native speakers, students who are developing readers, and people viewing the site in a facility that doesn't provide speakers (such as many school libraries). There's even a text transcript so that people who use those text-only browsers and people who are deaf-blind can read what Dr. Elders has to say. Finally, there's also a link to download the QuickTime player needed to watch the video, another Section 508 requirement. The Activities Interactives page meets this same requirement with a link to download the Macromedia Flash player needed to take full advantage of the interactive aspects of the learning activities
In addition, every page on the site has a Skip navigation link. This isn't visible to the naked eye: its purpose is to allow people using screen readers (which also drive the refreshable Braille displays that some blind users prefer) to jump over tall navigation blocks at a single bound. That is, the Skip navigation link lets you avoid listening to all the navigational links that appear across the top and down the left side of the pages on this site (and most other sites on the Web). This may seem like a small thing, but remember that screen readers read from left to right and top to bottom: Without the Skip navigation link, people using screen readers will hear all those links first on every page, before they hear the real substance of the page; this takes over 40 seconds, according to my stopwatch. By contrast, most users who are sighted don't even notice those navigation bars are there until they want to move on. Part of the point of good visual design is to draw the eye smoothly to important material; the navigation bars are at the periphery. Skip navigation links help provide a similar experience for users who are blind.
But there are flies in the ointment, too. One set of issues involves things that appear at first to be 508-compliant, but turn out not to be. Another set of concerns involves what are best described as usability issues whose impact on people with disabilities is disproportionately greater than it is for people who don't have disabilities.
The list of things that appear to be 508-compliant but really aren't includes the following:
On the usability side of the ledger, there is some confusion about link text (including alt text for graphical links); there are duplicate (and not-quite-duplicate) links; and there are links that open without warning in new browser windows (this is an accessibility issue under the World Wide Web Consortium's Web Content Accessibility Guidelines 1.0, however). The 14 photographs of women physicians that appear at the top of each page and change whenever a page is loaded or reloaded pose a potential distraction for people listening to the constantly-changing alt text, and for users with learning disabilities or cognitive impairments. We don't have room to discuss the usability issues here, but mention them in hopes that readers will work to avoid confusing link text and needless duplicate links on their own sites.
Alt text is text associated with the images on a Web page via the alt attribute of the <img> element; alt text is what screen readers read when they encounter an image, and what text-only browsers display. The Joycelyn Elders page includes a Photo Gallery consisting of five images. There are three thumbnail-sized photographs and a link that says, "Launch Photo Gallery (five images)." The first time we visited the page, we were sure that the alt text for some of the images was missing. Here's what JAWS said when it got to the Photo Gallery section:
When JAWS says Link graphic gallerythumb/098_01 or Link graphic img/icon_gallery, we hear a filename—what JAWS reads by default when an image has no alt text. This is why we ran Bobby. The program is very good at uncovering images without alt text, so we were sure it would find these four—but it didn't find anything wrong. We looked at the source code. Sure enough, each image had an alt attribute that read alt="" This is called "empty alt text"; it's designed to force screen readers to skip over images that don't carry meaning, like the spacers used to create white space on the page or decorative frames for images. JAWS should have ignored those images. What was going on?
That was when it hit me: all four of these images (the three thumbnail photos and the icon that links to the Photo Gallery) are links. They may be graphical links, but they're links. And graphics that serve as links must not have empty alt attributes. A graphic that serves as a link does carry information - about the destination of the link. Therefore, there must be meaningful alt text on all graphical links. The screen reader speaks the alt text whenever it encounters the image; for example, when the user tabs to the image or brings up a list of all the links on the page. (The link shows up in the links list even when the alt text is empty; the screen reader has to say something, so by default it reports the filename. At best this is ugly; at worst it's confusing and nullifies the user's ability to navigate the site.)
But there are cases where it's acceptable to put empty alt text on a graphic that serves as a link. As a case in point, there are actually two links to launch the Photo Gallery - a text link (Launch Photo Gallery) and an adjacent icon that goes to the same place. Sighted users see them as a unit; and in fact both the text and the icon could have been treated as part of the same HTML element, in which case it would have been acceptable to make empty alt text for the icon! (The code would look something like this: <a href="photogallery.html">Launch Photo Gallery<img src=" img/icon_gallery" alt=""/></a>).)
The empty alt attribute (alt="") could also have been used to good effect in the Photo Gallery itself. The gallery contains five images, shown one at a time. The user can select them by number or simply use the Next link each time to go through the sequence. There is a caption beneath each image, and the alt text is identical to the caption; people using screen readers hear the same thing twice. This redundancy could have been avoided by setting the alt text to empty and allowing the on-screen caption to do the work for everybody. If these images conveyed more information than the caption (or alt text) could reasonably provide, then an additional description should have been provided, either on the same screen as the image or on a linked page.
Let's turn now to the Activities Interactives. As we noted earlier, there are actually two versions of each activity: the Flash version (which is the main one, the 'real' one) and the text-only version, provided for those who don't or can't use Flash. This may sound like a good solution, but in fact it's not. Section 508 explicitly says that text-only variants may be provided only as a last resort, when the page cannot be made accessible in another way. The text-only variant must then provide as nearly equivalent an experience as possible. we don't believe this standard has been met, at least in the case of The Doctor Is In and Sickle Cell Anemia. we believe that an accessible version of these activities could have been provided, one that would include both images and text and allow for user interaction as well.
Central to both activities are images that reveal additional information when the student user mouses over them. Text on the screen calls the student's attention to specific aspects of those images ('See the orange areas?' for example). The text-only versions contain exactly the same text, right down to the (now very rhetorical) question ('See the orange areas?'). In other words, the text-only versions don't make sense unless students can see the images. In order to meet the 508 standard, there would have to be additional descriptions of the images, equivalent to what students who are sighted can see. The text-only versions aren't interactive, either: whereas the Flash activities comprise a sequence of screens, the text-only version is a single file that isn't linked to anything else.
It needn't have been so flat. The graphics could just as easily have been .gifs or .jpegs (the most widely used image formats). Each image might have actually consisted of several smaller images (though sighted users would perceive just one). A detailed text description could have been associated with each of these constituent images. This could be done using an attribute called longdesc, designed expressly for people who use screen readers, or via an explicit link on the screen (which would make the descriptions available to anyone who wanted them). All students could step through the sequence using the Next and Previous buttons. And so forth.
Are these violations of Section 508 fatal? No. Users can ignore the thumbnail images and use the text link to launch the Joycelyn Elders photo gallery, though in the absence of long descriptions, users who can't see those images will learn less than they might otherwise. By the same token, students reading the text-only versions of the Activities Interactives won't have quite as rich an experience as peers who get the Flash versions, though much of the core information is there. But there's the rub: learning isn't just about information. Imagine a classroom full of middle-schoolers whose teacher is introducing them (as often happens these days) to the idea of a career. The teacher especially wants to give the girls in the class reasons for keeping up with their work in science and math now that they're reaching the age when many girls drop out of the sciences. She sends them to visit Changing the Face of Medicine and suggests that they find out about Dr. Elders and check out some of the things doctors do. The class includes a girl who is blind and another with cerebral palsy who doesn't use a mouse. What will be the quality of their experience compared to the experience of their classmates? How will the differences affect them?
So. How does this case study answer the questions: What does this mean to users of the internet? To government agencies? To the creative community?
These are big questions - questions we all have to answer for ourselves. The goals for this paper were to raise the issue, to spark a debate, to assist in creating change or, in some cases, to simply reconfirm the status quo.
The Exhibition Program is part of a public institution whose mission includes organizing and disseminating information to a world audience. Our visitors and patrons matter a great deal to us, and we try to respond to each person's individual questions and specific needs. I also want to gain recognition and respect for the quality of our projects within the different communities where we work: the scholarly, the creative, the technical, and the education communities, as well.
Changing the Face of Medicine became a vehicle to push these goals for our program to a new level. We wanted a dynamic and sophisticated approach to our Web site - not the standard government-issue design. We didn't want a two-Web site solution, with one portal for 'them,' and one portal for 'you.' We strove for an equal but different experience for all our visitors. And, overall, we succeeded.
The questions John Slatin raises at the end of his comments about the Web site focus on precisely the kind of review and evaluation the project team experience for the entire Web site. They are important to us, of course, but all choices involve some compromise:
I made decisions to compromise on the experience we would offer the young girl who is blind and the student with cerebral palsy. Looking back, knowing what I know now, would I make that same decision? I don't know. I don't know if I can put myself in that state of being again: weighing administrative pressures, financial limitations, schedule issues, personality crises. Sometimes the disabled visitor's needs seemed a distant reality. For our next on-line exhibition, though, we will plan more carefully so we have the time to consider more deeply how we can develop equal and different content when something is going to be lost during the transition between different technologies and formats.
Helen Garton prepared the background notes for Section 508 and outlined the National Library of Medicine's responsibility. Julie Beeler prepared the following description of the design solutions for Changing the Face of Medicine. The evaluation of the Changing the Face of Medicine exhibition, in relation to how well it meets Section 508 requirements, was written by John Slatin.