1. Accessibility Update Elizabeth J. Pyatt, Ph.D. (ejp10@psu.edu) Information Technology Services

2. Outline Current Situation Training Opportunities Issues for multiple audiences

3. What is accessibility? Ensuring access to online materials for disabled  Visual impairments  Hearing impairments  Mobility impairments (hands)  Cognitive impairments (largest population) Audience  students/staff/instructors/visitors

4. Goal: Universal Design “Universal Design”  Designing for the largest audience possible regardless of disability or ability – UMN Duluth Web Glossary “Universal Access” “…regardless of disability, location, device or speed of connection to the Internet”

5. Accessibility at Penn State National Federation of the Blind Problems identified with  ANGEL, eLion, Elecrtonic Reserves, Clickers Captions Required (AD 25)  Marketing Videos (mandated Feb 1) Official Websites Accessible (AD 54)  Course Materials?

6. Notable Guidelines WCAG  W3C Consortium  Version 1.0 and 2.0 2.0 most recent and includes Web 2.0 sites  3 Levels (level 1 = minimal) Section 508  U.S. Government – under revision to more closely match WCAG ARIA – For Web 2.0

7. Training Opportunities Web Developer Lunch  http://breeze.psu.edu/webdeveloperlunch http://breeze.psu.edu/webdeveloperlunch  Tue April 19 – Dreamweaver, TABLES, FORMS in Web  Tue May 17 – Accessible Javascript Lynda.com Accessibility Course  Login via ITS Training http://accessibility.psu.edu

8. Key Resources Penn State  http://accessibility.psu.edu/ (Penn State Hub) http://accessibility.psu.edu/ iCITA (Illinois)  http://fae.cita.uiuc.edu (FAE Evaluator) http://fae.cita.uiuc.edu  http://firefox.cita.uiuc.edu (Firefox Plugin) http://firefox.cita.uiuc.edu WebAIM  http://www.webaim.org (WebAIM) http://www.webaim.org  http://wave.webaim.org (Visual Evaluator) http://wave.webaim.org

9. Audience vs. “Guidelines” Different types of disabilities…but needs remain the same across tech  A video is a video no matter the technology and will need captions Accessibility needs to evolve with new tech  There’s no “spec” for Twitter, but we can guess potential problems Accessibility benefits everyone  Everyone will be temporarily disabled

10. Severe Visual Impairment Requires a screen reader to read Web content aloud  Multimedia, images need to be described Not all descriptions need to be hidden  Program elements/menus/form fields need to identify themselves properly Hidden Audience  Text-based mobile device, missing plugin, images disabled, or broken image link

11. Two Sites, Images Disabled

12. ALT Tagger in ANGEL Enter information “Alternative Text” field when uploading images

13. Testing ALT Tags Disable Images  Manually in browser preferences  Firefox Accessibility Extension (adds accessibility toolbar) https://addons.mozilla.org/en- US/firefox/addon/5809 https://addons.mozilla.org/en- US/firefox/addon/5809  WAVE Testing Web Site (shows ALT tags) http://wave.webaim.org/ http://wave.webaim.org/

14. New Apps Screen Reader Gotcha Not all apps and plugins include information for screen reader  Old iTunes: MP3 music files were accessible, but navigation in iTunes was not  Some users encounter difficulty creating a login! (esp Flash based interface)  Web Forms – Need to signal new information See WAI-ARIA for how to code. JavaScript CAN be accessible so can Flash…

15. Online Forms/Menus Forms must identify field to screen reader  If HTML, then use LABEL tag to match field with label Menus must announce options

16. Hearing Impaired You cannot hear content  Captions, captions, captions (or transcript)  Some users more fluent in sign language Hidden Users  Forgot headphone in lab  Audio cuts out  Can’t find one of 5 volume controls  Poor audio quality (even for normal hearing)

17. Captions Reveal Information Caption shows how to spell Cole Camplese’s name.

18. About Captions About ½ students in Phil 12 used caption option in videos caption option in videos External text files can be created for  Quicktime  Flash Video  Video & Audio Podcast on iTunes  YouTube  Streamed Video  iTunes

19. Captioning Tools Movie Captioner (Mac Only)  http://www.synchrimedia.com/ http://www.synchrimedia.com/  Installed in the CLC Computing Labs Windows Solutions  MAGPie (Free from http://ncam.wgbh.org/webaccess/magpie/) http://ncam.wgbh.org/webaccess/magpie/  Others for Windows and Mac

20. Movie Captioner Tool (PSU)

21. Find Me Some Captions! The hardest part is the transcript. Can you:  Write a script first  Order a transcript/script from a TV show  Buy the DVD (which often has English subtitles)  Pay for a transcriber? NOT a high end skill  Speech recognition an option, but proof text.  Live captioning does require a specialist

22. Other Tools Speech Recognition (Imperfect)  Requires training for each speaker (5 min)  Relies on audio quality  Good for frequent podcasters/lecture capture  Captions should be checked manually Commercial Providers  $75-$150 per hour of video  Many based on speech recognition instead of typists

23. Low Vision Users May zoom browser 200% or more  Good color contrast (light vs dark)  Fonts should be extra legible on Web – usually serif  Avoid 6-8 point text. 12 pt should be minimum for main content. 9/10 OK for small text.  Text zooms better than images – Use CSS instead of images for decorative text Hidden Audience  iPhone users  Older users

24. At 300% Zoom Which part of content is an image? Equation. This is an image because it was best option available (and yes, it has an ALT tag).

25. A Little Hard on the Eyes Tiny Text (7/8 pt) Light gray field labels Can you see the text? An entire page in a cursive font?

26. Check Color Contrast Default interface should have good contrast. ANGEL good…Other tools? Tests  http://juicystudio.com/services/luminosityco ntrastratio.php OR http://juicystudio.com/services/luminosityco ntrastratio.php  http://webaim.org/resources/contrastchecke r/ http://webaim.org/resources/contrastchecke r/  AAA: All Good (Full Speed Ahead)  AA: Large Text Only (18 pix/14 pix bold)  Fail: Avoid (There is no “A”)

27. Two Blue Color Schemes Minor adjustments can change a borderline scheme to a good one and preserve designer intent AA Level Only Pale blue #CDF link text = #058 AAA Level Pale blue #F3F6FF link text = #049 (bold)

28. Motion Impaired Keyboard always easier than mouse  Enable keyboard tabbing on forms  Develop text-based alternative (esp. drop down menus)  Keyboard shortcuts  BIG click targets & avoid disappearing controls Hidden Audience  Carpal tunnel, broken wrist, essential tremor,  New to mouse, iPhone, track pad…  Screen reader users prefer keyboard as well

29. Controls for Animation Keyboard: S = Start/Slow, F = Fast, space = pause. Let’s view animationLet’s view animation

30. Speaking of Flash Have you  Stopped animations/music by default and given play controls  Checked color contrast? Used legible fonts?  Checked usability?  Made form labels/icons announce themselves? Including the play/pause buttons?  Described animation/images for screen readers?  Allowed for captioned videos?  Recommendation: Don’t build 100% Flash navigation site

31. Beware Drop Down Menus Problems  Hard for motion impaired users, especially if they disappear  Hard for screen reader users unless properly coded (usually via CSS)  Hard for cognitively impaired users…unless entire site menu displayed Solution  Text-based alternate (e.g. Site Map, clickable main menus)

32. Cognitive Disabilities Interface should be simple and consistent  Use same language throughout site/tool  Use language audience will understand  Restrict icons to the basics (e.g. arrow icon) or label all icons  Provide “Global View” (all options at once)  Don’t hide information too quickly  Let user start/stop animation & audio

33. Hidden Audience Everyone appreciates usability Customers often have “simpler” mental models than developers  Use “Whale” instead of “Cetacean”  Use “Impressionism” instead of “19 th Century French”  Does everyone know what a “browser” is? Avoid Icon Trap What are these icons? Icons + labels better

34. Color Deficient users Primarily Red/Green (10% men)  Design so information viewable in black and white (or grayscale)  Underline your text links  Supplement color coding with shape Red X and Green √ Hidden Audience  People with a black and white printer ANGEL Quiz Scores X & √

35. Red/Blue for Warnings Use a shade of blue instead of green for warnings. Blue tends to preserve itself the best.

36. Testing Color Deficiency Photoshop CS4  Protonopia & Deuteronopia filters  Under View » Proof Setup menu View page in grayscale (change monitor settings) Online Color Blindness Testers  http://www.iamcal.com/toys/colors/ http://www.iamcal.com/toys/colors/  http://www.vischeck.com/vischeck/vischeckU RL.php http://www.vischeck.com/vischeck/vischeckU RL.php

37. Testing New Tech Can the screen reader access information? Uploads  Are captions supported for audio/video uploads?  Are ALT tags supported for image uploads? Default format  Legible text? Good color contrast?  Proper Headers?  WYSIWYG editor generating accessible HTML?