Books @ HTML Source

Book Details:

Fundamental Web Design and Development Skills cover shot

glasshaus logo

Accessible Web Sites

Extract: Chapter 1: Understanding Web Accessibility

At the most basic level, web accessibility is about people being able to get and use web content. It is about designing web pages that people can present and interact with according to their needs and preferences. A primary focus of accessibility is access by people with disabilities. The larger scope of accessibility includes benefits to people without disabilities. While accessibility is presented here in its relationship to usability, it is important to remember that the fundamental point is the ability to access web content at all. What is nice to have for some people is required by other people for them to be able to access web sites at all.

This chapter introduces web accessibility, with a focus on the synergy between usability and accessibility. It covers the benefits of accessibility, beyond access for people with disabilities. Some common myths are addressed and the conclusion touches on opportunities related to web accessibility. References for more information are included throughout the chapter text and in a reference list at the end.

Accessibility - Usability Synergy

Accessibility is a subset of a more general pursuit: usability. Put simply, usability means designing a user interface that is effective, efficient, and satisfying. Important elements of web site usability are:

  • Learnability: Can visitors use the web site effectively the first time they visit it without becoming frustrated?
  • Memorability: Will visitors remember how to use the web site the next time?
  • Effectiveness: Can visitors easily navigate through the web site, determine what to do next, and understand the content? Is the design consistent and predictable?
  • Efficiency: Can visitors find what they need and accomplish their goal in a reasonable amount of time?
  • Satisfaction: Do visitors have a good feeling about using the web site? Will they use it again? Is the content presented effectively?

Certainly all of these usability elements are good for accessibility, as well. In the context of usability, accessibility means designing a user interface to be effective, efficient, and satisfying for more people in more situations. However, satisfaction is much less an issue with accessibility. Accessibility is more concerned with making web sites perceivable, operable, and understandable. That web interaction is effective and efficient becomes more important when it is part of education and employment.

Usable Accessibility

While many would agree with the concept of accessibility being related to usability, that is often not how accessibility is approached in practice. Many designers and developers were recently introduced to accessibility because of regulations such as Section 508 of the Rehabilitation Act in the US. In such cases, the focus of accessibility is often limited to meeting standards and guidelines. Often this means technical aspects get emphasized at the expense of the human interaction aspect. (This problem can also be seen in some assistive technologies and early web sites that were developed specifically for people with disabilities. While being accessible to some, they demonstrated a clear lack of usability.)

A simplified example of something that can “pass” an automated check for accessibility and still not be usable is alternative text for an image (adding an alt attribute to the <img> element that describes the graphic; there’s more about this below). Alternative text can be provided that does not help users without access to the image at all. The alt text must be meaningful in the context of the page for the page to be usable without images.

This problem can be avoided by adopting the broader definition of accessibility as a guiding principle. Instead of focusing only on the technical aspects, it is important to recognize that usability is also an important aspect of accessibility. Consciously addressing ‘usable accessibility’ helps to clarify the difference between what meets minimum accessibility standards and what is usable by people with disabilities.

Setting a goal of usable accessibility will impact how you develop and evaluate solutions. It has been said that you can meet Section 508 accessibility standards by focusing only on the markup. However, to evaluate for usable accessibility, you need to actually interact with the rendered web pages in various configurations, preferably including usability testing that involves participants with disabilities.

In this way you go beyond technical accessibility to achieve usable accessibility.

Concrete Example of Web Accessibility

A large proportion of accessibility standards and accessibility testing software tools address the more technical aspects of accessibility. These tend to be easier to understand, quantify, and test. Indeed one such aspect, text equivalents for images, is one of the most common and powerful examples of incorporating accessibility on the Web. (Text equivalents are also a common example of an accessibility technique that is of great benefit beyond accessibility to people with disabilities – including indexing, search, and mobile computing.)

Web pages often include images, but many web page visitors cannot see images. Some are blind and use a screen reader, which reads aloud the text on a screen. Others have turned off image downloading because they have a slow Internet connection, or they are working with a handheld device that cannot display images.

Viewing pages without images is addressed when web designers include equivalent text descriptions for images. Called ‘alt text’, short for alternative text, these text descriptions are:

  • Displayed when the mouse pointer hovers over the image (by most visual browsers)
  • Displayed when images are not downloaded (by most visual browsers)
  • Read by screen readers and voice browsers

The figures below are examples of how alt text is rendered by three different browser configurations. The first is Internet Explorer with images loaded and the mouse hovering over an image, which displays the alt text in a popup:

internet explorer alt text example

The next figure shows the same page in Opera with images turned off in the browser settings. For images with alt text provided, the alt text is displayed. Where alt text is missing (the middle image), “IMAGE” is displayed.

opera alt text example

The third figure shows the display of IBM Home Page Reader, a voice browser, set to read images without alt text. The text in the bottom pane indicates what a person using the voice browser would hear. (At the time of the screen capture, it was reading the middle image, thus it is highlighted and the information at the top and bottom of the page is not visible in the bottom text pane.) Notice that it reads the file name of the image that is missing alt text:

Homepage Reader alt text example

The figures demonstrate that if there is no alt text, the usefulness and usability of the page is dramatically reduced for visitors not able to access images. With equivalent alt text, the page is equally usable with or without images.

Alternative text is primarily discussed in terms of its usefulness to people who are blind and use screen readers. This clearly is an accessibility issue for people with disabilities. At the same time, alternative text can also be useful to people without disabilities, such as those using a handheld device. alt text can also increase usability. Most visual browsers display the alt text for an image as the image is downloading. For long downloads, this helps both with user perceptions and with interactions. That is, users are likely to be less aware of a slow image download because they are getting some information about the content from its alt text. The fact that there are benefits of accessibility improvements to people without disabilities is one of the complications of distinguishing between usability and accessibility.

Differentiating Between Usability and Accessibility

When designing web sites, it is rarely useful to differentiate between usability and accessibility. There are times when such a distinction is considered, such as when looking at discrimination against people with disabilities and when defining and addressing specific accessibility standards and guidelines. The following problems illustrate the difference between usability and accessibility:

  • Usability problems impact all users equally, regardless of ability. That is, a person with a disability is not disadvantaged to a greater extent by usability issues than a person without a disability.
  • Accessibility problems hinder access to a web site by people with disabilities. When a person with a disability is at a disadvantage relative to a person without a disability, that is an accessibility issue.

The distinction between usability and accessibility is especially difficult to define when considering cognitive and language disabilities. It is further blurred by the fact that features and functionality for people with disabilities benefit people without disabilities because of situational limitations (as described in the Functional and Situational Limitations section). The overlap between the processes of designing for usability and designing for accessibility, addressed in the next section, demonstrates the synergy between usability and accessibility.

Accessibility As a Process

User-Centered Design (UCD) is an established and proven (although unfortunately not universally followed) process for designing mainstream hardware, software, and web interfaces. (A list of resources for more information on UCD is included at the end of this chapter.) UCD considers usability goals and the users' characteristics, environment, tasks, and workflow in the design of an interface.

While usability and UCD have been topics in books, conference presentations, and education programs over the last decade, design that considers the needs of people with disabilities is still relatively uncommon in education and practice. As a result, the range of users who can use products and the situations in which products can be used are both less inclusive than if the needs of people with disabilities were considered in design. At issue is the range of user characteristics and enviroments that designers define in the design process, consciously or unconsciously.

Without a formal process for considering others, it is common to design for ourselves. Therefore, many web sites are designed based on the individual designer's preferences, abilites, and environment. A large percentage of web site designers are young, without disabilities, experienced with computers, and operating with the latest technologies. Thus, all too often, that is the user profile they tend to design for.

Even when specific user analysis is conducted, the range of users considered is often too narrow. Primarily because of a simple lack or awareness, designers tend not to include people with disabilities and people operating in more unusual environments in their user analysis.

In order to design inclusively, designers need to consider the widest range of possible users and environments. The Web Content Accessibility Guidelines (WCAG) notes that many users may be operating in contexts very different from the designers' context:

  • They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
  • They may have difficulty reading or comprehending text.
  • They may not have or be able to use a keyboard or mouse.
  • They may have a text-only screen, a small screen, or a slow Internet connection.
  • They may not speak or adequately understand the language in which the document is written.
  • They may be in a situation where their eyes, ears, or hands are busy or interfered with (for example, driving to work, or working in a loud environment).
  • They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

These are taken from the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) Web Accessibility Content Guidelines (WCAG) 1.0

When all possible users and environments are considered in web site design, the process can be called inclusive design. (This does not mean that all user circumstances should be given equal weight in design. Certainly it is best that designs are optimized for the most common configurations and are flexible enough to accommodate other configurations.) Inclusive design, as the integration of accessibility into a UCD process, is similar to “design for all” (commonly used in Europe) and “universal design” (more broadly used in the US).

Universal Design

The term universal design was originally used in association with buildings, and has more recently been used in describing an approach to accessibility for information and communication technologies (ICT). Gregg C. Vanderheiden of the Trace Research & Development Center has defined it as such:

“Universal design is the process of creating products (devices, environments, systems, and processes) which are usable by people with the widest possible range of abilities, operating within the widest possible range of situations (environments, conditions, and circumstances), as is commercially practical.”

Universal Design of Consumer Products: Current Industry Practice and Perceptions ud_consumer_products_hfes2000/index.htm.

Universal design refers to a process, rather than the resulting product. When implementing such a process, it becomes clear that some design elements which are merely good, nice-to-haves for usability, are very important when considering access by people with disabilities.

Good for Some People, Required for Others

The beginning of this chapter listed elements of usability and noted that they are good for accessibility as well. The converse is also true, as demonstrated by looking at formal accessibility guidelines. For example, consider the following guidelines from the WCAG:

  • 9.4: Create a logical tab order…
  • 12.3: Divide large blocks of information into more manageable groups…
  • 13.4: Use navigation mechanisms in a consistent manner
  • 13.6: Group related links…
  • 13.8: Place distinguishing information at the beginning of headings…
  • 14.1: Use the clearest and simplest language appropriate…
  • 14.3: Create a style of presentation that is consistent across pages

It would be good if all web sites followed these guidelines. They are aspects of usability, yet, these specific guidelines come from the Web Content Accessibility Guidelines (WCAG); they are web accessibility guidelines.

Certainly, in developing guidelines specifically for accessibility, it is often difficult to distinguish between usability and accessibility. It becomes clear that many design aspects that are good for general usability are required for accessibility.

Consistent Navigation and Presentation Example

Consistent navigation and presentation across a web site is one example of a design aspect that is good for usability and much more important for accessibility. Imagine using a site where the navigation is inconsistent. You have to skim the page to find the navigation in a different location each time. If you have good vision and are using the site on a high-resolution monitor, inconsistent navigation presentation is a minor inconvenience. It only requires visually skimming the page, or maybe one or two mouse clicks to scroll down it.

However, if you have no vision, the inconsistency is a much greater problem; you cannot visually skim the page. People who are blind and use a screen reader hear only one word at a time, rather than seeing the entire web page at once. People with other visual impairments, such as people using significant screen magnification or people with extreme tunnel vision (which is rather like looking through a drinking straw) may see only a small portion of a web page at a time.

People without disabilities can face similar constraints. Web phones and personal digital assistants (PDAs) – which are increasingly being used to access web sites – have very small display screens. Web page navigation that may be visible in one screen on a common monitor may not fit in one screen on a different device.

In all these cases, consistent navigation impacts the usability of the web site even more when the user is operating under constraints from disabilities or devices. This parallelism between constraints from disabilities and constraints from devices is addressed in the next section.

Functional and Situational Limitations

The Differentiating Between Usability and Accessibility section distinguished accessibility as related to disability. Subsequent sections showed areas where this distinction is blurred. A broader definition of accessibility, provided below, is more suitable in most circumstances.

Accessibility can be defined as the quality of a web site that makes it possible for people to use it – to find it navigable and understandable – even when they are working under limiting conditions or constraints.

Accessibility is about designing so that more people can use your web site effectively in more situations.

Although most people consider accessibility in terms of disability, that is not the whole picture. A more broad definition of accessibility covers people operating under situational limitations as well as functional limitations:

  • Functional limitations pertain to disabilities, such as blindness or limited use of the hands. Functional limitations can be visual, auditory, physical, or cognitive (which includes language and learning disabilities).
  • Situational limitations relate to the prevailing circumstances, environment, or device. These limitations can affect anybody, not just people with disabilities. Examples include mobile devices and device limitations, such as having no mouse, or constraining circumstances, such as interacting with a web site through a computer integrated into a car's dashboard, where use of the hands and eyes is limited.

Most of the legal requirements for accessibility are concerned with meeting the needs of people with functional limitations, or disabilities. Understanding the benefits of accessibility to people who are operating with situational limitations, clarifies some of the benefits to people without disabilities and the related business benefits of accessibility.

Two Categories, One Solution

Some business benefits of accessibility are realized because of the relationship between functional limitations and situational limitations. Two seemingly different objectives – designing systems that work in a wide range of environments, and designing systems for a wide range of user characteristics – have similar solutions, as discussed in User Interfaces for All: Concepts, Methods, and Tools (Vanderheiden and Henry, Lawrence Erlbaum Associates, ISBN: 0805829679).

The issues of accessible design are essentially the same, whether you are concerned about designing a mobile Internet appliance with input and output limitations, designing a public kiosk to be accessible to people with disabilities, or designing a web application targeted at seniors. Accessible web sites include those that can be used hands-free, eyes-free, or ears-free (requirements of many mobile products) and by people who are in noisy or dark environments.

If we design a system that is truly universal and mobile, we will have created a system that is accessible to almost anyone with a physical or sensory disability.
User Interfaces for All (Vanderheiden and Henry, Lawrence Erlbaum Associates, ISBN: 0805829679).

Curb cuts, the slope from a sidewalk to a street, are a common example from the physical world of how solutions for disability access are similar to solutions for situational limitation access. Curb cuts are primarily intended to accommodate people in wheelchairs. Curb cuts also benefit people with situational limitations that make it difficult to get over a curb. In fact, most curb cuts are used more often by people without physical disabilities – pushing strollers or shopping carts, riding a bicycle or roller blades, pulling luggage or appliance dollies – than by people in wheelchairs.

The curb cuts example illustrates how people without disabilities benefit from a design for people with disabilities. The next section addresses other benefits of web accessibility.

Many Reasons To Provide Accessible Web Sites

The previous section provides examples of how increasing accessibility for people with disabilities can increase usability for people without disabilities. This section discusses several other motivations for accessibility, including:

  • Compliance with regulatory and legal requirements
  • Exposure to more people: people with disabilities and seniors
  • Exposure to more situations: new places, new devices
  • Better design and implementation
  • Cost savings
  • It makes you look good
  • Enlightened self interest

A Brief Aside On the History of Web Accessibility Awareness

Web accessibility is not a new thing. In the 1990s, web accessibility information was available from organizations such as the Trace Research and Development Center and companies such as IBM. The City of San José Web Page Disability Access Design Standard was developed in 1996, and the AUS Standards for Accessible Web Design ( lawlink.nsf/pages/aus_standards) were available online in 1997. (For a list of other guidelines, see the references at the end of html_guidelines/version8.htm.) Also in 1997, the World Wide Web Consortium established the Web Accessibility Initiative (WAI – see and in 1999 the Web Content Accessibility Guidelines (WCAG) 1.0 were finalized as a Recommendation.

Despite the extensive web accessibility work completed in a few areas, the majority of web site designers and developers were, in the recent past, not aware of accessibility issues at all. Awareness gradually increased with media articles on accessibility, in newspapers (such as the Washington Post and USA Today) and sites for designers and developers (such as Jakob Nielsen's Alertbox and and also as accessibility began showing up in conference topics – such as at web design conferences by CMP Media and Thunder Lizard, Human Factors and the Web conference, and at the Usability Professionals Association conference. (A list of resources for more information on cited examples is included at the end of this chapter.)

While more people began to hear about accessibility, the majority of web sites still did little to implement it. There are several reasons why so many web sites were not accessible besides lack of awareness. Most designers, developers, and managers did not understand the benefits of providing accessible sites and so were not convinced that it was important for their business. Even those who did want to incorporate accessibility had difficulty finding the resources to do so. Recent legal and regulatory activity changed that.

Compliance with Regulatory and Legal Requirements

Increasingly, legal concerns are providing the primary impetus for organizations to pay attention to accessibility issues. Governments issued guidelines for accessibility, including the Canadian Common Look and Feel Standards and Guidelines, and the Irish Recommended Guidelines for Public Sector Organisations. Many people consider accessibility a civil right. In Australia, an individual won a complaint of web inaccessibility against the Sydney Organizing Committee for the Olympic Games under the Disability Discrimination Act (DDA). Similarly, in the US, applicability of the Americans with Disabilities Act (ADA) to web sites has been addressed in documents and case law. America Online (AOL) settled a lawsuit with the National Federation of the Blind (NFB), and major US banks signed agreements to provide accessible online banking. (A list of resources for more information on cited examples is included at the end of this chapter.)

Section 508 of the Rehabilitation Act and the accompanying Electronic and Information Technology Accessibility Standards, which directly address web accessibility, have arguably been the largest catalyst for motivating accessibility work in government and commercial organizations. For more details on legal issues, see resources.html#resources-legal, and Chapter 13 in this book.

Even when the primary motivation for addressing accessibility is legal, organizations can get more out of their accessibility efforts if they realize the additional benefits discussed below, such as increasing the number of people who can use the web site.

More People: People with Disabilities and Seniors

Between 15% and 30% of the general population have functional limitations that can affect their ability to use technology products. That represents an estimated 50 million people in the US alone, and over 750 million worldwide. (Source of these statistics – disabilitydata/p4.textgfx.html and World Health Organization, respectively.) It is estimated that people with disabilities control a discretionary income of over $175 billion annually in the US alone ( For businesses, accessibility is also about increasing sales by addressing the range of constraints that could limit customers' use of your web site.
Accessible web sites accommodate a wider range of customers and constituents, increasing the number of people who can effectively use your web site.

At one time, only a very few people had access to the Internet. As the Internet grew in popularity, an early segment of Internet users were members of “Generation X”. A stereotype emerged in the mid-1990s of mainly affluent young men spending inordinate amounts of time on the Internet. This is no longer the case; these days more people, including people with disabilities and older people, are using the Internet. Organizations are implementing web applications for employees, vendors, and customers. Computers are now available in many schools, public libraries, and senior activity centers. The recent focus on the “digital divide” points out the large number of people who currently have computer access as well as efforts to increase that availability throughout society.

In fact, some people with disabilities and older people have additional motivations for using the Internet. People who cannot drive, who have difficulty walking, or have difficulty carrying packages are more likely to find accessible online shopping an attractive alternative to shopping in “bricks and mortar” stores. Almost 10% of Internet users reported having a disability, in a user survey carried out by the Georgia Institute of Technology Graphic, Visualization, & Usability Center, ( survey-1998-10/graphs/general/q12.htm).

Computerworld reported back in 1999 that:

  • The age group with the highest concentration of online buyers is the 50 to 64 segment, with over 25% making online purchases – and the fastest-growing segment is the 65 and over group.
  • Altogether, almost 7 in 10 online buyers are over 40, according to a survey by Ernst & Young and the National Retail Federation.

( cwi/story/ 0,1199,NAV47_STO42944,00.html) (no longer valid)

In addition to shopping, employment opportunities exist with accessible technology. Some disabilities will prevent people from performing a number of jobs. However, those same people can excel at jobs that primarily require computer interaction. So providing accessible web applications externally increases the number of potential customers and providing accessible web applications internally increases the number of potential employees.


The statistics and trends point to an ever-increasing number of people with functional limitations in the future. As we age, most people experience a decrease in vision, hearing, physical abilities, and cognitive abilities. The pie charts below show the increase in disability with aging:

Disability as a function of age

The Graying of the United States

[Printed with permission from the Trace R&D Center.]

As shown in the graph overleaf, the portion of the population considered “senior” is dramatically increasing, particularly in places where use of technology is pervasive. This has created greater interest in technologies that reduce the impact of various impairments. Older users with diminishing hearing, sight, physical, and cognitive abilities are an important market for many organizations online. For example, in Europe, people past retirement age number about 100 million, according to the Tiresias site:

More Situations: New Places, New Devices

Situational limitations are increasingly issues for people without disabilities (as well as people with disabilities). Accessible web sites accommodate people in a wider range of situations, increasing the situations in which your web site can be used effectively.

Various situational constraints from environments or circumstance are impacting the design of emerging technologies. Sometimes the limitation is inherent in the product, for example, PDAs, mobile phones, and other handheld devices are increasingly able to access the Internet. These devices have limited input and output options, such as small displays without color. Following accessibility guidelines can optimize interaction with such devices.

For example, in 1999, was designed to meet accessibility guidelines and provide usable accessibility, but without thought given to the possibility of access by PDAs and such devices. In 2001, Optavia's president checked out the site on her new web-enabled mobile phone. She was delighted to find that the site as designed worked well on the phone display. It turned out that the effort that went into making the site accessible also made it work on the web phone.

It bears noting that new devices tend to be purchased by affluent buyers, a desirable market segment for most businesses. Examples include an executive buying a gift via a hand-held device, or a stock analyst checking the market from a web-enabled mobile phone. Yet these technologies are not only for the rich. Like mobile phones before them, PDAs and other wireless devices are beginning to spread into common use.

Understanding and using accessibility techniques now will better position your organization to capture the benefits of these and other emerging technologies as their use increases. However, you don't have to wait for the future to realize the additional benefits of accessibility.

Better Design and Implementation

Most of the improvements you make for accessibility result in better design and implementation overall. As discussed previously, accessibility improvements can increase usability for all users, with and without disabilities. Accessible design can also help with technical and maintenance issues. This section describes how accessibility improvements lead to better design and implementation by:

  • Using HMTL for structure and stylesheets for presentation
  • Providing textual information as text rather than images

The example of situational limitations opposite relates to a fundamental principle of accessible web site design, that is to transform gracefully. When a web site transforms gracefully, it is usable in different modes and configurations. So, it works just as well when used on a large monitor set at 640 x 480 screen resolution, a screen reader, or a PDA. “Pages that transform gracefully remain accessible despite any of the constraints…including physical, sensory, and cognitive disabilities, work constraints, and technological barriers.” (Web Content Accessibility Guidelines 1.0, WCAG/#transform-gracefully)

Of primary importance in achieving graceful transformation is separation of structure and presentation (which is further discussed in Chapter 9). HTML was originally intended to merely mark up the content of technical documents in such a way that they could be efficiently transmitted and accessed by multiple platforms. However, once the Internet began to be used more as a marketing tool, web site designers wanted more control over the visual representation of information. As a result, HTML was misused to defining visual representation rather than the intended structural information.

Current technologies such as Cascading Style Sheets (CSS) were designed to provide web site designers with a dedicated method to influence presentation while using HTML only for structure (for more on using CSS to improve Accessibility, see Chapter 9). Consider, for example, a web page in which the main heading is “About Acme.” You should not use HTML to mark up the presentation or appearance, which is a common mistake. Instead, you should use HTML to mark up the structure. Specifically, the heading should be marked up with an <h1> tag, rather than with <font>, as shown below:

Correct (HTML for structure):

<h1>About Acme</h1>
<strong> (usually rendered as bold)
<em> (for emphasis, usually rendered as italic)

Incorrect (HTML for presentation):

<font size="14pt"><b>About Acme</b></font>
<b> (for bold)
<i> (for italic)

Many of the old features of HTML that were used to mark up appearance have been deprecated in favor of using CSS to define presentation. As shown above, HTML elements such as <b> and <i> define presentation, and therefore should not be used. Instead, elements such as <strong> and <em> should be used to mark up the structure and content.

For a list of tags and the role of each (structure or presentation), see “Index of HTML elements and attributes” in Techniques for Web Content Accessibility Guidelines at WAI-WEBCONTENT-TECHS/#html-index.
Deprecated elements and attributes are listed at: REC-html40/ appendix/changes.html#h-A.3.1.2 and REC-html40/index/ attributes.html.

It is important to use HTML to mark up document structure so that assistive technologies can provide appropriate information to users. A well-designed page will have visually distinct groups of information with headings. People who can see can get an overview of a web page's content by visually skimming the page. People who cannot see are not able to do this. One technique that non-visual users can use to get such an overview is to listen to the headings. Most screen readers and voice browsers have a feature that lets users jump to headings on a page. The screenshot below shows the Headings Reading Mode in IBM Home Page Reader:

Headings Reading Mode in IBM Home Page Reader

One way to check headings is with HTML validator ( Below is an outline generated by HMTL validator from heading tags:


When headings are not marked up properly as headings, this information is not available to assistive technologies. While a page could appear to have headings when viewed in a graphical browser, Home Page Reader will say, “No headings on this page”. A page without headings marked up properly would show no outline in HTML validator, as shown.

Stylesheets let web developers mark up headings in correct HTML and change the way browsers present them visually.

Implementation with Stylesheets

Using stylesheets also provides additional advantages, such as helping to manage consistency across multiple pages, upholding site-wide standards, and simplifying maintenance. For example, consider the case where heading colors are blue for first-level headings and red for second-level headings. Then, some time later, the heading colors need to be changed to reflect marketing's branding change. If the colors were marked up in HMTL, the update would require finding and changing every instance of the headings in every page on the site. If instead the colors are defined in a stylesheet that the pages reference, the change is as simple as changing the singlestyle sheet.

Another advantage to stylesheets is in performance. Using stylesheets rather than HTML to define presentation can result in smaller files, thus slightly increasing page transmission rates by reducing use of bandwidth. This increase in download speed is an important issue for many web sites. Another best practice for accessibility that increases download speed is using text rather than images to present textual information.

Text As Text, Not Images

One way that designers attempt to control the way a web page looks is by using images rather than text to present textual information. However, if we look at an example, we can immediately see the accessibility problems we run into when using this method. The first two examples show the navigation text in images. The second two show the navigation text as text. The following screenshot shows a web page that uses images to present some of the navigation, with the browser set to use smaller fonts:

Acme Access

The screenshot below shows the same web page with fonts set to largest in the browser. Notice that the text that is in images – the primary navigation – does not resize:

Acme Access Large

The following two screenshots show the UIAccess page that uses similar looking navigation. Notice that between the two screenshots with fonts set to smaller and largest, the text on the navigation bar resizes:

UI Access small

UI Access largest

Obviously, the text in the image is not resized in the first example, therefore limiting the accessibility of the page to some people with visual impairments – if scalable text was used, we would not run into this problem. Text that is fixed size, rather than a relative size, also will not resize in most browsers, as shown with the left-side text in the following screenshots with small and largest font settings:

Human Factors International small

Human Factors International largest

Providing text as true text and not images has additional benefits beyond accessibility, helping with data mining, and the visibility of a site to search engines. Presenting text as text also helps with redesign and providing multiple languages. As you may expect, when text is presented in images, stylesheets cannot be used to modify them. A similar situation exists in providing multiple languages – images have to be redesigned to provide the text they contain in different languages, and also, any automatic translators will not be able to translate text in images. These examples also show areas for cost savings from addressing accessibility, another advantage of accessibility beyond disability access.

Cost Savings

Initially, understanding and implementing accessibility will take time and money. At the same time, some of the accessibility improvements will reduce overall web site costs, for example, because accessibility improvements increase general usability, online sales are likely to increase and support calls and costs will go down. In fact, in the long-term, you will likely achieve cost savings and revenue increases from the investments you make in accessibility. For example, we have already talked about using stylesheets effectively in web development to reduce maintenance.

Another aspect of accessibility is providing information in plain text, in addition to other multimedia as appropriate. Generally, textual information is easier and cheaper to manage, update, and migrate compared to information contained in graphics. Consider localization, which is the provision of multiple languages.

Providing accessible online products and services can reduce other expenditures for access to people with disabilities. For example, companies that provide accessible online statements (such as telephone, utility, credit card, bank) will likely be able to significantly cut the cost of providing alternative formats such as Braille and large print statements, as customers are drawn online by the flexibility and convenience of online access.

Incorporating accessibility is much more cost-effective when it is addressed from the beginning, and throughout a project. Waiting until the end of a project to consider accessibility significantly increases the time and effort required. Also considering accessibility can help you discover other issues earlier in the project life cycle, saving money and time relative to correcting problems later in the project.

Finally, providing accessible web sites could also save you from some legal costs, as addressed in Chapter 13, and sales could increase following positive press coverage.

Boosting Your Reputation

A commitment to accessibility can be very positive for an organization's image. Take advantage of your accessibility work as an example of being a good “corporate citizen” and meeting the needs of your customers or constituents. Once your web site meets accessibility standards and guidelines and provides usable accessibility, by all means, include it in marketing materials. Businesses such as Adobe have issued press releases on the accessibility of their web-related products. Banks have received valuable local news coverage for their “talking ATMs” (automated teller machines). You can promote your site's accessibility by including the following logos:

You can also list accessible products at places such as:

Furthermore, web accessibility proponents and designers are eager to share the web addresses (URLs) of good examples of accessible web sites. Positive coverage is another way that addressing accessibility is in an organization's self-interest.

Enlightened Self-Interest

Incorporating accessibility is an act of enlightened self-interest, both for organizations and individuals. That is, if individuals and organizations are aware of the benefits of accessibility (they are “enlightened”), they will address accessibility issues in order to benefit themselves (as well as others). For example, while some people are born with a disability, others acquire disabilities from accident, illness, disease, or aging. Most people will experience temporary or permanent disability in their lifetime, and can benefit from technology that is accessible. The acronym TAB for temporarily able-bodied addresses the myth that accessibility only helps people who currently have disabilities.

Debunking Myths

Another aspect of being enlightened about web accessibility is learning enough to separate the myths from reality, as covered in this section.

In Chapter 13, we debunk some legal myths of web accessibility.

Myth: Accessible Pages Have To Be Plain

Many people have the misconception that to make a web site accessible, you have to take out images and color, make it boring, or “dumb it down” in terms of design sophistication. That is not true. We do not want to limit designs for accessibility, and taking away visual appeal does not serve the best interests of the overall audience. In fact, part of the accessibility-usability synthesis is making the web site usable, aesthetically pleasing and commercially viable to all users. It is pointless to design web sites that are accessible, but cannot succeed in the market.

In fact, using images and color often increases usability for some people with cognitive disabilities, while also benefiting people who are cognitively average. WCAG checkpoint 14.2 specifically mandates this:

“Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. [Priority 3]”.

An example of using color to increase usability is in navigation areas of web pages. When navigation links are on a light-colored background and content is on a white background, as in the example web page opposite, it is easier cognitively to distinguish between the navigation area and content area. Furthermore, integrating corporate colors in such a design can increase branding and visual appeal.

Accessibility Resource List

Myth: Just Add a Text-Only Version

A common approach to providing accessible web pages is to design a site, and then make a separate accessible site, that is, text-only version. The issue of text-only versions crosses into the idea of separate versus inclusive design. In today's environment, providing separately developed sites is rarely the best approach for accessibility, or for business. (However, providing truly equivalent information that can be accessed graphically or textually from the same content source is advantageous.)

In the past, common assistive technologies were not able to handle complex web page designs. For example, screen readers read across the screen, so multi-column newspaper-style layouts were not usable. It was nearly impossible at one time to provide visually appealing, complex, dynamic web sites that were also accessible. Therefore, designers were faced with the choice of either significant constraints on their design or providing a text-only version. Now, technologies let you develop visually appealing, complex, dynamic web sites that are also accessible. Stylesheets offer more presentation functionality, assistive technologies can handle layout tables, and browsers provide text resizing. Many recent technologies from the W3C such as Scaleable Vector Graphics (SVG) actually provide more flexibility for presentation as well as accessibility support.

There are several problems with providing a separate accessible site:

  • Separate versions are rarely equal. When there are two versions of the site, invariably, the text-only version does not get updated as frequently as the main version. Even when organizations and individuals have the best intentions of keeping two sites synchronized, the realities of deadlines and limited resources interfere. As discussed overleaf, emerging technologies and methodologies are minimizing this problem.
  • The primary version often lacks even the most basic accessibility. Commonly, developers of alternative accessible test-only sites spend little effort in making the primary site accessible. The alternative site is often optimized for screen readers, with all information provided linearly and without graphics and color. However, some people would be better off using an accessible primary site.

Some new tools generate both a primary site and a text-only site from a single source of content, supposedly eliminating the first problem mentioned, that of separate sites not being synchronized. In one such implementation that I reviewed, the text-only site was fairly close in content to the primary site. However, the alternative site was missing promotional material. Therefore, users of the text-only version missed out on special offers offered through the web site. Clearly this was discriminatory.

Certainly technologies and development efforts are beginning to provide the tools and methodologies needed to ensure that truly equivalent multiple versions of a site can be provided. For example, using XSLT to transform XML documents into other markup more suited for specific configurations or ASP to dynamically generate pages from database or XML files. Organizations such as SmartForce are creating multiple versions from a single content source. This is a promising development.

Myth: Assistive Technologies Take Care of Web Access

Successful web accessibility implementation requires cooperation among diverse areas. Disability groups, standards organizations, government regulators, attorneys, vendors of web development tools, developers of browsers and other user agents, assistive technology developers, and content providers all have roles to play in designing for accessibility. When one of these groups acts unilaterally, or fails to fulfill its responsibilities, it lowers the prospects for a Web that is universally accessible.

Timing of technology advancements also figures in the equation. Some technology advancements provide opportunities to increase accessibility. However, for content providers to take advantage of the new technologies, customers must use them. Some organizations have technology change management systems that impede their rapid adoption of the latest browsers and browser plug-ins. Similar reasons of cost and compatibility, especially with assistive technologies, also make some individuals reluctant to upgrade.

Browser and tool developers are supporting accessibility to a greater extent in new versions of the products, making it easier for content developers to implement accessibility in their web sites. Judy Brewer, Director of the Web Accessibility Initiative (WAI) International Program Office at the W3C, commented as follows:

“Implementations of either of the web software guidelines (the latter two guidelines) (Authoring Tool Accessibility Guidelines and User Agent Accessibility Guidelines) make it easier for web designers to implement the Web Content Accessibility Guidelines. For instance, as browsers develop more capabilities to support accessibility, web site designers need to do less to make their pages accessible. Likewise, as authoring tools automate more of the production of accessible web content, site designers will be able to produce accessible web sites with little effort”.

(Quote taken from committees/judiciary/ hju65010.000/ hju65010_0.htm)

Despite this trend, implementing accessibility in a web site still requires careful attention by the content developers. While it will get easier in the future, content developers will always have a role in accessibility implementation, regardless of technology advancements. The alt text example that opened this chapter illustrates the continuing responsibility of content developers. Standards can define the alt attribute in HTML, user agents (browsers and assistive technologies) can properly provide alt text to users, development tools can encourage or even require you to assign them, and testing tools can validate that they are included — yet only content developers can ensure that the text is equivalent, meaningful, and useful. Therein lies the responsibility and opportunity for all involved.

For more on implementation of accessible web sites, see Chapter 11.


Accessible web sites provide opportunity. For organizations and businesses, there is opportunity to make web sites work for more people and in more situations, to excel over competitors, and to get more business. Designing accessible web sites prepares organizations to take advantage of emerging technologies. For people with disabilities, web sites provide opportunities to participate in work, entertainment, and social activities in ways not otherwise available. With accessible web sites, more people can do ordinary things: children can learn, teenagers can flirt, adults can make a living, and seniors can read about their grandchildren.

Accessible web sites are one opportunity to further empower people – all people. Implementing accessibility is not always easy, and the right attitude is needed to overcome the challenges.

When people embrace the importance of accessibility, understand the benefits to themselves, to their organization, to other individuals, and to society, view accessibility as an exciting challenge, see the opportunity to improve their products and their individual skills, and when they are proud of their accomplishments, then efforts to construct accessible web sites can be a resounding success.

Citations and Resources for More Information

User-Centered Design: Books

  • Usability Engineering (Jakob Nielsen, Morgan Kauffman Publishers, ISBN: 0125184069)
  • User-Centered Design: An Integrated Approach (Karel Vredenburg et al, Prentice Hall, ISBN: 0130912956)
  • User-Centered Web Development (Jonathan Lazar, Jones and Bartlett Pub, ISBN: 0763714313)
  • User-Centered Web Design (Jon Cato, Addison Westley Professional, ISBN: 0201398605)

User-Centered Design: Online


Legal Activities Cited

Articles Cited

Press Releases and Papers Cited

  • Jim Thatcher
  • Michael Burks
  • Sarah Swierenga
  • Cynthia Waddell
  • Bob Regan
  • Paul Bohman
  • Shawn Lawton Henry
  • Mark Urban
ISBN Number:
Chapter Listing
  1. Understanding Web Accessibility
  2. Overview of Law and Guidelines
  3. Assistive Technology, Browsers and Accessibility
  4. Creating Accessible Content
  5. Accessible Navigation
  6. Accessible Data Input
  7. Testing for Section 508 Compliance
  8. Web Development Tools and Accessibility
  9. Separating Content from Presentation
  10. Accessibility and Macromedia Flash
  11. Implementing Accessibility in Enterprise
  12. Emerging Technologies
  13. US Web Accessibility Law in Depth
  1. Quick Reference Guide
  2. Glossary of Terms
  3. Section 508 Guidelines