Web Accessibility and Design: A Failure of the Imagination
Bob Regan, Macromedia, USA
In theory, there is no difference between theory and practice. In practice, there is. - Yogi Berra
Web Accessibility and Web Design are two disciplines with a common theory and divergent practices. Both endeavors rely on a standard set of techniques to ensure a consistent experience of data and content across a diverse set of end users. Both rely on creative individuals to build and deliver great sites and great experiences that have an impact on the user. Both seek to extend the reach of the end user and link individuals together to form a stronger collective whole. However, despite the common theory that links them, web accessibility and web design do not share a common set of practices. Sites hailed for their accessibility are rarely noted for their design. Sites hailed for their design are rarely noteworthy as models of accessibility. Few sites are ever held up as models of both great accessibility and great design.
The Gap between Accessibility and Design
There are few technical reasons for the tension between accessibility and design. In fact, the technical practices of accessibility and design are currently converging in many respects. Both are increasingly dependent on web standards to ensure transformation across browsers and devices. Both web accessibility and web design increasingly rely on style sheets for the separation of content from its presentation. Both are beginning to value the principles of user testing and feedback. A surprising and noteworthy result of this recent convergence is that the underlying technologies and techniques associated with sites representing great design are increasingly consistent with sites that represent great accessibility.
In order to understand why there are so few sites that illustrate great design and great accessibility, web design needs to be understood as a practice of individuals. Sites are built by people, not principles or standards. To state the case in a rather simple way, designers are trained to value the visual presentation. Accessibility advocates are taught to value adherence to standards. Compromising on either front means relinquishing control. In general, this is not something that comes easily within either community of experts.
The current state of accessibility represents a failure of the imagination. Advocacy work on the part of groups like the National Federation of the Blind, the Royal National Institute of the Blind and Vision Australia has done much to raise awareness about the importance of accessibility. Guidelines such as those developed by the W3C's Web Accessibility Initiative have provided guidance for developers and designers in how to build accessible sites. Legislation such as Section 508 and the Disability Discrimination Act have provided a business case for meeting these standards. Awareness about accessibility and the brute force of legislation will only take accessibility to a certain point.
Designers do not emulate designs because they are accessible, they emulate sites that they admire or that inspire them. It is only by reaching the hearts and minds of the very designers who create websites that accessibility will truly become mainstream in its practice. Designers need to bring their considerable creative powers to bear on the specific challenges of accessibility. The accessibility community needs to value that power of design and to cultivate a culture of innovation and creativity in accessible design. To date, the absence of a connection between designers and accessibility represents the greatest failure of accessibility and its greatest challenge moving forward.
This paper takes a closer look at how we might bridge the gap between accessibility and design. Beginning with an examination of the state of accessibility and design, this paper will compare the winners of the 2003 Webby Awards and sites promoting accessibility. This selection of sites awarded for their exceptional design provides an illuminating snapshot of the current connection between accessibility and design. Second, this paper will briefly examine lessons learned from a redesign project of a music site at Macromedia. This project presented some of the most talented designers in the US with the challenge of creating a site that was a model for accessibility. The results are not only instructive in terms of the techniques, they provide a framework for how to approach accessibility in a design focused environment.
The State of Accessibility and Design: A Brief Look
Before delving into explanations for the lack of creative and accessible design, it is worth taking a moment to examine the current state of affairs. In order to gauge the current state of affairs, a very interesting and entirely unscientific methodology was employed. The list of sites winning the Webby Award and the Webby Business awards were examined for accessibility. The list of Webby Award winners can be found at http://www.webbyawards.com/main/index.html. The list of Webby Business Award winners can be found at http://www.webbyawards.com/businessawards/finalists.html.
The Webby Awards represent a pinnacle of achievement for many professional designers. The winners are chosen across thirty separate categories on six criteria: content, structure and navigation, visual design, functionality, interactivity, and overall experience. It is helpful to think of the Webby Award winners as a rough indicator of trends among professional designers. In the context of design and accessibility, it provides a helpful measure of where accessibility rates in the awareness of professional designers.
Accessibility is not listed among the criteria in the judging the winners. Thus, it should come as no surprise that only five of the forty-one sites reviewed meet even a limited subset of the WCAG guidelines. However, it was surprising to find that more than half of the sites came close. Based on a limited review of each site and its issues when compared to the WCAG, a significant number of sites seemed to require only minor changes.
These sites provide some helpful insights into the gap between accessibility and design. Perhaps more importantly, they provide some insight into the areas in which accessibility and design overlap. Three important trends emerge from this group of sites worth discussing in the context of accessibility and design.
1. Awareness of Accessibility Among Designers is Still Limited
First, unfortunately there are still plenty of sites exhibiting the most basic accessibility issues. Despite the best efforts of the W3C, advocacy groups such as the National Federation of the Blind and software makers such as Macromedia, it is disappointing if not surprising to find sites almost entirely constructed of images with no alt text. It is even more disappointing that sites such as these have been singled out for recognition by The International Academy of Digital Arts and Sciences. Sites such as the Do It Yourself Network (www.diynet.com) and IDEO (www.ideo.com) illustrate a highly developed sense of visual design, with no attention to accessibility.
These sites are representative of the designers who wish to maintain complete control over the presentation of their sites. No alt text is used for images conveying content on these sites. The text size can not be increased or decreased in size. The layout does not reflow to fit the window. It has long been the practice of designers to try to exercise the level of control in web design that is possible in print. Early designs on the web were devoted to techniques that simulated the control of print. These sites emulate many of these techniques in their use of images and tables for layout.
The IDEO site uses a JavaScript rollover effect to provide the sighted user visual cues as the mouse is rolled over the main navigation text. This technique provides the designer with more control over the presentation of the tooltip text which in turn has a debilitating effect on the accessibility of a site.
2. Designing with Standards Enhances Accessibility
A more encouraging trend is evidenced in the designs for ESPN (www.espn.com) and Travelocity (www.travelocity.com). These sites rely heavily on the use of Cascading Style Sheets to create styled text, rather than using images. As a result, each of these sites degrades nicely and is usable with screen readers and other assistive technologies. While there are basic accessibility flaws with each of these sites, they are relatively minor in terms of the most important features of those sites. The reliance on web standards made for sites that were by and large very accessible, even if they are not compliant with the WCAG.
These sites are reflective of a broader trend commonly referred to as 'designing with web standards'. This is shorthand for designs that rely on a standard DOCTYPE and CSS for text formatting, layout and events associated with navigational elements. Growing out of a need for consistency of presentation across browsers, those associated with the effort have been highly successful in encouraging browser makers, authoring tool vendors and designers themselves to respect and follow standards.
Efforts around web standards have had a long and intriguing history that exceeds what can be covered in this text. In the context of accessibility and design, it is worth briefly exploring why the web standards movement has had success in affecting the design community. First, the web standards effort has largely come from designers themselves. The discourse and practice of standards has always followed the practices and expectations of professional designers. As a result, the web standards movement has been far more successful in positioning web standards as essential to professional practice among designers. Perhaps the best statement of strategy on standards is the advice of Jeffrey Zeldman in his recent book, Designing with Web Standards. "Let your work do the selling for you." Zeldman understands that designers (as well as the clients who employ them) can't or won't pay for work that meets a set of standards for its own sake. However, designers will emulate work they admire. The only way to make designing with web standards a common practice on the web is to show designers what these sites look like. If designers admire these sites, their clients will follow.
Perhaps the best example of a site used to experiment with standards is the CSS Zen Garden (csszengarden.com). Based on a common html document, the CSS Zen Garden invites designers to create their own style sheets to reformat the page. Each designer works within the framework of CSS to put forth new creative visions of the site. Having a design recognized as an official design on the CSS Zen Garden has become a particular point of pride for designers. The collection of pages that make up the site becomes the best proof of concept for what is possible within the framework of CSS. It is the embodiment of Zeldman's advice. Rather than putting forth an abstract list of benefits of standards, designers can walk clients through the pages of the CSS Zen Garden to help them understand what they are trying to accomplish.
It should be made clear that design with web standards is not sufficient to ensure accessibility. Both ESPN and Travelocity evidence two of the most common issues related to design with standards. First, each of these sites was still missing alt text for images used on the site. While CSS based designs tend to rely less on the use of images and more on the use of text, this problem is relatively minor when compared with other sites on the list. Designers still need to be aware of the need for accessibility in order to ensure that a site is accessible and usable by people with disabilities. It is somewhat surprising that designers would forget alt text in situations where there is a heavy focus on standards. However, people rarely will adopt standards in their entirety. The benefit of standards in this case is that there are fewer images and thus the designer has less alt text to forget to add.
One specific problem common to design with CSS is the use of fixed font sizes. CSS provides designers with a level of control over text sizes that makes it impossible for users to increase the text size of the page from within the browser. While this practice is consistent with the use of standards, it is not consistent with the WCAG. This issue is yet another manifestation of the designer's instinct to control the presentation of content. The ESPN site serves as an example of this practice. The site is accessible when accessed by a screen reader, but will present issues to users with low vision who do not rely on a screen magnifier or screen reader for support.
Figure 1: Screen shot of Travelocity
3. Rich Media Presents One of the Most Significant Challenges of Accessibility Moving Ahead
As broadband becomes more prevalent in the U.S. market and around the world, designers are increasingly taking advantage of increased bandwidth to deliver rich media content via the web. This trend blurs the line between desktop applications and web pages to create unique user experiences not possible with text based markup alone.
At one end of the spectrum is the Apple iTunes Store. This is a unique use of web components within an existing desktop application. Users access a web based interface through a browser embedded within the application itself. For users who can see and use the mouse, this application provides a seamless experience allowing them to browse, listen and purchase music and then directly integrate it into their existing music collection. However, the iTunes application itself is not accessible. As a result, there is no way for people with disabilities to access the embedded content of the iTunes music store. It does not voice in screen readers, it is not keyboard accessible, and it does not offer variable font sizes.
Figure 2: Screen shot of iTunes
Addressing rich media content will serve as a pivotal moment in the history of accessibility and design. Applications such as iTunes will increasingly leverage the web as a means of enhancing the functionality and utility for users. In so doing, they will simultaneously create a host of accessibility issues that did not exist previously. These same issues exist within browser based media such as Macromedia Flash.
Designers will require recommendations on how to incorporate accessibility into the application itself as well as the content it may deliver. Issues such as exposing the role and state of controls within HTML that are handled by the screen reader will now need to be handled by the designer. Given the relatively low level of awareness about accessibility on the part of the designers, the effort required in terms of training and evaluation will prove to be significant.
At the same time, it is not sufficient to simply discourage designers from creating applications that leverage rich media or step outside of a browser bound context. More than a quarter of the sites receiving Webby Awards this year relied on some use of Rich Media. This represents an irreversible trend in the design community. While many are quick to point to the historical issues of Flash accessibility, it should be noted that Microsoft and even the W3 have related technologies in the form of Avalon and SVG that will require the same attention to accessibility as they are adopted. Dismissing the accessibility of Rich Media formats will not make them go away. Instead, designers working in these media should be provided with the tools they need to build, evaluate and deliver accessible rich media. The alternative is that we will come to a point in the near future where the accessibility of web content trends downward rather than up.
At the same time, designers and accessibility advocates alike have yet to explore the potential benefits of rich media for accessibility. HTML offers a limited number of controls for people with and without disabilities. Rich media introduces new controls into web interfaces that were previously only found in desktop applications. These include objects such as tree controls, tabbed interfaces and accordion panes. New controls offer new tools for creating accessible sites in ways not previously possible.
Understanding Accessibility: Lessons Learned
In the early part of 2004, Macromedia undertook a project to build a site for a prominent musician. The goal of the project was to build a site that promoted a new album release and served as a model of accessibility in Macromedia Flash design. Over the course of designing the site, the process as well as the product proved to be particularly instructive in understanding the relationship between design and accessibility. Throughout this process, the designers involved were not only willing to incorporate accessibility into their designs, but excited about the prospect. Accessibility was something they had worked with before but they had never had the opportunity to make it a central focus of the design process. Their enthusiasm for the issue was genuine and their effort was remarkable. Just the same, with a wealth of training and internal as well as external support for the project, designers faced the remarkable challenge of revisiting many of the most basic assumptions about design. Accessibility forced them to work outside of the familiar visual realm and extend their thinking into the non-visual. While there were technical challenges faced in creating an accessible Flash based web site, they paled in comparison with the challenge of incorporating and understanding new user interfaces into design.
Lesson 1: Designers are Visual People
To grossly stereotype designers, they are inherently visually people. As a group, they have been selected on their ability to cope with information visually. Their training has been on how to present information in a manner that reflects a visual medium. Unremarkably, designers frequently struggle when they first get outside of the visual frame. The screen reader represents a completely different environment. It is something that that they not only have no training in, but something exists outside of their comfort zone. This fact has serious implications for accessibility and design.
Designing for screen reader users often requires a paradigm shift - and a considerable experience working in the new medium in order to effectuate that shift. To begin with, the screen reader can prove to be a terribly confusing medium to work in. With no visual cues to reinforce the audio from a screen reader, designers often have trouble tracking the data from a screen reader at first. Designers working on this project were constantly reminded of this fact. All were encouraged to make use of a screen reader for thirty minutes a day to grow used to working within that environment. They were encouraged to use the screen reader to accomplish menial tasks - reading email, reading websites not related to the immediate project. Many on this project did just that and it proved to be quite helpful. However, even for those that did not use the screen reader everyday, it set the expectation that they would not understand the environment when they opened the screen reader for the first time.
Lesson 2: Not All Decisions about Accessibility are Clear
Second, based on their inexperience with screen readers, the designers had a limited basis upon which to make decisions about usability outside of the visual UI. There were three general types of frustration designers experienced in working on this project. First, there was the overall unease of being outside of their familiar visual and mouse driven frame. Second, there was the more specific frustration of getting used to the screen reader. These tools are big, complicated applications that can be hard to make sense of at first. However, the most important frustrations felt by designers were of a different variety, those that emanated from poorly designed content. For this is the same frustration that people with disabilities feel on a day to day basis in navigating the web.
Most designers are trained to think about the visual UI with the mouse as the primary input device for navigation. In addition to needing guidance on how to navigate content outside of the visual UI, designers also require some sense of the most frustrating issues for people with disabilities in navigating sites. For the sake of this project, it was important to help designers develop better instincts as to what makes usable content for each of the use cases defined for the project.
Perhaps one of the biggest challenges of accessibility is the truism that we don't know everything. Efforts such as the WCAG guidelines are focused on the relatively narrow set of controls available within html. This project, as a Flash based site, provided designers with the ability to revisit some of the central assumptions of accessibility. In so doing, the designers often found themselves asking questions for which there are no concrete answers. Even within the context of HTML design, designers often find themselves facing issues with no concrete answers.
Take the following example; the music site relied on the use of 'pods' for navigation. One of the most significant challenges faced by users navigating sites using the keyboard is that they often need to move through multiple navigation bars to arrive at the main content area of the page. As a result, sites can be rather tedious to navigate, forcing users to move through the same navigation bars on every page. In the pod based strategy used on this project, each level of structure is contained within a single pod. To facilitate keyboard navigation of the site, each pod has an expanded and collapsed mode. In the expanded mode, the user may explore all of the content and controls available. In the collapsed mode, the user need only navigate a single tab stop before moving to the next pod. The example below shows the preferences pod for the site.
Figure 3: Screen shot showing preferences pod in expanded mode
Figure 4: Screen shot showing preferences pod in collapsed mode
This technique raised a number of questions for the designers. At perhaps the most basic level, they had to decide what the text equivalent would be for the button that expands and collapses the pod. The language used needed to be simple enough to make the control intuitive and at the same time make clear how the pods worked. Too much information and the buttons became as tedious as the navigation bar itself. Too little and nobody would understand how to successfully complete utilize the options. In the end, they decided on using the text, "Minimize preferences pod," and "Expand preferences pod." It is not yet clear whether that was the correct choice. Only user testing will reveal whether specific interactions and terminology are in fact clear to users.
The relevant point in the context of accessibility and design is that this case represented a moment in which there was no obvious and absolute correct approach. As the designers became familiar with accessibility, they struggled with individual decisions where there was no clear precedent.
Lesson 3: Accessibility is a Process Not a Product
Working with designers on accessibility requires a sustained effort. The impact and implications of accessibility may not become immediately clear after a single presentation from an expert. To expect designers to implement accessibility with this amount of training is unrealistic. In truth, accessible design often requires an experiential learning process where designers first understand and then learn to incorporate the specific use cases for accessibility. Designers require an opportunity to follow up on accessibility with additional questions and concerns as they begin to grapple with the specifics of accessible design.
The music project was a particularly instructive example of this fact. The first meeting to discuss accessibility was quite upbeat. There were frequent comments from designers about how they had never thought of the issues, or how 'cool' some of the techniques were. However, a couple of days after the initial training, there came an urgent phone call from a group of designers. "Holy shit, how the hell are we going to deal with all of this?" The explicit language belied a very real concern. After an initial wave of excitement about addressing accessibility, came multiple waves of concern. The initial accessibility training was repeated, this time in light of some initial thoughts about accessibility on the part of the designers. This second training was more focused on the questions from designers, rather than the questions anticipated by the accessibility expert.
The important point in this context is that designers will not understand accessibility after only a single training. There should be a process defined that allows designers to experiment with specific techniques and then come back for a follow up conversation. In this way, designers have the opportunity to reinforce concepts and to allay concerns that might otherwise cause them to abandon accessibility. At the same time, it provides an interesting point at which designers can inform accessibility. Designers will not passively absorb accessibility but actively work to reshape it.
Lesson 4: Introducing Accessibility to Designers Will Introduce More Techniques and More Ideas
Earlier in this paper, the state of accessibility was described as a failure of the imagination. This failure stems from the lack of participation in accessibility on the part of creative individuals such as artists and designers. The failure is two fold. First, the failure lies at the feet of the designers themselves for not recognizing the importance of accessibility and embracing the effort. Second and perhaps more importantly, the failure lies at the feet of accessibility advocates for not actively seeking out the attention of designers and working to ensuring the efforts and enthusiasm of designers were included in the project.
Over the course of the music site project, it became clear that designers bring two unique elements to accessibility. First, almost obviously, projects built by professional designers look better than projects built by professionals from other disciplines. Perhaps the most direct way to inspire designers on the issue of accessibility is to put sites in front of them that they would like to emulate. While talent abounds in many of us who appreciate design, the work of a professional is easy to spot.
Second, professional designers will have new perspectives on the techniques surrounding accessibility. The music site project was marked by numerous if not innumerable brainstorming sessions with designers in an effort to solve some of the most common issues faced by users of the site. Each time, common accessibility questions were introduced, explained and the associated techniques called into question. In many cases, new techniques were developed.
For example, consider the pod based technique mentioned earlier. The challenge for screen reader and keyboard users was that the navigation links serve as an obstacle to accessing the main content of the site. Users have to move through each of the links in order to hear the main content. In HTML, this issue is addressed with the structure of the HTML itself or using what is called a skip navigation link. These techniques do not apply in Flash. While the Flash player can move the point of focus in a Flash movie and report this information via MSAA, screen readers do not respect these updates. As a result, a different solution for this problem had to be developed. The strategy used for the music site was to develop the pod based design described above. However, a related problem was raised at the same time. If the navigation is closed, how does a user move to the next major section of the site? Would a user be forced to constantly open and close the main navigation pod in order to navigate between multiple sections of the site? To address this issue, the designers took advantage of the flexibility of Flash to include next and previous sections button for top level navigation in the collapsed mode of the main navigation pod.
Figure 5: Screen shot showing main navigation pod in expanded mode
Figure 6: Screen shot showing main navigation pod in collapsed mode
While relatively simple, this technique shows great promise in facilitating navigation. It is not a technique that has been used or proposed elsewhere. However, it is a terrific example of the impact the fresh perspective designers can bring to the conversation around accessibility.
Next Steps: Conclusion
Bridging the gap between accessibility and design requires that designers become engaged in the challenges of accessibility. This engagement must exist at several levels. First, there is a glaring need for examples of accessible sites that stand on their own in terms of design. There is a false perception among designers that accessibility represents a restriction on creativity. There are few examples that exist in the world that can dissuade designers of this notion. While there are no technical reasons for this division between accessibility and design, the notion exists just the same. The time has come to take Jeffrey Zeldman's advice and let the work speak for itself. Projects such as the CSS Zen Garden have shown what is possible in the standards community in terms of design. The site represents a unique space where new techniques and creativity is cultivated without risk. Designers are encouraged to be innovative-meanwhile understanding about standards grows as the site captures more and more attention. We need an accessibility patch in this garden or perhaps a garden of our own.
However, accessibility is not a proverbial 'Field of Dreams'. Simply building an accessibility garden or a bunch of accessible sites that are exciting to designers will not draw designers by the busload to the cause of accessibility. Accessibility represents a specific challenge to the designer. As highly visual people, designers require sustained and ongoing training to develop better instincts for the non-visual and keyboard driven UI. This is not a simple two hour training, but a longer conversation of usability that should be viewed as requiring a comparable level of effort. Designers often spend years honing their instincts for the visual UI. A comparable and parallel effort should be made for alternative environments.