PowerPoint Presentation SLIDE FORMAT: Generally speaking, the slides consist of black text against a white background. Where significant images are used, they will be described. SLIDE 1 SLIDE TITLE: Is Your Site Accessible? SLIDE CONTENT: The slide is divided into two vertical columns. On the left: Validating Your Web Site Prepared by: The NYS Forum for Information Resource Management IT Accessibility Committee On the right: A photo of an animal cracker in the shape of an elephant...there is only a bite or two of the elephant left. SLIDE 2 SLIDE TITLE: Is Your Site Accessible? SLIDE CONTENT: OBJECTIVE: The learner will list three reasons to validate a web page SLIDE 3 SLIDE TITLE: What is "validation?" SLIDE CONTENT: * Usually involves using a computer program to review the HTML code on the page, based on standards * Notes deficiencies in HTML * Notes deficiencies in design * Notes accessibility problems SLIDE NOTES: Just like the spelling and grammar checkers we use for word processing, validators check our HTML code, pointing out typos, improper syntax and other such errors. SLIDE 4 SLIDE TITLE: What is "validation?" SLIDE CONTENT: * If you use a page authoring program, it probably does some validation for you: A cropped screen image of a DreamWeaver screen is displayed, in code (HTML) view. The code displayed contains an error (an H1 element without a closing tag), which DreamWeaver highlights in yellow. Below the image: As this screen shot from Macromedia’s Dreamweaver shows. SLIDE NOTES: Point out that the page author has neglected to include the closing

tag, so Dreamweaver has highlighted the opening

tag to draw attention to the error. SLIDE 5 SLIDE TITLE: Items requiring human judgment during validation SLIDE CONTENT: * Do the page background and text colors provide sufficient contrast to be legible? * Is the page using color to provide information? * Will the audience be able to understand the terms and language you're using? SLIDE NOTES: The computer is wonderful at catching syntax, spelling, the sorts of errors many of us make when writing HTML. However, there are items that require human judgment during the validation process. SLIDE 6 SLIDE TITLE: Items requiring human judgment during validation SLIDE CONTENT: * Are acronyms explained? * Is the navigation strategy you're using clear to visitors? * Does the site look the same in all browsers? SLIDE 7 SLIDE TITLE: Items examined in validation SLIDE CONTENT: * If the site uses a client-side SCRIPT (e.g., JavaScript), does it also include a NOSCRIPT option providing the same information or function of the script for users without script-handling capabilities? * Web-enabled cell-phones and PDAs * Web TV (yes, it’s still out there!) * “Malware-phobes” SLIDE 8 SLIDE TITLE: Items examined in validation SLIDE CONTENT: * HTML code - is it correct? * Element syntax correct? • Are elements requiring both opening and closing tags properly closed? • Do elements span paragraphs, etc.? • Are elements in proper order? * Attribute syntax correct? • Attribute contain valid values? • Attribute allowed? SLIDE 9 SLIDE TITLE: Items examined in validation SLIDE CONTENT: Below the slide title is a yellow text box containing the following HTML code: info about image(ALT="info about image" is highlighted with a yellow background) * Images * Do they include ALT attributes? * ALT attribute values sufficiently descriptive? * Should the image also have a LONGDESC attribute (i.e., a link to a file containing a more detailed description than will fit in ALT attribute) * Is the image being used as a link? * Does all of the information still come through if you turn off images in your browser? SLIDE NOTES: Demonstrate turning off images in your browser. If time allows, also demonstrate disabling style sheets and Javascript. SLIDE 10 SLIDE TITLE: Items examined in validation SLIDE CONTENT: * Does the page linearize properly? * If table is used for layout, does information flow in the order it is intended to? * If a data ("data" is italicized) table is included in page, does information flow in the order it is intended to? * Do tables include contextual information? * Is the SCOPE attribute used for row and column headings? * Is the HEADER attribute used with ID to provide context? SLIDE 12 SLIDE TITLE: Items examined in validation SLIDE CONTENT: * Can the page be understood if the visitor cannot/does not use scripts or style sheets? * Can test with (some) browsers * Pages relying on scripts should also include provisions for those using no scripts * Pages laid out with style sheets must also make sense when user agent does not accommodate style sheets. SLIDE NOTES: SCRIPT example: Show an example of a calculator form that estimates how much sales tax is due on items of varying prices. Show an example of the noscript version of the page that explains how to perform the same calculations with a calculator. SLIDE 13 SLIDE TITLE: Why Validate? SLIDE CONTENT: * Most accessibility errors will NOT be visible on the page * Validation catches HTML errors too The bottom half of the slide is divided into two vertical columns. On the left: A screen shot of a web page: Don't let this happen to you! A photo close-up of an old man's very wrinkled eyes. Madame Sylvia's Skin Cream About (beneath which is an icon of a question mark) Ingredients (beneath which is an icon of a bowl) Find a Store (beneath which is an icon of a magnifying glass) On the right: Can you tell which images on this page are accessible and which are not? SLIDE 14 SLIDE TITLE: Which images are accessible? SLIDE CONTENT: The slide is divided into two vertical columns. On the left: A screen shot of a web page: Don't let this happen to you! A photo close-up of an old man's very wrinkled eyes. Madame Sylvia's Skin Cream About (beneath which is an icon of a question mark) Ingredients (beneath which is an icon of a bowl) Find a Store (beneath which is an icon of a magnifying glass) On the right: A text box with yellow background containing HTML code, with an arrow pointing to the photo of the old man's eyes: Below the text box: NOT accessible! (in red) A text box with yellow background containing HTML code, with an arrow pointing to the question mark icon beneath the word "About": Below the text box: NOT accessible! (in red) A text box with yellow background containing HTML code, with an arrow pointing to the magnifying glass icon beneath "Find a Store": Find a Store Below the text box: ACCESSIBLE! in bold italics (in green) Spanning the bottom of the slide: (HINT: What other problem might this slide have if it were a web page?) SLIDE NOTES: Point out that the main image on the page, the old man’s eyes, is not accessible because it does not include either an ALT or a LONGDESC attribute. When you finish explaining the problems with the code, address the question on the bottom of the screen. We have used color to enhance the status of the code snippets. While the text plainly provides information, the color provides an intuitive reinforcement for a sighted person that would not be available to someone who is not sighted. In this case, it’s irrelevant. In another case, it might not be. This is an example of how developers will need exercise judgement in making sure their pages are accessible to everyone. Point out that the second image element contains incorrect HTML (the closing quote on the image file name has been omitted). Point out that the third image code is accessible. SLIDE 15 SLIDE TITLE: What FREE tools are available? SLIDE CONTENT: * W3C Validator (http://validator.w3.org/) Below the URL is an indistinct screen shot of the web page. SLIDE 16 SLIDE TITLE: What FREE tools are available? SLIDE CONTENT: * Web Design Group HTML Validator http://www.htmlhelp.com/tools/validator/ Below the URL is an indistinct screen shot of the web page. SLIDE 17 SLIDE TITLE: What FREE tools are available? SLIDE CONTENT: * W3C CSS Validator (downloadable) http://jigsaw.w3.org/css-validator/ Below the URL is an indistinct screen shot of the web page. SLIDE 18 SLIDE TITLE: What FREE tools are available? SLIDE CONTENT: * Bobby (single page only) http://www.cast.org/bobby Below the URL is an indistinct screen shot of the web page. SLIDE 19 SLIDE TITLE: What FREE tools are available? SLIDE CONTENT: * Cynthia Says http://www.contentquality.com Below the URL is an indistinct screen shot of the web page. SLIDE 20 SLIDE TITLE: What FREE tools are available? SLIDE CONTENT: * W3C's Link Checker http://validator.w3.org/checklink Below the URL is an indistinct screen shot of the web page. SLIDE 21 SLIDE TITLE: QUIZ SLIDE CONTENT: None End of presentation.