accessibility update elizabeth j. pyatt, ph.d. (ejp10@psu.edu) information technology services

Accessibility Update

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

Information Technology Services

Outline

•Current Situation

•Training Opportunities

•Issues for multiple audiences

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

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”

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?

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

Training Opportunities

•Web Developer Lunch 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

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)

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

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

Two Sites, Images Disabled

ALT Tagger in ANGEL

Enter information “Alternative Text” field when uploading images

Testing ALT Tags•Disable Images Manually in browser preferences

Firefox Accessibility Extension (adds accessibility toolbar)

https://addons.mozilla.org/en-US/firefox/addon/5809

WAVE Testing Web Site (shows ALT tags)

http://wave.webaim.org/

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 informationSee WAI-ARIA for how to code. JavaScript CAN be accessible so can Flash…

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

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)

Captions Reveal Information

Caption shows how to spell Cole Camplese’s name.

About Captions

•About ½ students in Phil 12 used caption option in videos

•External text files can be created for Quicktime

Flash Video

Video & Audio Podcast on iTunes

YouTube

Streamed Video

iTunes

Captioning Tools•Movie Captioner (Mac Only)

http://www.synchrimedia.com/

Installed in the CLC Computing Labs

•Windows Solutions MAGPie (Free from

http://ncam.wgbh.org/webaccess/magpie/)

Others for Windows and Mac

Movie Captioner Tool (PSU)

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

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

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

At 300% ZoomWhich part of contentis an image?

Equation. This is an image because it was best optionavailable (and yes, it has an ALT tag).

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?

Check Color Contrast•Default interface should have

good contrast. ANGEL good…Other tools?

•Tests http://juicystudio.com/services/

luminositycontrastratio.php OR

http://webaim.org/resources/contrastchecker/

AAA: All Good (Full Speed Ahead)

AA: Large Text Only (18 pix/14 pix bold)

Fail: Avoid (There is no “A”)

Two Blue Color Schemes

•Minor adjustments can change a borderline scheme to a good one and preserve designer intent

AA Level OnlyPale blue #CDF link text = #058

AAA LevelPale blue #F3F6FF

link text = #049 (bold)

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

Controls for Animation

Keyboard: S = Start/Slow, F = Fast, space = pause. Let’s view animation

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

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)

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

Hidden Audience•Everyone appreciates usability

•Customers often have “simpler” mental models than developers Use “Whale” instead of “Cetacean”

Use “Impressionism” instead of “19th Century French”

Does everyone know what a “browser” is?

•Avoid Icon Trap

What are these icons?Icons + labels better

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

Red/Blue for Warnings•Use a shade of blue instead of

green for warnings. Blue tends to preserve itself the best.

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.vischeck.com/vischeck/vischeckURL.php

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?