Sue Cullen Program Manager, CSUN Universal Design Center Accessibility Network Product Testing Coordinator for the CSU ATNetwork Alen Davoudian Web Developer / IT Consultant

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.

UD Principles Resource:

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.

Cultural Change for Web Design Web Developers Design Standards 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 Design/Evaluate/Repeat Compliant and Usable Technology

Fire Bug Wave Colour Contrast Analyser Juicy Studio Grayscale tool/odolflphhameojgliipcnahnipmogigo (Chrome) tool/odolflphhameojgliipcnahnipmogigo Web Developer Extension Compliance Sheriff Compliance-Sheriff-Limited-Feature-Guide.docx Compliance-Sheriff-Limited-Feature-Guide.docx Accessibility Evaluation Toolbar evaluation-toolb/

Protocols for Compliance & Usability Testing Level I Review VPAT information for confusing or unclear remarks and explanation resulting in significant 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. Level II 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. Level III Criteria validation based on CSU ATI Requirements 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 Section 508/WCAG 2.0 U.D. Principles Alternative Descriptions Images Image Map Scripting Multimedia Interactive Multimedia Screen Movement Structure Semantic Requirements Frames Tables Comprehensive Visual Display Visual Redability Stylesheet Color User Interface Navigation Keyboard Accessibility Timed Responce Forms Navigation Link Requirements

CSUN Universal Design Center Evaluation Clients VPAT Impact Validate Claims Level of Testing Test Cycle Decision Campus Clients CSUN websites CMS Development Environment Pioneering Tech Group Applications The Center for Visual Communication University Advancement Student Affairs Academic Web Team Division of Information Technology Other Clients CSU Chancellor’s Office CA Department of Rehabilitation CA Secretary of State Various Product Vendor Reviews

CSUN Universal Design Evaluation Clients - VPAT VPAT Impact Validate Claims Level of Testing Test Cycle Decision 1.Purchase Request E&IT Procurement Checklist CSU Guide to Completing the VPAT (Voluntary Product Evaluation Template) 2.Documentation regarding accessibility 3.Product User Guide/Manual 4.Confirm proper criteria reported

CSUN Universal Design Evaluation Clients - Impact VPAT Impact Validate Claims Level of Testing Test Cycle Decision 1.Impact (Customer, Campus, Users) 2.Product purpose and function 3.Area of use 4.Type of users 5.Deployment plan Two people today Enterprise tomorrow

CSUN Universal Design Evaluation Clients – Validate Claims VPAT Impact Validate Claims Level of Testing Test Cycle Decision 1.Review accessibility related criteria in VPAT 2.Analyze vendor’s remarks 3.Map vendor’s remarks to associated areas of functionality Based on information review of “Impact” 4.Validate claims and evaluate evidence 5.Clarify the extend of the support 6.Reject or confirm the claims 7.Conclude the level of testing to be conducted

CSUN Universal Design Evaluation Clients – Level of Testing VPAT Impact Validate Claims Level of Testing Test Cycle Decision Level I : Review VPAT information for confusing or unclear remarks and explanation resulting in significant barriers. Level II: Limited criteria validation based on application type Example: Web form applications (form fields labels, input mask, error handling) Level III: Criteria validation based on CSU ATI Requirements and full UDC Testing Guide implementation.

CSUN Universal Design Evaluation Clients – Test Cycle VPAT Impact Validate Claims Level of Testing Test Cycle Decision 5- Impact

CSUN Universal Design Evaluation Clients – Decision VPAT Impact Validate Claims Level of Testing Test Cycle Decision

Accordion Menu Solution Coding methodologies: ARIA Methods: to help user navigation and interaction jQuery Scripting: to control user interaction Example:

Important Negative Impact 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 Image element in an anchor with no ALT text and no link text Same link text leading to different resources

User Interface How do you know if the form is missing ? Wave Toolbar or Compliance Sheriff Web Content Accessibility Issues:

Proper Use of Header Proper Use Improper Use Improper Use: Proper Use:

Moving elements without a pause/play mechanism Example:

Data Tables without proper markup Example:

Image Element in an Anchor without Alt Text and without Link Text Example:

Same Link Text leading to different resources Example (Web Content Accessibility Issues):

Compliance Sheriff Report View Example (Web Content Accessibility Issues):

UDC Evaluation Reports UDC Resources: