Web Accessibility – What Not To Do.

1. Web Accessibility – What Not To Do. Presented by: Lori Bailey Web Accessibility Center www.wac.ohio-state.eduE-mail: webaccess@osu.edu

2. Accessibility Guidelines: Knowing v Understanding • Listen to this example from an OSU college web site. • Can you tell what guideline/s have been misinterpreted?

3. What Do Sighted Users See?

4. What Does Bobby Say? If the Section 508 issues listed below do not apply to your page, then it qualifies as Bobby Section 508 Approved and you are entitled to use the Bobby Section 508 Approved icon. To obtain the icon and learn how to place it in your page, visit the Icon Guidelines page on the Watchfire web site.

5. Validators – YES! • Bobby 5.0 (used by the WAC) • Full version does entire site • Free version online (single pages only) • WAVE 3.0 from WebAIM • Handy toolbar for on-the-fly checking • Returns pictorial results within the page • A-Prompt • Available from OIT site licensed software • Helps you correct pages • Must be installed locally

6. Myths: If the site validates, it must be accessible. Manual checks cover only low-priority issues. It doesn’t matter which validator you use. Facts: Different validators are good at checking different things. Most validators will find the most significant accessibility errors. Many high priority issues cannot be checked by a validator. Validators: The Myth and The Facts

7. Validators Aren’t Users Canadian Innovation Centre • Except for two missing ALT tags (which should be empty) this page passes Bobby. However: • Mystery meat navigation • Navigation does not work • Scripted menus not likely to work with assistive technology • Uses spacer images that override relative sizes • Text not scaleable

8. Issues Validators Can’t See. • Bad ALT tags (e.g. Engineering) • Text as images. • Script events and the Longdesc. • Invisible help and skip navigation. • Layout versus Data tables. • Flash – good v bad.

9. Situation #1:The Art of the ALT With images turned on. With images turned off.

10. ALT Dos and Don’ts YES: “View our help page.” NO: “Image of small bug holding folder with question mark above its head. Click to get information about this site or to find out more about what we offer.” • Don’t use ALT tags for spacer or purely decorative images. • Keep it short – not over 64 characters (use LONGDESC). • Avoid descriptions, focus on purpose. • Don’t use cryptic ALT tags (alt = “cwindexbtn-1go”) ALT=“” is empty ALT tag for decorative elements.

11. Situation #2: Text As Images Problem: Want to control how text is displayed. Bad Solution: Make images of specially formatted text. Good Solution: Use style sheets and accept some difference. Reason: Images do not zoom/enlarge well, cannot be cut and pasted, add extra verbiage, and require higher baud rates. Sample site: cota.com

12. Formatting with style sheets: Redefine existing HTML tags (e.g., <P>, <H1>, <H2>, <UL>, etc.). Create new styles for special characters (e.g., Excerpt boxes, announcement text, borders, additional spacing. Allows users to “turn-off” styles and view plain-text or customized version of your page. Deprecated code overrides user choices: <FONT> no longer used for font-size, font-weight, or font-style (name) <CENTER.>, <B>, <I> replaced with <P align=“center”>, <strong>, <em> <BLOCKQUOTE> has specific functions; don’t use for indenting (create an “indent” style). Use Style Sheets / Avoid Deprecated Code

13. Situation #3: Longdesc for Script Events Problem: Mouse-activated text on a page. Bad Solution: Ignore this text or add invisible descriptions. Good Solution: use the Long Desc attribute. Reason: Provide the same content for all users, but don’t be obtrusive to users of assistive technology. Sample site: va.gov

14. The Bad of Longdesc IMAGE DESCRIPTIONS FOR THE VETERANS BENEFITS & SERVICES HOME PAGE [Header: Selectable Image] The image shows a health care provider taking a person's blood pressure. The text next to it reads, "Health Benefits and Services" The image links to the Health page. That page contains information about eligibility for care, locations of health care facilities, forms, frequently asked questions, hot topics and press releases, general information about the Veterans Health Administration, and an e-mail contact. Return [Header: Selectable Image] The image shows a cemetery. The text next to it reads, "Burial and Memorial Benefits" The image links to the Burial and Memorial Benefits page. That page contains information on cemeteries, headstones and markers, presidential memorial certificates, and state cemetery grants program. Return See the GOOD example.

15. Situation #4:Invisible Help Problem: Want to direct helpful information to assistive technology users and not disrupt the design. Bad Solution: Create multiple “invisible” text entries that target screen reader users. Good Solution: Create a prominent accessibility link with instructions visible to all users. VA’s “Text Only” page addresses message to screen-reader users. Can only reach the page through invisible link.

16. Other Examples of Invisible Help • Long descriptions in table summaries • Use caption or link to descriptive page. • Invisible GIFs with “helpful” ALT tags • Screen readers cannot skip over this information • Often would be just as useful to non-screen reader users. • Multiple Skip Navigation entries • Assumes users rely on links to navigate page • Often unclear (“headlines,” “stories,” “events”) • Good for: frames, links pages, multi-column pages

17. Situation #5: Layout and Data Tables • Layout tables • Content randomly placed in any cell. • Do not include any special markup • May include very short summary, but not necessary • Data tables • Content in same column has shared relationship • Must include summary and header markup Is this a layout or a data table?

18. Use Table Headers • Using <TH> with the <scope> attribute will allow cells to be crossed referenced. Even better: headers and ID. See the HTML that correctly created this table: JAWS reading bad table (no signposts). JAWS reading good table.

19. Situation #6: To Flash or Not to Flash Where are the links? Can you guess?

20. Myths: Flash makes pages better. Flash is cool – everyone likes Flash. If it doesn’t have Flash, the site looks static and boring. Flash is never accessible. Facts: Flash done well adds depth and content. Most Flash adds little to a web page while making it less useful to a greater number of users. Accessible Flash is possible – but must be part of the initial design process, not an afterthought. Flash: The Myth and The Facts

21. Tips for Good Flash • No Flash for navigation. • Stop animations after x time or loops. (See: Campus Chemical Instrument Center) • Use empty ALT tags for decorative Flash. • Offer alternate formats for content rendered in Flash (including Flash videos). • Learn ways to develop accessible Flash: • Macromedia’s Accessibility Center • Upcoming WAC workshop on Flash

22. Conclusions • Use validators as a step in your process, not as the only measure of accessibility. • Learn the purpose as well as the technical how-to for standards. • Look at your site from the user’s point of view. • Consider accessible design beyond the screen reader. Do this and you can avoid . . .

23. Don’t break navigation with pop-ups or other techniques. TheDysfunctional Site How much of the page dedicated to information? Is navigation simple and intuitive? Is navigation simple and intuitive?

24. Resources • WAC web site: www.wac.ohio-state.edu • Includes tutorials from WAC, WebAIM, and Macromedia • Links to the best accessibility tools • Bobby online: bobby.watchfire.com • Free site validation using either 508 or WCAG • Tip: validate as you go; don’t wait until design is finished to check accessibility • WAC site reviews: webaccess@osu.edu • Send us your URL and tell us what level of compliance you are hoping for (basic, advanced, OSU minimum) • Currently offering a one- to two-week turnaround.

25. More WAC Workshops • Intelligent STEPs to Redesign and Retrofit. -- WAC Presentation • Date: Wednesday, May 12th.Time: 4:30 p.m. - 5:30 p.m.Location: Parks Hall , Room 111. • Cascading Style Sheets (CSS) - If You Use It, It Will Transform. -- WAC Hands-on Workshop. • Date: Wednesday, May 26th.Time: 2:30 p.m. - 3:30 p.m.Location: Ramseyer, Room 009.

26. The End

27. Table Code <table width="90%" border="2" id="datatable" summary="This table contains information on student programs. Each row lists the student name, academic level completed to date, and current program enrolled."><tr><th scope="col"><p>Student</p></th><th scope="col"><p>Academic Level</p></th><th scope="col"><p>Current Program</p></th></tr><tr class="smallertxt"><th scope="row"><p>Lori Badia</p></th><td><p>M.A. completed</p></td><td><p>Ph.D. English</p></td></tr><tr class="smallertxt"><th scope="row"><p>Susan Bailey</p></th><td><p>B.S. completed</p></td><td><p>M.B.A.</p></td></tr><tr class="smallertxt"><th scope="row"><p>Alicia Baker</p></th><td><p>B.A., in progress</p></td><td><p>Dept. of Education</p></td></tr></table> RETURN

28. Good LongDesc Health Benefits and Services page contains information about eligibility for care, locations of health care facilities, forms, frequently asked questions, hot topics and press releases, general information about the Veterans Health Administration, and an e-mail contact. Return ALT = “Health Benefits and Services”

29. TheEnd