1. Accessibility Testing By Audience Need Elizabeth J. Pyatt, Ph.D. (ejp10@psu.edu) Christian Vinten-Johansen (cjohansen@psu.edu) Information Technology Services

2. Why Audience? Different types of disabilities  Visual Impairments, Hearing Impairments, Motion Impairments, Cognitive/Learning Disabilities But needs remain the same across tech  A video is a video no matter the extension and will need caption Everyone will be temporarily disabled

3. 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 need to identify themselves Hidden Audience  Text-based mobile device, missing plugin, images disabled, or broken image link

4. What the “ALT Tag” does Piston diagram images Text describes piston position

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

6. New Apps Gotcha Not all apps and plugins include information for screen reader  Old iTunes: MP3 music files were accessbile, 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.

7. Low Vision Users May zoom browser 200% or more  Good color contrast (light vs dark)  Fonts should be extra legible on Web  Text zooms better than images  Extra legible fonts Hidden Audience  iPhone users  Older users Will Kindle make a difference?

8. At 300% Zoom Which part of content is an image? Equation

9. 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?

10. 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 & √

11. Different Colored World Color coded text Color deficient: Shades of brown and blue Color coded currency exchange. Green = up, red = down Deuteranopia view (Photoshop Proof) Up/down arrows still informative

12. 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)  50% students used captions in online class

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

14. 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…

15. 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)  Provide “Global View” (all options at once)  Don’t hide information too quickly  Let user start/stop animation & audio

16. Hidden Audience Everyone appreciates usability Learners often have “simpler” mental models than experts  Includes instructors learning new tech! What are these icons? Icons + labels

17. General Tips Learn easy fixes for tool  Most fixes are easy fixes (e.g. fill in the ALT tag field in ANGEL image upload) Think alternate tech  Can an MP3 file be delivered by blog as well as iTunes?  Can a blog be delivered by e-mail? Captions  Write script or recruit “cheap transcription labor”

18. General Tips 2 HTML is still the most accessible tech  Use Flash for multimedia, but not navigation  Use PDF only for files which CAN’T be delivered any other way Asynhchronous (e-mail, discussion board) can be more accessible than synchronous (e.g. chat, Connect)  Text chat may be more accessible than audio (if student hearing impaired)  Or maybe use the phone (if on screen reader)

19. 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

20. Key Resources Accessible Web Publishing Wizard  http://www.virtual508.com/ http://www.virtual508.com/ Microsoft® Word to HTML Microsoft® Powerpoint to HTML Parity  Practical video captioning  Contact Pat Besong (pzb4@psu.edu)pzb4@psu.edu

21. Key Resources Accessible Web Publishing Wizard  http://www.virtual508.com/ http://www.virtual508.com/ Microsoft® Word to HTML Microsoft® Powerpoint to HTML Parity  Practical video captioning  Contact Pat Besong (pzb4@psu.edu)pzb4@psu.edu

22. Key Resources Web Publishing System (CMS)  Encoded accessibility rules  Roles Multiple authors: designer, faculty SME Gatekeeper  Workflow  Protected templates and styles

23. At the end of the day... Human judgement over automated tools Work roles and responsibilities:  Train faculty and instructional designers in accessibility - and -  “Gatekeeper”: accessibility / editorial specialist in the workflow