1 / 41

Is Your Site Accessible?

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. INTRODUCTION.

Télécharger la présentation

Is Your Site Accessible?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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

More Related