Title: Accessibility Update
1Accessibility Update
- Elizabeth J. Pyatt, Ph.D. (ejp10_at_psu.edu)
- Information Technology Services
2Outline
- Current Situation
- Training Opportunities
- Issues for multiple audiences
3What 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
4Goal 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
5Accessibility 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?
6Notable 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
7Training 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
8Key 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)
9Audience vs. Guidelines
- Different types of disabilitiesbut 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
- Theres no spec for Twitter, but we can guess
potential problems - Accessibility benefits everyone
- Everyone will be temporarily disabled
10Severe 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/menus/form fields need to
identify themselves properly - Hidden Audience
- Text-based mobile device, missing plugin, images
disabled, or broken image link
11Two Sites, Images Disabled
12ALT Tagger in ANGEL
Enter information Alternative Text field when
uploading images
13Testing 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/
14New 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
15Online Forms/Menus
- Forms must identify field to screen reader
- If HTML, then use LABEL tag to match field with
label - Menus must announce options
16Hearing 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
- Cant find one of 5 volume controls
- Poor audio quality (even for normal hearing)
17Captions Reveal Information
Caption shows how to spell Cole Campleses name.
18About 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
19Captioning 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/m
agpie/) - Others for Windows and Mac
20Movie Captioner Tool (PSU)
21Find 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
22Other 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
23Low 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
24At 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).
25A 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?
26Check Color Contrast
- Default interface should have good contrast.
ANGEL goodOther tools? - Tests
- http//juicystudio.com/services/luminositycontrast
ratio.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)
27Two 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)
28Motion 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
29Controls for Animation
Keyboard S Start/Slow, F Fast, space
pause. Lets view animation
30Speaking 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 Dont build 100 Flash navigation
site
31Beware 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 usersunless entire
site menu displayed - Solution
- Text-based alternate (e.g. Site Map, clickable
main menus)
32Cognitive 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)
- Dont hide information too quickly
- Let user start/stop animation audio
33Hidden 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
34Color 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 v
- Hidden Audience
- People with a black and white printer
ANGEL Quiz Scores X v
35Red/Blue for Warnings
- Use a shade of blue instead of green for
warnings. Blue tends to preserve itself the best.
36Testing 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
37Testing 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?