# Presentation: 381955

## “Redesigning Echo”

- A case study in designing for accessibility

## Accessibility?

- What does it mean?
- Why are we doing it?
- Who are we designing for?

**Notes:**
What does it mean - pages accesssible to Screen readers
Why?
The Workforce Investment Act of 1998, signed into law on August 7, 1998, contains amendments to the Rehabilitation Act of 1973. The changes to Section 508 of the 1998  amendments to the Rehabilitation Act were designed to strengthen current law to ensure that people with disabilities will have equity in the use of electronic and information technology  (E&IT). Section 508 requires that "individuals with disabilities, who are members of the public seeking information or services from a Federal department or agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities."

While the National Federation of the Blind (NFB) offers a set of guidelines for web page accessibility, a more comprehensive list of guidelines was developed by the World Wide Web Constortium (W3C) Web Accessibility Initiative (WAI). The U.S. Access Board’s Electronic and Information Technology Access Advisory Committee’s Final Report dated May 12, 1999 recognizes WAI's web accessibility standards and requires Federal web sites reach a AA rating which translates into meeting all Priority 1 and 2 checkpoints. 
Who? Primarily the visually impaired. The web is - by nature - a visual medium

## Technical Concerns

- Platforms
- Most assistive technology, such as screen readers, run on PC’s
- Software
- Screen readers & audio browsers

**Notes:**
Platform?  PC/Mac/UNIX - but if you are aiming for the diabled audience, most blind or visually impaired users will be using a PC because that's the platform that the assistive technology runs on.  Also IE, because the assisitive technology is not terribly compatible with Netscape, unfortunately.

Software? - JAWS, ZoomText, pwWebspeak, Windoweyes, 
                    audio browser vs. screen reader

## Scope of Echo Redesign

- Code pages for accessibility
- Experiment with unique approaches to presenting satellite imagery to the visually impaired
- Launch expected Fall 2000

## Scope of Presentation

- Walk through of the W3C guidelines
- Our experiences and results

## The Visual Medium

**Notes:**
The web is a very visual medium - most web pages use a mix of graphics and text.  Graphics are used for many reasons, but is it important for the user to see every image on a web page?  Probably not.  

However,  for disabled users, as well as for people who just likes to load web pages without images, having a way of identifying image content without actually seeing the image is important. 

The most widespread way of doing that is by using alt tags.  Most of us are familiar with them - we know that they go inside the brackets with the rest of the image attributes - source, border, height and width...

But alt tags, simple as they are, have raised a number of issues, not all easily solved. 

## ALT attribute

- Recommended for ALL types of images
- <IMG SRC=“graphic.gif” ALT=“text description”>

**Notes:**
Need a quick screen to introduce the ALT tag before the next screen. 

## Types of Images

- Aesthetic Images/Graphics
- Formatting Images/Graphics
- Informational Images/Graphics

**Notes:**
Before going into alt tag issues, I'm going to talk a bit about images.
-------

We divides web images & graphics into 3 categories of images:

Aesthetic

Formatting

Information

## Aesthetic Images

- not essential to understanding the page content

- alt=“animated fire”

- alt=“girl on cell phone”

## Formatting Images

- The 1x1 pixel .gif trick
-           <img src="spacer.gif" alt=" ">
- Bullet .gifs
-           <img src=”bullet.gif" alt=“*”>

**Notes:**
Many web designers use a 1x1 pixel transparent .gif as a layout tool.
Do images such as this need some sort of alt tag? 

The accepted way to put on alt tag on such an image is:

<img src="spacer.gif" alt=" ">
Leave a space between the quotes...

How about bullet .gifs - what should the alt tag look like?

We suggest:
<img alt="bullet.gif" alt="*">

## Informational Images

- Essential to the understanding of the content

**IR cat**

**EM wave animation**

**Notes:**
These images are vital to the understanding of the web page itself.  This infrared image of a cat belongs to a page explaining infrared light.  It illustrates an explanation about how infrared imagery and false colors works.  If the user could not see this image, they might have a harder time understanding the concepts in the text of the web page.  This is where the web page author might want a longer explanation.  But this causes problems.

Ginger, Sara and I have come across  several alt tag related issues  this summer.

## Lengthier Descriptions

- via ALT attribute
- via LONGDESC attribute
- alternatives

## ALT attribute concerns

- Netscape Example

**Notes:**

Notes 5
When an image is used aesthetically, generally the image description in the alt tag will be fairly short.  No problem.  But what if you have a slightly longer description?  Well, if you have  small image, and a long alt tag, when you load a page without images, the alt tag will either not appear (when using Netscape), 

##   Internet Explorer Ex.

-   Internet Explorer Ex.

**Notes:**
Internet Explorer: alt tags get cut off

##   Netscape - w/o height & width

-   Netscape - w/o height & width

**Notes:**

Slide 5c
Without height and width tags, you will get wacky alignment.

## height & width ?

**Notes:**
Notes 6:
The arguement for using height and width tags is that when you use them, the page and its text loads completely, leaving open spaces for the
pictures to load later. Your viewer is reading and surfing your site immediately rather than waiting for the whole page to load in.

However, we did a test using Bobby, which among other things, will tell you how long a page would take to load with a 28.8 kb modem.  So we ran one of our pages through it.  The first time, we kept the height and width tags in: (show gif).  As you can see, it took 46.48 seconds to load.

Then the same page was run through with the height and width tags taken out. (show 2nd gif)  And it took the page actually less time to load.
46.44 seconds. 
----

## height & width ?

**Notes:**
Notes 6:
The arguement for using height and width tags is that when you use them, the page and its text loads completely, leaving open spaces for the
pictures to load later. Your viewer is reading and surfing your site immediately rather than waiting for the whole page to load in.

However, we did a test using Bobby, which among other things, will tell you how long a page would take to load with a 28.8 kb modem.  So we ran one of our pages through it.  The first time, we kept the height and width tags in: (show gif).  As you can see, it took 46.48 seconds to load.

Then the same page was run through with the height and width tags taken out. (show 2nd gif)  And it took the page actually less time to load.
46.44 seconds. 
----

## Recommendation

- Aesthetic images
- Keep ALT descriptions concise
- Consider omitting height&width if text is only a few words too long
- Informational Images
- How do we provide lengthier descriptions to our audience?

**Notes:**
Slide 7

Recommendations?
Aesthetic graphics - be brief in your alt tags, or if you can't be -  it's ok to leave off the height and width tags.   

Informative graphics - how do we implement lengthy image descriptions when they become necessary? (Remembering that very lengthy alt tags can throw off a page's formatting...)

## LONDESC

- The W3C suggests using an HTML 4.0 attribute called longdesc.  Within the <img> tag, you would reference either a .html or a .txt file, which would contain your long description of the image.
- 		<img alt="yellow cat”
- 		src="yellow_cat.gif"
- 		longdesc="yellow_cat.html">

## BUT ??

- How does a screen reader interpret this attribute?

##           ??

- “Mastering HTML 4.0”

**Notes:**
Mastering HTML 4.0 book by Deborah S. Ray and Eric J. Ray even claims that longdesc is implemented like an alt tag.

(Insert longdesc.jpg here)

This doesn't work.

## BREAK THIS PAGE

- A great site by Joe Clark
- & Aaron Doust.
- http://www.interlog.com/~joeclark/breakthispage.html
- They tried out various methods of implementing   accessibility protocol and then invited people to "break" their page.

## LONGDESCBrowser Support : POOR

**Notes:**
Notes 12

Point to copy of web pages in packet. 

## pwWebspeak

**Notes:**
Notes 12a
Here's what they learned.  Browser support for longdesc is poor.  
pwWebSpeak 2.5, is actually not a screenreader, but an audio browser. Though is is quite a good one.  We bought a version of it, and we found that this browser converts all the images into text, i.e. Image - followed by whatever is in the alt tag.  The browser will say, outload that it has an associated description file, and if you alt+I on the highlighted image, it will take you to the long description page.
---

## LONGDESC & pwWebspeak

**Notes:**
Notes 12b

Here is  a screenshot of the long description .html file.

 The problem with pwWe is that most visually impaired users would likely use something like JAWS which is a screenreader, rather than software that acts only like a browser.  

iCab, a Mac browser in development supports longdesc, but is somewhat roundabout.  You have to control-click on the image, choose the contextual menu "Image/description" and iCab opens a new window to display the description on it.  This is virtually useless for blind users for two reasons - one being that it's Mac software, and most visually impaired users would likely use a PC as that is the platform most, if not all, assistive technology runs on.  (Joe Clark added, in an email to me that there is only one Mac screenreader, OutSpoken, but that it is "a neglected piece of crap".  Also, iCab's method of using longdesc seems to be mouse-driven.

The third and final browser that will support longdesc is Mozilla.  However, Mozilla requires Mac OS 8.5 or later.  Again - not useful.

## iCab

## iCab

## Browser Support : POOR

- pwWebspeak is  an audio browser, not a screenreader
- iCab is Mac software, is mouse driven
- Mozilla requires Mac OS 8.5 or later

**Notes:**
Notes 12

Point to copy of web pages in packet. 

## Recommendation

- Don’t use LONGDESC!!

**Notes:**

We all turn around and show our t-shirts.

## D-links!

- What are they?
- There are 2 types of d-links
- TEXTUAL
- INVISIBLE

**Notes:**
Slide 14

What besides longdesc can be used for lengthy descriptions of images?

Description links or d-links!

D-links are also mentioned in the W3C guidelines. 

A d-link is simply a link to an .html or .txt description of an image.

Two kinds of D-links
a) Textual
b) Invisible

## Textual D-link

**<img alt="yellow cat" src="yellow_cat.gif"><a href="yellow_cat.html">[D]</a>**
- The [D] will appear as hypertext next to the image.

**Notes:**
Textual D-link example:

<img alt="yellow cat" src="yellow_cat.gif"><a href="yellow_cat.html">[D]</a>

The [D] will appear as hypertext next to the image.  The user then simply clicks on (or tabs to) the link and they will be taken to the page with the description.

We recommend using .html files rather than .txt files as you can put a link back to the referring page.

But what if you don't want [D]'s popping up all over your web design?

## Invisible d-link

**<img alt="yellow cat" src="yellow_cat.gif"><a href="yellow_cat.html"><img border=0 alt="[D]" src="spacer.gif"></a>**
- The [D] will appear only as an ALT description, not as text on the page, enabling it to be seen when loading without images, and by JAWS.

**Notes:**
Invisible D-links

The alternative is making a 1x1 pixel transparent .gif that will serve as the link, rather than the textual [D].  Just make [D] your alt tag for the invisible .gif. 

<img alt="yellow cat" src="yellow_cat.gif"><a href="yellow_cat.html"><img border=0 alt="[D]" src="spacer.gif"></a>

When you load with images, you will see the [D] as the alt tag and be able to click on it to take you to the description page.  JAWS will let the user tab to it.

Notes 16:
 SARA does demo of JAWS and link-D stuff.

## Recommendation

- Use a .html file rather than .txt file
- D-links won't become obsolete.  They work like LONGDESC should.  So if LONGDESC ever starts becoming more widespread, then you don't have to replace all of your d-links.

**Notes:**

Notes 17:

We sat throught the GSA talk that they had beamed into the auditorium an listened to them tell us that longdesc isn't supported, but that we should use them anyway, and we disagree.  Why go to the effort to use something that is unsupported?  How is using longdesc helpful to anyone?  It wastes you, the webmaster's time, and is unreadable by the user.

Besides which, longdesc and d-links sound the same when they are read by a screenreader - Sara does demo of pwWebspeak and JAWS.
---

## Summary of Descriptions

- 1) The ALT descriptions work just fine for most images
- 2) If you have an image that is  crucial to understanding the concepts on a particular page, be nice to users who can't see it, and write up a good description.   Use          D -links.

**Notes:**
Notes 18: 
We don't want this to be overwhelming for you  so here's the two probably most important things that I think have come out of our summer of research.

1) Alt tags work just fine for most images - though it's a good idea to load your page without images after you've designed it to make sure it looks ok and that the alt tags you went through the effort to put in actually work.

2) For an image that is  crucial to understanding the concepts on a particular page, be nice to users who can't see it, and write up a good description of it.   If you do, don't waste your time on longdesc - use d-links.  They are handy and actually work.

## IMAGE MAPS

- Aesthetic Graphical Navigation
- Informational Graphical Nav.

## Aesthetic

## Recommendation

- Provide ALTernative description
- Use Client Side Maps
- Physically locate “map” code near ImageMap graphic in your code.

## Informational

## Recommendation

- In addition, add a D link and embed the image map links into the description

## Hypertext Links

- NOTE about Hypertext
- Screen readers allow the users to TAB through the Hypertext links on a page - this is a primary screen navigation tool

**Notes:**
tab through, enter to click
how JAWS reads them
hypertext, then filename, then title of page, then content.
good vs. bad - example,  Amazon.com
Also, avoid click here

## How it sounds

- When selected, the screen reader (JAWS) reads in this order
- Reads link text (again)
- Reads file name
- Reads title of page
- Then begins content

## Recommendations

- Link text should be informative
- (avoid CLICK HERE)
- Filenames, keep short when possible

## Page Organization

- “Layout Tables” are readable to screen readers
- Use of “Formatting” graphics
- It is all about good CODE
- Code logically...??

## Tables Read Logically?

## Newspaper Columns

## Standard Layout

## Problems

## Result is confusing

## Reads Logically

## “Helmut” design

## Recommendations

- Code tables to read logically
- Limit number of Formatting graphics and add   ALT = “ ”
- Consider how code reads linearly when using design techniques such as “HELMUT”

## Charts & Graphs

**Notes:**
Long Description by Maggie

## Writing Descriptions 101

- Clouds of smoke from the Cerro Grande fire rise behind state Police Officer Rigo Chavarria as he directs traffic leaving Los Alamos, N.M.

## Description Tips

- Tell what it looks like
- Use different descriptions than the page text
- Color
- Contrast (light and dark shading)
- Texture
- Spatial Orientation - left, right, top, bottom
- (Where are objects in relation to each other?)
-  Relative size of objects

**Notes:**
Writing Descriptions 101:

- Never use the same descriptions in the text as your ALT tag or d-link.
(Who wants to read the same thing twice?)
- Color
- Contrast (light and dark shading)
- Texture
- Positioning - left, right, top, bottom
(Where are objects in relation to each other?)
- Tell what it looks like

## Sample Description

- In the foreground of this color photograph stands a policeman.  He is standing in the middle of a street, facing the camera.  His arms are raised in the air and his fingers point to the left, directing traffic away from
- the swiftly approaching wildfires.  The expression on his face is very serious.  There are only a few cars left on the street, because most people have already evacuated the town.  Just behind the policeman to the right, stand two National Guardsmen with a large military  truck. Towering gray clouds of smoke from the wildfires rise high into the sky in the not so distant horizon behind the policeman.  The billowing clouds of smoke are so
- tall that they reach out of the photograph, and appear to block the sun.  They cast an ominous shadow over the scene.

## FRAMES

- Use meaningful titles

## FRAMES

- Use the NOF_x0008_RAMES tag

## Recommendation

- Provide meaningful titles
- Use NONFRAMES when possible

## Tables for Tables

- Use Good CODE
- Provide Row and Column Headers
- Summarize Tables

## Check your work

- We tested our pages using a PC Pentium System running JAWS for Windows, pwSpeak, and ZoomText
- Laboratory for Terrestrial Physics is making this system available to GSFC webmasters

## Top 5 Accessibility Tips

- 5. Client side Image Maps with descriptions

- 4. Use meaningful hypertext link names

- 3. Code tables so they read logically

- 2. Most visually impaired users will be on a PC and using Internet Explorer

- 1. When needed, use d-links, not longdesc!

## Resources

- Lynx Viewer:  _[http://www.](http://www.delorie.com/web/lynxview.html)__[delorie](http://www.delorie.com/web/lynxview.html)__[.com/web/](http://www.delorie.com/web/lynxview.html)__[lynxview](http://www.delorie.com/web/lynxview.html)__[.html](http://www.delorie.com/web/lynxview.html)_
- Lynx-IT: _[http://www.](http://www.slcc.edu/webguide/lynxit.html)__[slcc](http://www.slcc.edu/webguide/lynxit.html)__[.](http://www.slcc.edu/webguide/lynxit.html)__[edu](http://www.slcc.edu/webguide/lynxit.html)__[/](http://www.slcc.edu/webguide/lynxit.html)__[webguide](http://www.slcc.edu/webguide/lynxit.html)__[/](http://www.slcc.edu/webguide/lynxit.html)__[lynxit](http://www.slcc.edu/webguide/lynxit.html)__[.html](http://www.slcc.edu/webguide/lynxit.html)_
- JAWS: _[http://www.](http://www.hj.com/JFW/JFW.html)__[hj](http://www.hj.com/JFW/JFW.html)__[.com/JFW/JFW.html](http://www.hj.com/JFW/JFW.html)_
- pwWebspeak: _[http://www.](http://www.soundlinks.com/pwgen.htm)__[soundlinks](http://www.soundlinks.com/pwgen.htm)__[.com/](http://www.soundlinks.com/pwgen.htm)__[pwgen](http://www.soundlinks.com/pwgen.htm)__[.](http://www.soundlinks.com/pwgen.htm)__[htm](http://www.soundlinks.com/pwgen.htm)_
- _[http://www.](http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html)__[prodworks](http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html)__[.com/](http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html)__[issound](http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html)__[/catalog/catalog_](http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html)__[pwwebspeak](http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html)__[.html](http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html)_
- Windoweyes: _[http://www.4access.com/products/we.](http://www.4access.com/products/we.htm)__[htm](http://www.4access.com/products/we.htm)_
- ZoomText: _[http://www.](http://www.aisquared.com/products/zx.htm)__[aisquared](http://www.aisquared.com/products/zx.htm)__[.com/products/](http://www.aisquared.com/products/zx.htm)__[zx](http://www.aisquared.com/products/zx.htm)__[.](http://www.aisquared.com/products/zx.htm)__[htm](http://www.aisquared.com/products/zx.htm)_
- iCab: http://www.icab.de/info.html
- Bobby: _[http://www.cast.org/bobby/](http://www.cast.org/bobby/)_

## Resources

- An example page of how to implement d-links and longdesc tag (Break this page)
- _[http://www.](http://www.mozillazine.org/articles/article678.html)__[mozillazine](http://www.mozillazine.org/articles/article678.html)__[.org/articles/article678.html](http://www.mozillazine.org/articles/article678.html)_
- _[http://www.](http://www.interlog.com/~joeclark/breakthispage.html)__[interlog](http://www.interlog.com/~joeclark/breakthispage.html)__[.com/~](http://www.interlog.com/~joeclark/breakthispage.html)__[joeclark](http://www.interlog.com/~joeclark/breakthispage.html)__[/](http://www.interlog.com/~joeclark/breakthispage.html)__[breakthispage](http://www.interlog.com/~joeclark/breakthispage.html)__[.html](http://www.interlog.com/~joeclark/breakthispage.html)_
- W3C Techniques for Web Content Accessibility:
- _[http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/](http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/)_
- W3C Checklist of Checkpoints for Web Content Accessibility Guidelines:
- _[http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html](http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html)_
- How to use <noframes>
- _[http://](http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html)__[hotwired](http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html)__[.](http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html)__[lycos](http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html)__[.com/](http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html)__[webmonkey](http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html)__[/html/96/33/index2a.html](http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html)_

## The End

- PowerPoint presentation online at:
- http://www.echothebat.com/accessibility/talk.html