FedWeb December 1998 Handout

Designing for Universal Accessibility with HTML 4.0

FedWeb Workshop, 7 December, 1998
Presented by Kynn Bartlett <kynn@hwg.org>
President, HTML Writers Guild

1. Overview of Course
2. Six Principles of Accessible Web Design
3. Quick Tips on Web Accessibility
4. Useful URLs
5. About the HTML Writers Guild

Course Overview

The days of designing for only one or two web browsers are long gone; today's Web surfers use anything from non-visual screen readers to the latest version of Netscape Navigator, and the future will bring even more Internet-enabled 'Net appliances -- televisions, phones, watches, toasters, cars, and more. Designing for universal accessibility is vitally important to ensure that the sites you create today will continue to work tomorrow and beyond, into the 21st century.

This tutorial will provide you with a useful and comprehensive understanding of the issues regarding accessible web design:

• What "universally accessible web design" means
• Why it's necessary
• Foundation principles of accessible web design
• Overview of the Web Accessibility Initiative's guidelines on page design
• How to evaluate your own pages; accessibility level
• Useful links for learning more about this topic

This workshop is presented by Kynn Bartlett, President of the HTML Writers Guild and instructor of the Guild's online courses in accessible web design and cascading style sheets.

Six Principles of Accessible Web Design: An Introduction to the WAI Page Author Guidelines

By Kynn Bartlett <kynn@hwg.org>
Revision 98/12/07

INTRODUCTION

The World Wide Web Consortium's Web Accessibility Project (WAI -- see the list of useful links) has produced an extensive list of guidelines for web page authors with a lot of useful information on designing accessible web pages. Each topic of web authoring, from style and structure to tables to forms, is addressed with detailed instructions on how to maintain accessibility.

This very technical document can sometimes be overwhelming to a new web author, however, and the beginner may not glean the message of the guidelines.

Thus, this introduction document is presented as an examination of the principles upon which the Page Author Guidelines were written; the basic rules for accessible design that formed the specific instances described in each individual entry in the guidelines. You should read the entire set of Guidelines, though, after reading this document; you'll be able to see why they exist and what they mean.

Without further ado:

SIX PRINCIPLES OF ACCESSIBLE WEB DESIGN

• I. Create pages that conform to accepted standards.
• II. Know the difference between structural and presentational elements; use stylesheets when appropriate.
• III. Use HTML 4.0 features to provide information about the purpose and function of elements.
• IV. Make sure your pages can be navigated by keyboard.
• V. Provide alternative methods to access non-textual content, including images, scripts, multimedia, tables, forms and frames, for user agents that do not display them.
• VI. Be wary of common pitfalls that can reduce the accessibility of your site.

PRINCIPLE I: Create pages that conform to accepted standards.

Web pages that follow one of the published standards for HTML, CSS, and other specifications are much more likely to be interpreted correctly by the various user agents (browsers) that exist. If your page is written in "correct" HTML, then you can feel confident you've done your part in providing the user agent with the information it needs to correctly render the page for your browser.

Which standard should you use? HTML 4.0 is preferred, since it incorporates a great number of accessibility features and is the latest recognized standard for HTML; however, any of the following should be acceptable:

• HTML 4.0 Strict
• HTML 4.0 Transitional
• HTML 4.0 Frameset
• HTML 3.2
• HTML 2.0

Additionally, if you use stylesheets, you should conform to either CSS1 or CSS2, preferably the latter.

PRINCIPLE II: Know the difference between structural and presentational elements; use stylesheets when appropriate.

HTML provides some elements that are strictly "structural" -- meaning that they are used to define the structure for a web page, in semantic terms. "This part is <EM>phasized", "this part is an <ADDRESS>", "this is a <LI>st item". Other elements represent specific "presentation", such as "this should be in <B>old", or "this is <CENTER>ed in the middle of the line."

Structural elements are preferred -- you can <EM>phasize a word with a voice-based browser (by raising the volume and/or pitch), but how do you make words "bold"? Structural elements and presentational elements should not be confused with each other.

The HTML 4.0 standard discourages the use of HTML elements to convey presentation; this function is instead given over to stylesheets. It should be noted, though, that stylesheet support is not fully implemented on all user agents; this means that for at least the near future, some presentation elements in HTML will still be used.

PRINCIPLE III: Use HTML 4.0 features to provide rich meta-content about the purpose and function of elements.

HTML 4.0 (and to a limited degree, some previous standards) gives web page authors valuable tools for giving additional information on the function and meaning of various tags, usually through the use of additional attributes such as TITLE or CLASS.

These attributes can be interpreted by sufficiently sophisticated user agents to intelligently render the page elements in a way that provides the user with more information -- thus making the web pages more usable for everyone. As an example that graphical browser users may relate to, many web browsers will render the TITLE attribute of images and other elements as "tool tips", small yellow windows that appear when a mouse pointer is passed over the element in question.

By providing complete information on what a tag "really means" in the larger scope of your page, you can increase the accessibility of your page. Tables and forms, in particular, can benefit from the new attributes in HTML 4.0.

PRINCIPLE IV: Make sure your pages can be navigated by keyboard.

Not all users can use, or will have access to, a graphical pointing device such as a mouse. A good web page will be navigatable via keyboard (or voice) commands. While this is often a user agent (browser) issue, there are things that a web author can do that will cause a page to become unusable with keyboard-only navigation.

One example is imagemaps -- client-side imagemaps should be used instead of server-side imagemaps, and proper ALT tags provided, because these can be utilized by a browser agent to provide keyboard navigation to the user. Another is through the use of the ACCESSKEY and TABINDEX attributes for form elements. Test your pages without using a mouse -- can you navigate your site by keyboard only?

PRINCIPLE V: Provide alternative methods to access non-textual content, including images, scripts, multimedia, tables, forms and frames, for user agents that do not display them.

Not all user agents will be able to display all HTML elements; a wise designer will realize this and plan alternate methods of conveying the same information for user agents which may not be able to fully render the page.

The foremost example of this is the "ALT" attribute, of the <IMG> tag, which allows an author to provide alternative text in case an user agent cannot (or does not) display graphics.

Likewise, when adding complex elements to your web pages, such as sound, animation, forms, frames, tables, or scripts, you should take advantage of the HTML features that let you specify alternate methods of conveying the same information. The <OBJECT> element is a good example of this; nested <OBJECT>s allow you to specify multiple ways to express the same basic content, from a multimedia display down to a plain text summary.

Accessibility on some forms can also be maintained by providing "off-line", or at least, off-web methods of doing things; such as providing an email link or phone number for people who can't use a web response form, for whatever reason.

PRINCIPLE VI: Be wary of common pitfalls that can reduce the accessibility of your site.

Admittedly, this is a catch-all principle; there are some things that don't fall neatly under the other basic principles, but are important to consider anyway, as they can have a drastic effect on how usable your web site is.

Examples of these pitfalls include:

• The use of ASCII art
• Blinking text
• Link names that don't make sense out of context
• Links that aren't separated by printable characters

CONCLUSION

Now that you know the key principles of web accessibility, you should read over the current version of the Web Accessibility Initiative's Page Author Guidelines, as well as the "Techniques" document that goes along with it. You can find both linked from http://www.w3.org/WAI/

© Copyright 1998 by Kynn Bartlett

WAI Quick Tips Reference Card

Judy Brewer <jbrewer@w3.org>, WAI Domain Leader
November 18, 1998

About the Quick Tips Reference Card

The WAI Quick Tips reference card is a concise summary of a few key design principles for making Web sites accessible to people with disabilities and more usable for everyone. The Quick Tips are based on the WAI Page Author Guidelines, developed by the WAI Education & Outreach Working Group, and meant only to help you remember some principles of accessible design. We strongly recommend that you read the complete WAI Page Author Guidelines and techniques document to understand what is behind these quick tips.

Quick tips to make your Web site accessible to everyone, including people with disabilities, handheld devices & slow connections

1. Images, Photographs & Animations

Use the alt attribute to concisely describe the function of all visuals.

2. Page Orientation

Use headings, lists, table summaries, and clear and consistent page structure to make pages quick to scan.

3. Imagemaps

Many people cannot use a mouse. Use client-side MAP to provide alternative text for imagemap hotspots.

4. Hypertext Links

Descriptive link text improves access for those who cannot see. Ensure that each link makes sense when read alone.

5. Graphs & Charts

Summarize Content or use the longdesc attribute.

6. Audio & Video

Provide captions or transcripts of audio content, and text or audio descriptions of video content.

7. Scripts, Applets, Plug-ins

Provide alternate content for scripting, applets or plug-ins so that no important information is lost when unsupported or turned off.

8. Frames

Label each frame with title or name, and incluce a hypertext start-page in NOFRAMES element.

9. Tables

Avoid using tables to format text columns. Make sure cell-by-cell reading order makes sense for tabular data.

10. Evaluate

Validate the HTML & CSS of your site. Check accessibility with available tools, and with images, sounds & animations off.

See www.w3.org/WAI for complete Page Author Guidelines & techniques

(The original of this document can be found at http://www.w3.org/WAI/References/QuickTips)

Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved. http://www.w3.org/Consortium/Legal/

Useful URLs:

The following websites are recommended references on accessible web design:

http://www.w3.org/WAI/

The Web Accessibility Initiative

The W3C's accessibility project -- includes a good list of additional links

http://www.rit.edu/~easi/law/weblaw1.htm

Applying the ADA to the Internet: A Web Accessibility Standard, Cynthia D. Waddell, JD
ADA Coordinator, City of San Jose, CA USA

An article written by Ms. Waddell about how the Americans with Disabilities Act applies to websites must reading for government webmasters!

http://www.w3.org/TR/WD-WAI-PAGEAUTH/

WAI Accessibility Guidelines: Page Authoring

The holy scriptures of web accessibility -- print these out and keep them by your desk for reference.

http://www.cast.org/bobby/

Bobby (Accessibility Evaluator)

Run all your pages through this wonderful service of the Center for Applied Special Technology -- it will catch any accessibility/compatibility problems that may exist!

http://validator.w3.org/

W3C HTML Validation Service

Check to see if your pages are valid HTML.

http://www.anybrowser.org/campaign/abdesign.shtml

Accessible Site Design

Tips on how to make your site viewable on any browser, from the Any Browser campaign.

http://www.prodworks.com/

pwWebSpeak Browser

A talking browser designed for the visually impaired; a good example of a non-visual user agent. (HTML Writers Guild members can receive a discount on the purchase of pwWebSpeak.)

http://www.hwg.org/opcenter/w3c/voicebrowsers.html

Web Authoring Strategies for Voice Browsers, Kynn Bartlett, September 1998

A Guild position paper on the future of voice browsers.

http://www.hwg.org/opcenter/events/fedweb/

The presentation pages for this workshop, for reference; this page is also included as hypertext links.

About the HTML Writers Guild

The HTML Writers Guild is the world's largest international organization of Web authors with over 85,000 members in more than 130 nations worldwide. The Guild was founded in 1994 and incorporated in 1996 as a 501(c)3 educational organization.

The HWG exists to assist our members in developing and enhancing their capabilities as web authors, to compile and publicize information about standards, practices, techniques, competency, and ethics as applied to web authoring, and to contribute to the development of the web and web technical standards and guidelines.

Guild activities include an extensive collection of web design discussion lists, with searchable archives reaching back years; our one-on-one mentoring program that matches new members with experienced web authors; a sizeable set of resources and links on our web page; discounts on software and services through our vendor discount program; active participation in the World Wide Web Consortium (W3C), giving front-line web authors a voice in the standards development process; and a series of online courses in HTML, Cascading Stylesheets, Javascript, Microsoft Access, Perl, and more.

Membership is open to anyone with an interest in web authoring and a desire to improve his or her skills. Trial membership is free, and paid membership is $40 per year --less than the cost of many HTML books! Paid members receive discounts on class tuition fees and are eligible to participate in the full range of HWG activities. Discounted memberships are available to educators, full time students, and members with disabilities.

For more information on the HTML Writers Guild or to join online now, please see www.hwg.org.

About Kynn Bartlett

Kynn Bartlett is the co-owner and Chief Technologist of Idyll Mountain Internet, a southern California web design company founded with his wife Liz in 1995. His experience also includes freelance design, writing, teaching, and consulting, as well as employment as the Web Administrator for Harvey Mudd College. His current interests include CGI programming in Perl, stylesheets and HTML 4.0, and universal accessibility in web design. Kynn and his wife live with their four dogs near Orange County, California.

Kynn has been on the Governing Board of the HTML Writers Guild since 1996, and currently serves as the President of the Guild and the Director of Marketing and Outreach. He is involved with several W3C working and interest groups as a Guild representative, and is the instructor for the HWG's online courses on web accessibility and cascading stylesheets.

Kynn's personal homepage is located at www.idyllmtn.com/~kynn/

ONLINE COURSE: Designing for Universal Accessibility with HTML 4.0

The next session of the Guild's online class on accessible web design begins on Monday, December 14. Online classes are taught using a bulletin board system and allow students to participate when their schedules allow. Course fees are $50 for Trial (free) members of the Guild, and $25 for Full (paid) Guild members. Completion certificates are available for an additional $5 per course.

The online course covers the topics of this workshop in greater detail, offering an in-depth look at web accessibility issues. If you would like more information or wish to enroll online, please see www.hwg.org/services/classes/h201.2.html