is your site accessible?
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/1.jpg)
Is Your Site Accessible?
Web Site Testing for Accessibility
Presented by:The NYS Forum IT Accessibility CommitteeThe NYS Forum Webmasters GuildNortheast ADA & IT Center
Accessible Web Sites.lnk
![Page 2: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/2.jpg)
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
INTRODUCTION
Accessible Web Sites.lnk
![Page 3: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/3.jpg)
You will learn: What “standards” are Why they matter What validation is About the different types of validation How to validate your page
OBJECTIVES:
Accessible Web Sites.lnk
![Page 4: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/4.jpg)
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
OBJECTIVES:
Accessible Web Sites.lnk
![Page 5: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/5.jpg)
Accessibility Issues
Accessible Web Sites.lnk
![Page 6: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/6.jpg)
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
Accessible Web Sites.lnk
![Page 7: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/7.jpg)
Standards
Document type definitions (DTDs) Created & published by W3C
INPUT element definition in DTD
Accessible Web Sites.lnk
![Page 8: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/8.jpg)
Standards
Document type declarations (also DTDs) INPUT element in web page code
Accessible Web Sites.lnk
![Page 9: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/9.jpg)
Standards
Input element rendered in browser
Accessible Web Sites.lnk
![Page 10: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/10.jpg)
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
Accessible Web Sites.lnk
![Page 11: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/11.jpg)
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
Accessible Web Sites.lnk
![Page 12: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/12.jpg)
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
Accessible Web Sites.lnk
![Page 13: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/13.jpg)
Validation
If you use a page authoring program, it may do some validation for you, as this screen shot from Macromedia’s Dreamweaver shows:
Accessible Web Sites.lnk
![Page 14: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/14.jpg)
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
Accessible Web Sites.lnk
![Page 15: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/15.jpg)
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?
Accessible Web Sites.lnk
![Page 16: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/16.jpg)
Humans Needed
Text/background contrast sufficient?
Accessible Web Sites.lnk
![Page 17: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/17.jpg)
Humans Needed
Color used to convey information?
Accessible Web Sites.lnk
![Page 18: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/18.jpg)
Humans Needed
Accessible equivalents for inaccessible elements?
Language appropriate?
Accessible Web Sites.lnk
![Page 19: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/19.jpg)
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.
Accessible Web Sites.lnk
![Page 20: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/20.jpg)
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”
Accessible Web Sites.lnk
![Page 21: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/21.jpg)
Three truisms to keep in mind
1. You cannot assume that your visitor has anything more than a browser.
2. You have no control over how your visitor experiences your page
3. You don’t know how your visitor is coming to your site.
Accessible Web Sites.lnk
![Page 22: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/22.jpg)
Automated Validation
The best things in life are FREE!
Accessible Web Sites.lnk
![Page 23: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/23.jpg)
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
Accessible Web Sites.lnk
![Page 24: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/24.jpg)
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?
Accessible Web Sites.lnk
![Page 25: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/25.jpg)
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?
<IMG SRC=“fileandpath.name” ALT=“info about image”>
Accessible Web Sites.lnk
![Page 26: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/26.jpg)
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?
<IMG SRC=“fileandpath.name” ALT=“info about image”>
Accessible Web Sites.lnk
![Page 27: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/27.jpg)
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?
Accessible Web Sites.lnk
![Page 28: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/28.jpg)
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?
Accessible Web Sites.lnk
![Page 29: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/29.jpg)
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.
Accessible Web Sites.lnk
![Page 30: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/30.jpg)
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?
Accessible Web Sites.lnk
![Page 31: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/31.jpg)
Which images are accessible?
<IMG SRC=“paulbowleseyes.jpg” BORDER=“1”>
<IMG SRC=“quesmark.gif BORDER=“0”>
<IMG SRC=“magglass.gif” BORDER=“0” ALT=“Find a Store”>
NOT accessible!
NOT accessible!
ACCESSIBLE!
Accessible Web Sites.lnk
![Page 32: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/32.jpg)
What FREE tools are available? W3C Validator (http://validator.w3.org/)
Accessible Web Sites.lnk
![Page 33: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/33.jpg)
What FREE tools are available?
Web Design Group HTML Validator http://www.htmlhelp.com/tools/validator/
Accessible Web Sites.lnk
![Page 34: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/34.jpg)
What FREE tools are available? W3C CSS Validator http://jigsaw.w3.org/css-validator/
Accessible Web Sites.lnk
![Page 35: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/35.jpg)
What FREE tools are available? Bobby
http://www.cast.org/bobby
Accessible Web Sites.lnk
![Page 36: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/36.jpg)
What FREE tools are available? Cynthia Says
http://www.contentquality.com
Accessible Web Sites.lnk
![Page 37: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/37.jpg)
What FREE tools are available?
W3C’s Link Checker http://validator.w3.org/checklink
Accessible Web Sites.lnk
![Page 38: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/38.jpg)
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
Accessible Web Sites.lnk
![Page 39: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/39.jpg)
Summary: Steps in Testing Web Pages
Validate HTML Validate for WCAG Validate for 508 Validate CSS (optional) Check for broken links (optional)
Accessible Web Sites.lnk
![Page 40: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/40.jpg)
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
Accessible Web Sites.lnk
![Page 41: Is Your Site Accessible?](https://reader035.vdocuments.us/reader035/viewer/2022062221/56813a9d550346895da29961/html5/thumbnails/41.jpg)
DEMONSTRATIONS
How these free tools work
Accessible Web Sites.lnk