Beginning Accessible Web Page Design

Mike Paciello
WebABLE! Solutions
Nashua, NH

Abstract

The "Beginning Accessible Web Page Design" workshop program is an introduction to understanding how the World Wide Web operates and how to create web pages (or sites) that are accessible to people with disabilities.

Participants will learn how to access the Web, perform web and internet searches, use free web e-mail services, access personal productivity tools, use tools and utilities created specifically for people with disabilities and create accessible home pages. Additionally, introductory material including guidelines and resources will be provided and reviewed.

Using personal walk-through instructional design, every participant will be engaged in the creation of his or her own accessible web page and will learn how to "code" pages correctly to include accessible images, image links and text links.

Participant entry level should be novice users. This workshop only assumes that most participants do know how to log in on the Internet. Users completing this course will be prepared to participate in the afternoon workshop for advanced users.

An Introduction to the WWW and Markup Languages

The World Wide Web (henceforth referred to as "WWW") has increasingly become an intimate part of our lives. Rarely can anyone go through a day without hearing or seeing the familiar "www.something.orother" – this is the typical way for identifying or specifying one’s web address or "home page."

For the new or novice user, the idea of the WWW is not always completely understood. It’s quite common (and not at all embarrassing) for people to confuse terms like "internet," "the web," "HTML," "e-mail" and "Yahoo". On the other hand, it is important that you realize there is a distinction and exactly how to make those distinctions. For the sake of brevity, let’s define each of the key terms we’ll be using throughout the context of this paper.

Internet:

The Internet is an elaborate electronic information resource that allows millions of people to communicate and share information. It is primarily controlled and maintained by computers and computer networks. However, technology is advancing to the point that satellite, wireless, cable and telephone technology are becoming integral parts of the Internet.

Interestingly, the Internet was created by the US federal government to insure communications for the Defense Department just in case the telecommunications network (telephone) should be destroyed or sabotaged.

An excellent online resource for learning about the Internet is the Electronic Freedom Foundation’s Extended Guide to the Internet (http://www.eff.org/papers/bdgtti/eegtti.html).

World Wide Web:

The World Wide Web, also known as "The Web" or the "WWW" is clearly the most visible part of the Internet, second only to electronic mail as an internet utility. The Web is really an application that runs on the Internet in the same sense that your PC’s word processor or spreadsheet run as applications on MS Windows, Windows 95 or other operating system (for example, UNIX).

By definition, the Web is a network of computers that talk to each other. Each computer contains web "pages" that often are organized to form a "web site." This would be similar to creating a series of word processor documents that make up a complete book. Unlike a book, Web pages reside on computer systems all over the world – yet you can still access and read them.

The Web is made up of three primary components:

• HTML (HyperText Markup Language) used to create web pages.
• HTTP (HyperText Transfer Protocol) used to transmit web pages between computers.
• Web browsers used to view web pages.

Web browsers include Microsoft’s Internet Explorer, Netscape’s Navigator or Productivity Works WebSpeak.

E-Mail:

Electronic mail. E-mail is an easy way to send electronic messages to another person or to several persons at once. Sending e-mail is like sending a letter through the postal service, but much, much faster. (In fact, most people refer to the postal mail service as "snail mail" because it is slow and often takes at least one day to send postal mail whereas it usually only takes minutes or seconds to send e-mail.)

Yahoo!:

Yahoo! is a popular web based search engine. Because there are millions of web sites containing, billions of web pages, keeping track of them is nearly impossible for the average person. A search engine like Yahoo! allows you search for particular web pages or information on the web. You type in your request and Yahoo! returns most (if not all) of the web pages containing that information.

Markup Languages

As mentioned, HTML is used to create web pages. Actually, HTML is a "markup language" – that is, it is a way of identifying the individual elements that make up an electronic document or web page. For example, note the following business letter:

EXAMPLE:

WebABLE Solutions

131 D.W. Highway #131

Nashua, NH 03060 USA

Dear Harry:

I’m really looking forward to the CSUN ’99 conference for the following reasons:

1. The preconference workshops are very informative.
2. The exhibits are varied and display a full range of products for people with disabilities.
3. The plenary sessions are interesting and well-prepared.

Please be sure that I am properly registered to attend all the sessions. Enclosed please find my check to cover the cost of registration.

Regards,

Mike Paciello

END OF EXAMPLE

(Keep in mind that this is an example of a simple letter based on typical American English grammatical constructs. Creation of a document in other cultures may look radically different.)

In the above example, there are several components or elements that make up the business letter. They include the return address, salutation, opening remark, an ordered list, closing statement, closing salutation and name.

Using HTML to "mark up" the document, we can simply the structure to include an address, five paragraphs and one ordered list. You "mark up" an HTML document (web page) with the use of "tags" that represent the different elements on the page. An HTML tag almost always uses the following format:

<element name> information </element name>

In other words, information that you want to include on your web page is contained within the HTML tags. To start a tag, you specify the start tag, <element name>. Once you’ve typed in or otherwise included all the information that follows that tag, you must end it. To end a tag, you specify the notion of an end tag which looks like </element name>.

Let’s see the same document marked up in HTML:

EXAMPLE:

<html>

<body>

<address>WebABLE Solutions

131 D.W. Highway #131

Nashua, NH 03060 USA</address>

<p>Dear Harry:</p>

<p>I’m really looking forward to the CSUN ’99 conference for the following reasons:</p>

<ol>

<li>The preconference workshops are very informative.</li>

<li>The exhibits are varied and display a full range of products for people with disabilities.</li>

<li>The plenary sessions are interesting and well-prepared.</li>

</ol>

<p>Please be sure that I am properly registered to attend all the sessions. Enclosed please find my check to cover the cost of registration.</p>

<p>Regards,</p>

<p>Mike Paciello</p>

</BODY>

</HTML>

END OF EXAMPLE

In this example, the tags represent the following:

<html> = this is an HTML document

<body> = this is the start of the body of the HTML document

<address> = the return address

<p> = paragraph

<ol> = ordered list

<li> = list item

Every web page or HTML document must begin with the HTML and BODY tags. This is how a web browser understands what the document is and therefore how is should be displayed on your computer.

Web page creation can be and often is much more complex than the example above. In fact, there are different ways that the page could be "tagged" to create the page. Learning the basics of HTML web page creation is however a fairly straightforward process.

Using a Web Browser

For the most part, the Web and all its information is useless unless you have something that allows you to "see" the information. For the sake of context, "seeing " a web page refers to any method or tool that a person uses to render web information in a format he/she understands. This could be through a graphical, textual or auditory medium. Generically these mediums are referred to as web "browsers".

There are two mainstream web browsers and one browser that was created primarily for the blind and visually impaired:

• Internet Explorer by Microsoft
• Navigator by Netscape
• WebSpeak by The Productivity Works

To use Internet Explorer and Navigator, simply start up the application on your PC. Once the browser is displayed on your monitor, simply point your mouse cursor on the browser URL "bar", click on it and then type in the address or URL (uniform resource locator) . For example, if you wanted to visit the CSUN Center on Disabilities web page, you would type the following into the URL bar:

http://www.csun.edu/cod

For those who use the keyboard rather than a mouse, one the application starts type CTRL-O. This will open a small fill-in box for you to type in the URL. Once you type the URL, press the ENTER key. The browser will immediately go to the web page that you specified.

For WebSpeak users, press the F2 function key. This will open a window that will allow you to type in the URL as well.

Free Web E-Mail

If you have an electronic mail program installed you PC, you likely won’t need to access an e-mail service. However, there are particular times when having an "extra" e-mail service that is easy to access 24 hours a day, 7 days a week is very useful.

For example, at least years CSUN conference several participants walked into the "Web Playroom" hoping to log into their e-mail only to find out that they could not access their internet service or service provider. However, using one of the free web e-mail services, folks could "point" their web browsers at the site and have complete access to e-mail.

There are two web e-mail services that appear to be the most popular: MSN’s Hotmail and Yahoo! Mail. Signing up and using these e-mail services is simple. Simply specify the URL address of the web site in your web browser and follow the directions listed on the web page. To access Hotmail and Yahoo! Mail, type the following in your browser URL address window:

• Hotmail: http://www.hotmail.com
• Yahoo! Mail: http://mail.yahoo.com

Now, whenever you are away from home or have no easy way to access your internet service provider, just log into your web e-mail service and mail away!

Useful WWW and Accessibility Tools

Following is a list of tools that you may find useful for using the Web and creating web pages. These tools include utilities and applications that will help you create accessible web pages. Tools that promote web accessibility are identified with an asterisk (*).

Homestead - Free Web Site Editor and Host

Homestead is a web site that actually lets you create your own web site (personal, organization or business). They have an online editor that is fairly easy to use and contains it’s own tutorial. You can access Homestead at: http://www.homestead.com

HoTMetaL Pro Web Editor*

HoTMetaL Pro is a power suite of site creation tools including a web editor. However, it is a tool that was primarily created for experienced or "power users". What is most interesting about the application is that it includes both an internal web accessibility validation tool as well as an on-screen dynamic keyboard called the Visual Dynamic Keyboard or VDK. The accessibility validation tool will immediately review you web pages for accessibility to people with disabilities. The VDK allows individuals who cannot use their hands to type or move a mouse to interact with a keyboard. It’s particular helpful for people with mobility impairments.

W3C HTML Validation Service

Generally speaking, you should be sure that your web pages are properly authenticated for proper HTML coding. While it’s true that no one will penalize you for improperly coding your pages, it is possible that web browser will not properly interpret your page. The W3C HTML validation service ensures that your pages are coded properly and calls out errors. You can access the W3C validation service, poinrt your web browser at: http://validator.w3.org/

Bobby Accessibility Validation Service*

Bobby is a web accessibility validation service. Like the W3C validation service, it also checks your web pages for proper coding. However, in this case it’s specific "mission" is to ensure that your pages are accessible according to the guidelines specified by the W3C’s Web Accessibility Initiative (WAI – http://www.w3.org/WAI). You can access Bobby at: http://www.cast.org/bobby

Three Key Guidelines for Creating Accessible Web Pages

Creating accessible web pages is certainly more challenging then following three guidelines. However, if you follow these three guidelines, you’ll be sure to relieve people with disabilities of most of the barriers they face today:

• Make sure that your pages are designed consistently and with good navigational aids
• Follow the Web Accessibility Initiative (WAI) Authoring Guidelines and Techniques document for creating accessible web pages
• Validate your pages using both the W3C and Bobby web page validation services