Sue Cullen
Program Manager, CSUN Universal Design Center
Accessibility Network Product Testing Coordinator for the
CSU ATNetwork
UDC Mission
• Assist the campus community in creating pathways
for individuals to learn, communicate, and share via
information technology.
•
Help the campus community design-in
interoperability, usability, and accessibility into
information technology so that individual learning
and processing styles, or differences in physical
characteristics are not barriers to accessing
information.
UDC Services:
• Consultation/Training of Instructional Materials compliance and usability
• Web application developers training to design-in web compliance and usability
evaluation
• Consultation regarding accessibility and usability policy
• Compliance and usability testing for purchased, promoted, or supported (PPS)
campus software. (based on campus impact)
• Maintaining a vetted, centralized repository of ATI training material
• Research, identify or create compliance standard application coding
techniques.
• Compliance testing of websites, software and electronic devices.
Keep the conversation going!
Shared Campus Responsibility
• ATI Executive Sponsorship
• Campus Governance
Committees
• Advisory Committee for
Academic Technology
• Small Collaborative Working
Groups
• Campus Wide Disabilities
Issues Board
• Accessibility Working Group
• ATI Steering Working Group
Presentations/Events
• Presentations to Campus
Governance Committees
• ATI Regional Conference
• Just One Thing Challenge
• Save Time & Money Campaign
• Universal Design INACTION
• Accessibility Camp LA
• CSU ATI Compliance Sheriff
Regional Trainings
• Training-Training-Training
Cultural Change for Web Design
Design
Standards
Web
Developers
Compliance
Standards
Usability
Standards
Integrate compliance standard skills into the
everyday work habits and expectation of
employees.
Finding your
way through the
maze of
compliance
standards
Compliant and Usable
Technology
• Fire Bug
• https://getfirebug.com/
• Wave
• http://wave.webaim.org/toolbar/
• Colour Contrast Analyser
• http://www.paciellogroup.com/resources/contrastAnalyser
• Juicy Studio
• http://juicystudio.com/index.php
• Grayscale
• https://chrome.google.com/webstore/detail/grayscaletool/odolflphhameojgliipcnahnipmogigo (Chrome)
• http://www.visionaustralia.org/digital-access-wat
• Web Developer Extension
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
• Compliance Sheriff
• http://www.csun.edu/accessibility/documents/HiSoftwareCompliance-Sheriff-Limited-Feature-Guide.docx
• Accessibility Evaluation Toolbar
https://addons.mozilla.org/en-US/firefox/addon/accessibilityevaluation-toolb/
Protocols for Compliance & Usability Testing
Level One
Level Two
Level Three
• Review VPAT information
for egregious barriers.
• Consider Campus or
System Wide Impact of
the product.
• If egregious issues found,
conduct manual testing to
validate claims or lack of
accuracy based on Impact
considerations.
• Share VPAT back to the
vendor with additional
UDC comments.
• Limited criteria validation
based on application type
• Examples:
• Web form applications
(form fields labels, input
mask, error handling)
• Basic web page (link &
semantic requirements,
tab order and images)
• Complex web navigation
pages (all previously listed
criteria plus keyboard
accessibility, tables, CSS,
navigation, scripting and
Assistive Technology
testing ).
• Concurrently: Run
Compliance Sheriff (C.S.)
level IV scan based on
appropriate check points.
Use as a guide for manual
checking.
• Recommendations and
resources provided.
• Criteria validation based
on CSU ATI Check Points
and full UDC Testing
Guide implementation.
• Comprehensive testing
(all previously listed
criteria plus usability
testing )
• Applications have coding
that requires additional
research and reiterative
testing of coding solutions
validation.
• Detailed
recommendations and
resources provided.
• Concurrently: Run C.S.
level IV scan with manual
testing.
• As needed provide actual
coding or work around for
end user.
UDC Evaluation Categories
Alternative
Descriptions
Multimedia
Structure
Images
Interactive Multimedia
Semantic Requirements
Image Map
Screen Movement
Frames
Scripting
Comprehensive Visual
Display
Tables
User Interface
Visual Redability
Navigation
Stylesheet
Keyboard Accessibility
Color
Timed Responce
Forms
Navigation
Link Requirements
5 Common Errors
Improper Form Field Labeling and Error Message
Handling
Lack of full Keyboard Navigation
Headers being chosen based on how they look
rather than their structural value.
Moving elements without a pause/play mechanism
Data tables without proper mark up
Alternative Text – Best Practices
 Poor example of Alt text:
Photo of a
Student
 Good example of Alt text:
Student
using a
microscope
How do you know if the image is missing alt text?
• Compliance Sheriff Testing
How do you know if the page fails color contrast?
• Compliance Sheriff
#navigation a:link {
color:#fff;
text-decoration:none;
margin:0px 10px 0 10px;
padding: 10px 6px 10px 6px;
font-size:105%;
font-weight:700;
}
#navigation a:hover {
color:#FC3;
text-decoration:none;
margin:0px 10px 0 10px;
padding: 10px 6px 10px 6px;
font-size:105%;
font-weight:700;
}
Text color: White
Background color: Red
Text color: yellow
Background color: Red
Link Requirement
Example of same link text to refer to different resources error caught
How do you know if the form is missing <label>?
• Wave Toolbar