Redesigning Echo

1. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 �Redesigning Echo� A case study in designing for accessibility

2. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Accessibility? What does it mean? Why are we doing it? Who are we designing for? 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 mediumWhat 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

3. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Technical Concerns Platforms Most assistive technology, such as screen readers, run on PC�s Software Screen readers & audio browsers 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 readerPlatform? 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

4. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Scope of Echo Redesign Code pages for accessibility Experiment with unique approaches to presenting satellite imagery to the visually impaired Launch expected Fall 2000

5. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Scope of Presentation Walk through of the W3C guidelines Our experiences and results

6. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 The Visual Medium 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. 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.

7. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 ALT attribute Recommended for ALL types of images <IMG SRC=�graphic.gif� ALT=�text description�> Need a quick screen to introduce the ALT tag before the next screen. Need a quick screen to introduce the ALT tag before the next screen.

8. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Types of Images Aesthetic Images/Graphics Formatting Images/Graphics Informational Images/Graphics 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 InformationBefore 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

9. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Aesthetic Images not essential to understanding the page content

10. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Formatting Images The 1x1 pixel .gif trick <img src="spacer.gif" alt=" "> Bullet .gifs <img src=�bullet.gif" alt=�*�> 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="*">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="*">

11. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Informational Images Essential to the understanding of the content 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. 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.

12. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Lengthier Descriptions via ALT attribute via LONGDESC attribute alternatives

13. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 ALT attribute concerns 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), 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),

14. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Internet Explorer: alt tags get cut offInternet Explorer: alt tags get cut off

15. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Slide 5c Without height and width tags, you will get wacky alignment. Slide 5c Without height and width tags, you will get wacky alignment.

16. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 height & width ? 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. ---- 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. ----

17. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 height & width ? 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. ---- 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. ----

18. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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? 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...)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...)

19. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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">

20. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 BUT ?? How does a screen reader interpret this attribute?

21. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 ?? 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.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.

22. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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.

23. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 LONGDESCBrowser Support : POOR Notes 12 Point to copy of web pages in packet. Notes 12 Point to copy of web pages in packet.

24. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 pwWebspeak 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. ---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. ---

25. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 LONGDESC & pwWebspeak 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.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.

26. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 iCab

27. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 iCab

28. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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 12 Point to copy of web pages in packet. Notes 12 Point to copy of web pages in packet.

29. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Recommendation Don�t use LONGDESC!! We all turn around and show our t-shirts. We all turn around and show our t-shirts.

30. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 D-links! What are they? There are 2 types of d-links TEXTUAL INVISIBLE 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 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

31. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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. 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?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?

32. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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. 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.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.

33. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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 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. --- 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. ---

34. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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 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. 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.

35. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 IMAGE MAPS Aesthetic Graphical Navigation Informational Graphical Nav.

36. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Aesthetic

37. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Recommendation Provide ALTernative description Use Client Side Maps Physically locate �map� code near ImageMap graphic in your code.

38. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Informational

39. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Recommendation In addition, add a D link and embed the image map links into the description

40. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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 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 heretab 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

41. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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

42. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Recommendations Link text should be informative (avoid CLICK HERE) Filenames, keep short when possible

43. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Page Organization �Layout Tables� are readable to screen readers Use of �Formatting� graphics It is all about good CODE Code logically�?? Or Layout - tables, nested tables, newspaper columns are all ok! - JAWS reads them just fine! (http://imagers.gsfc.nasa.gov/adventurex/newsp.html)Or Layout - tables, nested tables, newspaper columns are all ok! - JAWS reads them just fine! (http://imagers.gsfc.nasa.gov/adventurex/newsp.html)

44. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Tables Read Logically?

45. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Newspaper Columns

46. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Standard Layout

47. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Problems

48. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Result is confusing

49. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Reads Logically

50. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 �Helmut� design

51. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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�

52. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Charts & Graphs Long Description by MaggieLong Description by Maggie

53. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Writing Descriptions 101

54. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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 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 likeWriting 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

55. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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.

56. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 FRAMES Use meaningful titles http://hotwired.lycos.com/webmonkey/html/96/33/index2a.htmlhttp://hotwired.lycos.com/webmonkey/html/96/33/index2a.html

57. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 FRAMES Use the NOFRAMES tag http://hotwired.lycos.com/webmonkey/html/96/33/index2a.htmlhttp://hotwired.lycos.com/webmonkey/html/96/33/index2a.html

58. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Recommendation Provide meaningful titles Use NONFRAMES when possible

59. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Tables for Tables Use Good CODE Provide Row and Column Headers Summarize Tables

60. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 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

61. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Top 5 Accessibility Tips 5. Client side Image Maps with descriptions http://hotwired.lycos.com/webmonkey/html/96/33/index2a.htmlhttp://hotwired.lycos.com/webmonkey/html/96/33/index2a.html

62. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Resources Lynx Viewer: http://www.delorie.com/web/lynxview.html Lynx-IT: http://www.slcc.edu/webguide/lynxit.html JAWS: http://www.hj.com/JFW/JFW.html pwWebspeak: http://www.soundlinks.com/pwgen.htm http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html Windoweyes: http://www.4access.com/products/we.htm ZoomText: http://www.aisquared.com/products/zx.htm iCab: http://www.icab.de/info.html Bobby: http://www.cast.org/bobby/ VII. Resources Lynx Viewer: http://www.delorie.com/web/lynxview.html Lynx-IT: http://www.slcc.edu/webguide/lynxit.html JAWS: http://www.hj.com/JFW/JFW.html pwWebspeak: http://www.soundlinks.com/pwgen.htm http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html Windoweyes: http://www.4access.com/products/we.htm ZoomText: http://www.aisquared.com/products/zx.htm Bobby: http://www.cast.org/bobby/ (Great for checking download time, even if you aren't interested in its other features. Will approve your site if you have alt tags - and will show you where you don't. Pretty useful..htmlVII. Resources Lynx Viewer: http://www.delorie.com/web/lynxview.html Lynx-IT: http://www.slcc.edu/webguide/lynxit.html JAWS: http://www.hj.com/JFW/JFW.html pwWebspeak: http://www.soundlinks.com/pwgen.htm http://www.prodworks.com/issound/catalog/catalog_pwwebspeak.html Windoweyes: http://www.4access.com/products/we.htm ZoomText: http://www.aisquared.com/products/zx.htm Bobby: http://www.cast.org/bobby/ (Great for checking download time, even if you aren't interested in its other features. Will approve your site if you have alt tags - and will show you where you don't. Pretty useful..html

63. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 Resources An example page of how to implement d-links and longdesc tag (Break this page) http://www.mozillazine.org/articles/article678.html http://www.interlog.com/~joeclark/breakthispage.html W3C Techniques for Web Content Accessibility: 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 How to use <noframes> http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html An example page of how to implement d links and long desc tags (Break this page) http://www.mozillazine.org/articles/article678.html http://www.interlog.com/~joeclark/breakthispage.html W3C Techniques for Web Content Accessibility: (to be taken with a whole salt lick) http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/ W3C Checklist of Checkpoints for Web Content Accessibilty Guidelines: (ditto) http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html How to use <noframes> http://hotwired.lycos.com/webmonkey/html/96/33/index2a.htmlAn example page of how to implement d links and long desc tags (Break this page) http://www.mozillazine.org/articles/article678.html http://www.interlog.com/~joeclark/breakthispage.html W3C Techniques for Web Content Accessibility: (to be taken with a whole salt lick) http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/ W3C Checklist of Checkpoints for Web Content Accessibilty Guidelines: (ditto) http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html How to use <noframes> http://hotwired.lycos.com/webmonkey/html/96/33/index2a.html

64. Accessibility Presentation to GSFC Webmasters M. Masetti, S. Skroh, G. Butcher July 27, 2000 The End PowerPoint presentation online at: http://www.echothebat.com/accessibility/talk.html