Is Your Site Accessible?

1. Presented by: The NYS Forum IT Accessibility Committee The NYS Forum Webmasters Guild Northeast ADA & IT Center Is Your Site Accessible? Web Site Testing for Accessibility

2. INTRODUCTION NYS Technology Policy P04-002 requires that State agency web pages be validated for accessibility prior to posting Comprehensive testing helps eliminate barriers Assures your organization and your visitors of a quality web site

3. OBJECTIVES: You will learn: • What “standards” are • Why they matter • What validation is • About the different types of validation • How to validate your page

4. OBJECTIVES: You will learn: • Why validation alone is not enough • What features of your web page require human judgement • Where to find FREE resources to assist your evaluation • The benefits of having your site tested by a user of assistive technology

5. Accessibility Issues

6. What are “standards?” • Set by the World Wide Web Consortium (W3C) • De facto standard-setting body for the web • Made up of industry, academia and practitioners • Create rules for how web works – standards

7. Standards • Document type definitions (DTDs) • Created & published by W3C • INPUT element definition in DTD

8. Standards • Document type declarations (also DTDs) • INPUT element in web page code

9. Standards • Input element rendered in browser

10. Standards • Document type definitions contain allowable elements within any one version of the standard (loose, transitional, strict) • Used by: • Web servers • Browsers • Page creators • Validation programs

11. Why standards matter • Used by web server creators • Used by browser manufacturers • Used by web programmers • Relied on to ensure interoperability • Adherence to rules = predictable results • Standards evolve; adherence to standards smooths transitions to newer technology

12. What is “validation?” • Focused review of page code, measured against the published standard declared at top of page • Usually automated • Notes deficiencies in HTML, page structure, some accessibility features • Offers suggestions for remediation

13. Validation • If you use a page authoring program, it may do some validation for you, as this screen shot from Macromedia’s Dreamweaver shows:

14. Why is validation significant for accessibility? • Compliant code is usually accessible code. • Adherence to standards minimizes browser peculiarities • Eliminates one potential source of accessibility problems

15. Does validation catch all problems? NO! Some things require human judgement: • ALT attributes accurate? • All acronyms explained? • Navigation usable and consistent? • Does the page work in all browsers?

16. Humans Needed • Text/background contrast sufficient?

17. Humans Needed • Color used to convey information?

18. Humans Needed • Accessible equivalents for inaccessible elements? • Language appropriate?

19. Humans Needed • All visual elements have a meaningful ALT attribute or a LONGDESC attribute linking to additional information? • Do all non-text elements have meaningful alternatives? • Are links identified in a meaningful way? • WRONG: CLICK HERE for a copy of the report • RIGHT: You can download a copy of the report.

20. Humans Needed • Page using client-side SCRIPT (e.g., JavaScript) also includes NOSCRIPT option providing the same information or function of the script? Important to: • Web-enabled cell-phones and PDA users • Web TV (yes, it’s still out there!) users • “Malware-phobes”

21. Three truisms to keep in mind • You cannot assume that your visitor has anything more than a browser. • You have no control over how your visitor experiences your page • You don’t know how your visitor is coming to your site.

22. Automated Validation The best things in life are FREE!

23. What does a validator do? • Program that checks code against “rules” for code • “Rules” come from published standards • World Wide Web Consortium develops standards • Specified in Document Type Definition (DTD) at top of web page

24. Validation vs. Human Testing • Validation: 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?

25. <IMG SRC=“fileandpath.name” ALT=“info about image”> Validation vs. Human Testing • Validator Check • Does it include an ALT attribute? • HUMAN Check • ALT attribute value 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? • Is all of the page information still delivered if you can’t view images?

26. <IMG SRC=“fileandpath.name” ALT=“info about image”> Validation vs. Human Testing • Validator Check • Does it include an ALT attribute? • HUMAN Check • Does the image require < 150 characters to describe adequately? • Do you need a LONGDESC attribute & associated written description?

27. Validation vs. Human Testing • Validator Check • Is table coded correctly? • HUMAN Check • If table is used for layout, does information flow in the order it is intended to? • If a data table is included in page, does information flow in the order it is intended to?

28. Validation vs. Human Testing • Validator Check • Do data tables include properly-coded contextual information? • HUMAN Check • Adequate caption provided? Summary? • Is the SCOPE attribute used for row and column headings? • Is the HEADER attribute used with ID to provide context?

29. Validation vs. Human Testing • Validator Check • Style sheet coded correctly? • Scripts coded correctly? • HUMAN Check • Can the page be understood if the visitor cannot/does not use scripts or style sheets? • 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.

30. Why Validate? • Most accessibility errors will NOT be visible on the page • Validation catches HTML errors too Can you tell which images on this page are accessible and which are not?

31. Which images are accessible? <IMG SRC=“paulbowleseyes.jpg” BORDER=“1”> NOT accessible! <IMG SR C=“quesmark.gif BORDER=“0”> NOT accessible! <IMG SRC=“magglass.gif” BORDER=“0” ALT=“Find a Store”> ACCESSIBLE!

32. What FREE tools are available? • W3C Validator (http://validator.w3.org/)

33. What FREE tools are available? • Web Design Group HTML Validator http://www.htmlhelp.com/tools/validator/

34. What FREE tools are available? • W3C CSS Validator • http://jigsaw.w3.org/css-validator/

35. What FREE tools are available? • Bobby http://www.cast.org/bobby

36. What FREE tools are available? • Cynthia Says http://www.contentquality.com

37. What FREE tools are available? • W3C’s Link Checker http://validator.w3.org/checklink

38. Convenient tool for testing • Mozilla Firefox browser (http://www.mozilla.org) • Standards-compliant • Stable • FREE • Web Developer Toolbar (www.chrispederick.com/work/firefox/webdeveloper) Collects all the testing features you need

39. Summary: Steps in Testing Web Pages • Validate HTML • Validate for WCAG • Validate for 508 • Validate CSS (optional) • Check for broken links (optional)

40. Summary: Steps in Testing Web Pages • Check page for: • ALT attribute values/LONGDESC • Accessible alternatives for other non-text elements (e.g., client-side scripts, audio, etc.) • Links meaningful • Form elements labeled appropriately • Adequate context in data tables • Proper linearization in tables for layout • Consistent navigation • Appropriate language use/explained acronyms • Redundant text links for image maps

41. DEMONSTRATIONS How these free tools work