Transcript AccessibilityIDs2011

Accessibility Update
Elizabeth J. Pyatt, Ph.D.
([email protected])
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
 Awillvideo
is a video no matter the technology and
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/enUS/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 information
See WAI-ARIA for how to code.
JavaScript CAN be accessible so can Flash…
Online Forms/Menus
• Forms must identify field to screen reader
 Iflabel
HTML, then use LABEL tag to match field with
• 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% 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).
A Little Hard on the Eyes
Light gray field labels
Tiny Text (7/8 pt)
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/luminosityco
ntrastratio.php OR
 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”)
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)
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 “19 Century
French”
 Does everyone know what a “browser” is?
th
• 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
ANGEL Quiz Scores X & √
 People with a black and white printer
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/vischeckU
RL.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?