Transcript 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
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
OBJECTIVES:
You will learn:
 What “standards” are
 Why they matter
 What validation is
 About the different types of validation
 How to validate your page
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
Accessibility Issues
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
Standards


Document type definitions (DTDs)
Created & published by W3C

INPUT element definition in DTD
Standards

Document type declarations (also DTDs)

INPUT element in web page code
Standards

Input element rendered in browser
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
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
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
Validation

If you use a page authoring program, it
may do some validation for you, as this
screen shot from Macromedia’s
Dreamweaver shows:
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
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?
Humans Needed

Text/background contrast sufficient?
Humans Needed

Color used to convey information?
Humans Needed


Accessible equivalents for inaccessible
elements?
Language appropriate?
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.
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”
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.
Automated Validation
The best things in life are FREE!
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
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?

Validation vs. Human Testing
<IMG SRC=“fileandpath.name” ALT=“info about image”>

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?
Validation vs. Human Testing
<IMG SRC=“fileandpath.name” ALT=“info about image”>

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?
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?
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?
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.
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?
Which images are accessible?
<IMG SRC=“paulbowleseyes.jpg”
BORDER=“1”>
NOT accessible!
<IMG SRC=“quesmark.gif BORDER=“0”>
NOT accessible!
<IMG SRC=“magglass.gif”
BORDER=“0” ALT=“Find a Store”>
ACCESSIBLE!
What FREE tools are available?

W3C Validator (http://validator.w3.org/)
What FREE tools are available?

Web Design Group HTML Validator
http://www.htmlhelp.com/tools/validator/
What FREE tools are available?


W3C CSS Validator
http://jigsaw.w3.org/css-validator/
What FREE tools are available?

Bobby
http://www.cast.org/bobby
What FREE tools are available?

Cynthia Says
http://www.contentquality.com
What FREE tools are available?

W3C’s Link Checker
http://validator.w3.org/checklink
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
Summary: Steps in Testing Web Pages





Validate HTML
Validate for WCAG
Validate for 508
Validate CSS (optional)
Check for broken links (optional)
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
DEMONSTRATIONS
How these free tools work