Accessibility Testing By Audience Need Elizabeth J. Pyatt, Ph.D. Christian Vinten-Johansen Information Technology Services
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
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
What the “ALT Tag” does Piston diagram images Text describes piston position
ALT Tagger in ANGEL Enter information “Alternative Text” field when uploading images
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.
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?
At 300% Zoom Which part of content is an image? Equation
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?
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 & √
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
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
Captions Reveal Information Caption shows how to spell Cole Camplese’s name.
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…
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
Hidden Audience Everyone appreciates usability Learners often have “simpler” mental models than experts Includes instructors learning new tech! What are these icons? Icons + labels
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 ? Captions Write script or recruit “cheap transcription labor”
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 ( , 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)
Key Resources Penn State (Penn State Hub) iCITA (Illinois) (FAE Evaluator) (Firefox Plugin) WebAIM (WebAIM) (Visual Evaluator)
Key Resources Accessible Web Publishing Wizard Microsoft® Word to HTML Microsoft® Powerpoint to HTML Parity Practical video captioning Contact Pat Besong
Key Resources Accessible Web Publishing Wizard Microsoft® Word to HTML Microsoft® Powerpoint to HTML Parity Practical video captioning Contact Pat Besong
Key Resources Web Publishing System (CMS) Encoded accessibility rules Roles Multiple authors: designer, faculty SME Gatekeeper Workflow Protected templates and styles
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