Accessibility Testing By Audience Need Elizabeth J. Pyatt, Ph.D. (ejp10@psu.edu) Christian...

Accessibility Testing By Audience Need

Elizabeth J. Pyatt, Ph.D. (ejp10@psu.edu)

Christian Vinten-Johansen(cjohansen@psu.edu)

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

describedNot 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 informationSee 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% ZoomWhich part of contentis 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 e-mail?

•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 (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)

Key Resources•Penn State

http://accessibility.psu.edu/ (Penn State Hub)

•iCITA (Illinois) http://fae.cita.uiuc.edu (FAE Evaluator)

http://firefox.cita.uiuc.edu (Firefox Plugin)

•WebAIM http://www.webaim.org (WebAIM)

http://wave.webaim.org (Visual Evaluator)

Key Resources•Accessible Web Publishing Wizard

http://www.virtual508.com/• Microsoft® Word to HTML

• Microsoft® Powerpoint to HTML

•Parity

Practical video captioning Contact Pat Besong (pzb4@psu.edu)

Key Resources•Accessible Web Publishing Wizard

http://www.virtual508.com/• Microsoft® Word to HTML

• Microsoft® Powerpoint to HTML

•Parity

Practical video captioning Contact Pat Besong (pzb4@psu.edu)

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