音声ブラウザご使用の方向け: SKIP NAVI GOTO NAVI

Web Posted on: December 31, 1998


Advanced Accessible Web Page Design

Presenter: Mike Paciello, WebABLE! Solutions, Nashua, NH

Abstract

The "Advanced Accessible Web Page Design" workshop will focus on developing a strategy for designing accessibility into the Web infrastructure, including the Internet, intranets, extranets and standard web page design. Participants will review guidelines and use tools, utilities and other resources to create accessible of web sites.

Special focus includes the following topics: creating accessible web pages from the ground up, designing for browser accessibility issues, use of the HoTMetaL web authoring tool and review of WAI

accessibility guidelines for Page Authoring. Participants will be introduced to Bobby V3.0, WebSAT, Acrobat Access and other productivity tools.

Additionally, the following areas will also be considered: internationalization, style sheets,

collaboration interfaces, authoring tools, HTML development, captioning, Descriptive Video and Real-Time Streaming Audio/Video.

Introduction

The 1998 HTML 4.0 specification release by the World Wide Web Consortium (W3C) includes, among other things, increased accessibility enhancements for people with disabilities. New rules, attributes and elements have been defined to enrich the HTML markup language to the extent that web content is accessible to a broader audience, particularly people with disabilities.

In addition, the current version of the Cascading Style Sheets Level 2 (CSS2) specification includes the former Aural Cascading Style Sheet (ACSS) specification. As a result, blind and print impaired users can easily render web content audibly without losing document structure and regardless of what the original Web page looked like. Thus, the overall usability and accessibility of a web page is increased at the user level.

In this article, we'll review enhancements involving structured elements and attributes, forms, tables, frames, scripts, media and style issues. Let's first consider an overall summary of changes included within the HTML 4.0 specification for accessibility.

Summary of Changes

Directly quoting the specification, Section 2.3.2 notes the following regarding the accessibility developments for 4.0:

  • Better distinction between document structure and presentation, thus encouraging the use of style sheets instead of HTML presentation elements and attributes.
  • Better forms, including the addition of access keys, the ability to group form controls semantically, the ability to group SELECT options semantically, and active labels.
  • The ability to markup a text description of an included object (with the OBJECT element).
  • A new client-side image map mechanism (the MAP element) that allows authors to integrate image and text links.
  • The requirement that alternate text accompany an image included via the IMG element.
  • Support for the title and lang attributes on all elements.
  • Support for the ABBR and ACRONYM elements.
  • A wider range of target media (tty, braille, etc.) for use with style sheets.
  • Better tables, including captions, column groups, and mechanisms to facilitate non-visual rendering.
  • Long descriptions of tables, images, frames, etc.

If You Already Have a Web Site

Updating and maintaining an accessible web site does not have to be a major task for the web site administrator. By following a simple two-step process, you are very likely to capture most (if not all) of the accessibility problems your site currently contains:

If You are Creating a New Web Site

Designing an accessible web site should not be considered a difficult task. In fact, it should just become part of the normal design process. In addition to following HTML 4.0 coding constructs, there are a few key points to keep in mind:

  • Maintain a simple, consistent site design with clear navigational controls.
  • Use HTML for structured markup; Use CSS for layout, presentation, and style.
  • Ensure that all images, image maps, applets, and objects contain alternative text.
  • All video and audio should have associated text transcripts; include captioning for video.
  • Avoid the use of Frames, but if you must use them, include the title attribute for each frame and the NOFRAMES alternative.

Finally, keep a copy of the WAI Accessibility Guidelines: Page Authoring (http://www.w3.org/TR/WAI/WD-WAI-PAGEAUTH) on hand. These guidelines were developed by a dedicated group of volunteer individuals to provide a focused set of recommendations that will insure the accessibility of your web site to most people with disabilities.

The next few sections provide more detailed information regarding the design of accessible web pages.

The Importance of Separating Structure from Presentation

Increasing the ability to distinguish between document structure and presentation improves the overall comprehension of a web site, particularly for users who are blind and visually impaired. Over the years it has become a common practice for web content creators and designers to misuse various HTML elements in order to "force" presentation for the sole purpose of enhancing the graphical design of their web sites.

A classic example is the common misuse of tables to format a page. How common? I recently reviewed the source code for the top 10 best performance-rated sites (conducted and rated by Internet World). Those sites included: AltaVista, Yahoo!, Amazon.com, Excite, Infoseek, E*Trade, Dell, Barnes&Noble, GeoCities, and Lycos. All 10 of the sites included homepages that contained tables as their primary page design. Only three included provisions for style sheets. This is particularly important to note since 5 of these sites have positioned themselves as web "portals" or first-stop-shops on the WWW and are also the most frequently visited sites on the WWW. Clearly, performance is a relative term.

If you are developing a web site, be sure to separate structure from presentation. Don't use structure elements like BLOCKQUOTE, TABLE, EM or H1 to force presentation or style. Use these elements as they were intended: to describe and/or define the structure of a web page. When defining presentation, use style sheets. Refer to the W3C's Style Sheet web page at: http://www.w3.org/Style/.

The Alternative Text Requirement

The evolution of the Web certainly has it's irony. When Tim Berners-Lee released it to the world the interface and content were primarily text based. Then, NCSA infused the GUI effect by way of the Mosaic browser. Today, browser agents and thin clients are imbedded in just about everything including televisions, cell phones and kiosks.

It is true that text based content is not that exciting. However, rendering navigational instructions through a voice interface while you are operating a vehicle may be the only functional and safe way to drive. This is one example of what is typically described as a "hands/eyes busy" environment. It's also the new wave of next generation computing.

Therefore, the ability to implement text strings, whether they're brief descriptions of an image or complete renditions of a reference manual is, in fact, a complement to the overall infrastructure of the Web today. This is where HTML 4.0 has taken a quantum leap. Valid and formal HTML construction now requires alternative text for both the IMG and AREA elements. To do this, you can use the ALT attribute as noted in the following example:

<IMG src="http://www.yuri.org/images/logo.gif" alt="An image of the YRIF logo.">

Additionally, the new specification includes the LONGDESC attribute to enable linking to a detailed description of images. For example, you may also want to attach a description of your organizations mission along with it's logo. Using LONGDESC, authors can link to a file that contains a detailed description that is associated with the image. It might contain the following syntax:

<IMG src="http://www.yuri.org/images/logo.gif" alt="An image of the YRIF logo." longdesc="yrif.html">

The linked file "yrif.html" includes textual description not just of the image and how it appears, but the purpose of the organization that uses the image logo. In this example, the file "yrif.html" contains the following text description:

<BODY>

<P>

The is an image of the YRIF logo. The logo contains two inverted "Y" characters with a small, solid circle that symbolizes the world. The mission of the YRIF is to stimulate international research, development and education around technologies for people with disabilities.

</BODY>

Thus, LONGDESC provides the flexibility and advantages of including a detailed description that the ALT tag cannot. Attaching an accessibility flavor to it, you are also helping blind and visually impaired users by providing them with contextual information and, in other scenarios, navigational information that will improve their ability to use your site.

HTML 4.0 requires that you also specify alternative text when using the AREA element for client side image maps as noted in the example that follows:

<MAP name="nhmap">

<AREA href="nh.html"

alt="Map of New Hampshire"

shape="default">

</MAP>

By requiring the ALT attribute on images and image maps, users who view web pages using text based or self-voicing browsers will find it much easier to understand graphical presentation. If you use server-side image maps provide text links for each active region. The key is to insure that your alternative text is short and functional.

Forms Accessibility

Generally speaking, forms have presented problems for blind and low vision users on three fronts:

  • Text on image buttons
  • Navigation
  • Ease of use

All of these problems are solved with the use of new elements, enhanced attributes and conformance to few simple guidelines. Three required guidelines that the WAI Page Authoring reference document sites are:

  • Do not use image maps to create graphical "submit" buttons. Use the BUTTON or INPUT elements with alternative text
  • Associate labels with their controls explicitly.
  • Provide alternative text for images used as "submit" buttons.

If you cannot do this, then the W3C WAI guidelines recommend that you include e-mail versions of your form that are downloadable. This will ensure that everyone has access to the form.

Again, to facilitate better navigation of a form for users who access the Web with non-GUI browsers or clients, be sure to use both the ACCESSKEY and TABINDEX attributes. For example, the following form implements the both attributes:

<FORM action="..." method="post">

<LABEL for="cb1" accesskey="C">

Sex

</LABEL>

<INPUT tabindex="1" type="checkbox" name="cb1">

<LABEL for="text1" accesskey="T">

User Name

</LABEL>

<INPUT tabindex="2" type="text" name="text1">

<LABEL for="submit" accesskey="S">

Submit

</LABEL>

<INPUT tabindex="3" type="submit" name="submit">

</FORM>

In each instance of this form example, elements are properly labeled, access keys are assigned and the tab order is specified. Focus is thus maintained by the user.

A well organized form increases readability, even for a visual user. Use the FIELDSET, LEGEND and OPTGROUP elements to create well-designed forms. However, when you design web pages, consider the growing popularity of non-visual browsers agents targeted at self-voicing and natural speech interfaces - that's the future of next generation computing.

Table Accessibility

Because of the prolific use of tables to format web pages, many users with visual impairments are unable to properly view your site. Because table usage is so prominent, it's unlikely that serious effort will be made to change the site style. If this is true for you, there are a couple of things that you can do to assist the visually impaired in the navigation of the page, since navigation is the primary issue:

  • Include the CAPTION element and summary attribute for each table. Both allow you to provide a description of the table's structure and, to a limited extent, it's content.
  • Identify rows and columns using the TH element.

The New OBJECT Element

New to this version of the HyperText Markup Language is the OBJECT element. I'm sure I'm not the first one who loves this implementation. Even though it implies a graphical nature, the richness of the element design is such that it literally promotes accessibility. Using the OBJECT element, web page designers can easily include text descriptions of any object and the title attribute to provide an appropriate description of the object. Note the following example:

<OBJECT title="A spinning globe"

classid="globe.class">

An animated version of the earth as it spins.

</OBJECT>

Final Notes

In addition to the increased availability of the TITLE attribute, the LANG (language) attribute is quite pervasive throughout the HTML 4.0 specification. In fact, the LANG attribute is available to all but 10 elements. The specification notes this about LANG:

"Language information specified via the "lang" attribute may be used by a user agent to control rendering in a variety of ways. Some situations where author-supplied language information may be helpful include:

  • Assisting search engines
  • Assisting speech synthesizers, etc..

Using LANG, you can ensure the proper rendering of data and text for speech synthesizers. In a similar vein, you can use the ABBR and ACRONYM elements to more clearly assist speech interfaces and agents in the pronunciation abbreviations and acronyms.

The content of the ABBR and ACRONYM elements specifies the abbreviated expression itself, as it would normally appear in running text. The title attribute of these elements may be used to provide the full or expanded form of the expression. Coupled with the title attribute, a complete and proper rendering of an abbreviation or acronym can be achieved. For example:

<P>

<ABBR title="Yuri Rubinsky Insight Foundation">YRIF</ABBR>

</P>

URL Resources