1. BROUGHT TO YOU BY THE UCSB WEB STANDARDS GROUP Web Accessibility

2. WHAT IS WEB ACCESSIBILITY? WHY IS WEB ACCESSIBILITY IMPORTANT? MAKING WEBSITES ACCESSIBLE Q&A #1 SHORT BREAK SCREEN READER DEMONSTRATION Q&A #2 THE UC ELECTRONIC ACCESSIBILITY LEADERSHIP TEAM (EALT) Q&A #3 Outline:

3. MAKING MATERIAL ON THE WEB AVAILABLE TO THOSE WITH A VARIETY OF DISABILITIES INCLUDING BUT NOT LIMITED TO THOSE WITH VISION IMPAIRMENTS, DEFICITS IN HEARING AND OTHER MEDICAL AND HEALTH LIMITATIONS. ENSURING EQUAL ACCESS TO INFORMATION Enrollment, Housing, Employment ENSURING EQUAL ACCESS TO EDUCATION Registration, Financial Aid, Course Content What is “Web” Accessibility?

4. THE LAW: SECTIONS 504, 508, THE ADA AND OCR. UNIVERSAL DESIGN INDEXING Why is Web Accessibility Important?

5. Section 504 States that "no qualified individual with a disability in the United States shall be excluded from, denied the benefits of, or be subjected to discrimination under" any program or activity that either receives Federal financial assistance aka “equal access to education”

6. Section 508 In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 was enacted to eliminate barriers in information technology

7. Americans with Disabilities Act (ADA) The Americans with Disabilities Act (ADA) requires covered entities to furnish appropriate auxiliary aids and services where necessary to ensure effective communication with individuals with disabilities. The ADA has occasionally been used to support claims against providers of inaccessible web content, starting with a lawsuit against Target in 2008.

8. Office of Civil Rights (OCR): All students with disabilities, including those who are blind, should have full access to the information on a school's websites. Schools today rely on websites to register students, distribute course materials, collect homework, and administer quizzes. Students with disabilities cannot be denied the same opportunity to access these services on the web 24/7 from anywhere. Acting Assistant Secretary for Civil Rights Seth Galanter.

9. Universal Design Research shows that accessible websites have better search results, increased audience reach, helps decrease the “digital divide” and in general, the benefits extend to both those with disabilities and those without.

10. Indexing Every correctly labeled image allows your site to be crawled by search engine spiders more accurately, improving search rankings.

11. “Accessible” doesn’t have to mean “Plain

12. Disney Store UK with Images On

13. Disney Store UK with Images Off

14. Student Affairs KIOSK Site With Images On

15. Student Affairs KIOSK Site With Images Off and CSS Stripped Out

16. LOGAN FRANKLIN – CO-CHAIR, WEB STANDARDS GROUP Making Websites Accessible

17. MATT LOWE – GRADUATE, UCSB CLASS OF 2013 Screen Reader Demonstration

18. What is a Screen Reader? A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen. This interpretation is then represented to the user with text-to-speech, sound icons, or a Braille output. Screen readers are a form of assistive technology (AT) potentially useful to people who are blind, visually impaired, or learning disabled, often in combination with other AT such as screen magnifiers.

19. Benefits of Testing with Screen Readers When Evaluating Accessibility Why is screen reader testing important? Screen readers allows us to evaluate our content from the perspective of a blind person. Screen readers can also help you identify problems with reading order, table markup, form elements, and many other aspects of accessibility. Popular Screen Reader Software:  JAWS – Demo available for download, or test at DSP Facility  Window Eyes – Demo available for download; or, test at DSP How can I test my site? The UCSB Disabled Students Program can provide a limited screen reading overview of your site. Contact Mark.Grosch@sa.ucsb.edu for more information.

20. WEBSITE: HTTP://WWW.UCOP.EDU/ELECTRONIC- ACCESSIBILITY/INDEX.HTMLHTTP://WWW.UCOP.EDU/ELECTRONIC- ACCESSIBILITY/INDEX.HTML UC SYSTEMWIDE GROUP DEDICATED TO HELPING CAMPUSES WITH WEB ACCESSIBILITY ISSUES ON THEIR CAMPUSES PROVIDE LISTSERV, TRAINING VIDEOS, TOOLS, CAMPUS CONTACTS AND ACCESS TO SCANNING SOFTWARE UC Electronic Accessibility Leadership Team (EALT)

21. Scanning Initiative started in 2011 Goals:  Inventory accessibility against WCAG 2.0 A and AA standards  Include UC campuses, ANR, LBNL, UCOP  First scan results  developers  60 days to fix  Final scan results  CIOs  Repeat annually

22. UC Electronic Accessibility Leadership Team (EALT) Initial scans were of 7 main campus sites:  Main Campus Website (www)  Undergraduate Admissions  Graduate Admissions  Student Housing  Disabled Students Office  Staff Jobs Listing (Human Resources)  Healthcare or Student Health Services (if no medical center)

23. Initial Results CampusInitial ANR98.23 Berkeley93.72 LBNL93.20 Merced93.07 Davis91.59 Santa Barbara90.44 Riverside89.52 San Francisco89.15 Santa Cruz88.90 Los Angeles88.21 Irvine87.35 San Diego87.07 UCOP87.04

24. Final Results CampusInitialFinalChange ANR98.2398.640.41 Riverside89.5298.508.98 San Diego87.0795.818.74 Santa Barbara90.4494.774.33 LBNL93.2094.040.84 Merced93.0793.230.17 Davis91.5992.971.38 Berkeley93.7292.90-0.82 Los Angeles88.2192.694.47 Santa Cruz88.9092.303.41 Irvine87.3589.632.28 San Francisco89.1589.260.11 UCOP87.0485.62-1.42

25. Next Step – Acquiring the Tool One of the most FAQ – Can I have access to the Tool? Decision was made to fund systemwide for 2 years Expectation of continued scans conducted by campus reps Expanded list now includes: Library, Summer Session, Extension, Bookstore and Development

26. Continuing the Process Expectation of continued scans conducted by campus reps Expanded list now includes: Library, Summer Session, Extension, Bookstore and Development Scans typically started in Spring Quarter

27. AMP Testing Tool SSB BART Group's Accessibility Management Platform (AMP), to assist all UC personnel with accessibility testing and remediation. Accounts available using single sign-on. Website: http://tinyurl.com/UCSBSSOhttp://tinyurl.com/UCSBSSO Also available is a Firefox plugin for use on test and dev sites.

28. AMP Testing Tool

32. The Key to Evaluation – Human Interaction Testing Web accessibility requires more than just validation and accessibility tools; it requires human judgment! It is important to remember that accessibility tools can only partially check accessibility through automation. The real key is to learn and understand the Web accessibility standards rather than relying on a tool to determine if a page is accessible or not. Also tools change over time!

33. Quick and Easy Tests Turn off Images (Firefox Plugin)  Can you discern the content without the images displayed?  Can you navigate throughout your site without guessing at link destinations?  Is alt text present? Turn off Sound  Is content still understandable? Change font sizes using browser controls  Is page still readable at larger font sizes and does all content scale upward? Use only the keyboard for Navigation  Can you navigate your entire site  For more detailed information see: http://www.w3.org/WAI/eval/preliminary.html http://www.w3.org/WAI/eval/preliminary.html

34. Other Resources: The UCSB Web Standards Group has put together a very comprehensive set of documents for helping you achieve your accessibility goals: http://www.ucsb.edu/webguide The EALT also has some resources on accessible web design: http://www.ucop.edu/electronic-accessibility/web- developers/tools-and-testing/index.html

35. Other Tools to Test Accessible and Valid Code Tools can help you to identify the problem areas of your site. There are 3 tools the WSG recommends: The W3C Markup Validation Service for testing valid code http://validator.w3.org/ The WAVE Accessibility Tool for testing accessible code http://wave.webaim.org/ The Web Developer Extension for Firefox and Chrome, which can test for valid and accessible code http://chrispederick.com/work/web-developer/

36. Firefox/Chrome Web Developer http://addons.mozilla.org/ Test for Valid Code and Accessibility o There are many useful tools in Firefox Web Developer: o HTML and CSS validation o Display which images are missing alternate text o Disable images entirely o Disable Style Sheets o Linearize page o Disable JavaScript o View form info o Edit HTML/CSS

37. Final Q&A