Examples of Accessible Course Content
Elizabeth J. Pyatt, Ph.D. ([email protected])
Information Technology Services
Accessibility or 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 [or audio]”
Example Needs•Visually impaired On a screen reader
•Hearing Impaired Captions/transcripts needed
•Low Vision Legibility crucial, may zoon to 200%
•Motion Impaired (hands) Keyboard access critical
Case: 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” doesMolecules in uneven heat
Text describes distribution of atoms. Let’s view the example
Title: Non-uniform density in system of non-uniform temperature. Image shows hot fluid at bottom with fewer atoms and cooler fluid at top with more atoms.
Title: Non-uniform density in system of non-uniform temperature. Image shows hot fluid at bottom with fewer atoms and cooler fluid at top with more atoms.
ALT Tagger in ANGEL CMS
Enter information “Alternative Text” field when uploading images
Alt Tag Blogs/Dreamweaver
Blogs: Name field =ALT tag. By default thefile name is the ALT tag(not always helpful). Dreamweaver Properties Window
Includes ALT tag when image selected
Dreamweaver Insert Image: Usuallyprompts for “Alternative Text”
Other Applications•Microsoft Office (Windows) Right Click on image to add ALT Tag
•Flickr File name = ALT Tag (OK unless its
“Photo97”)
•Drupal ALT tag tool (code view) or enter
manually
Screen Reader 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.
Case: 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.Let’s view an example
About Captions
•About ½ students in Phil 12 used caption option in videos
•External text files can be created for Quicktime Flash Video Podcast (tricky) YouTube Streamed Video (must “burn” captions)
Captioning Tools•MovCaptioner (formerly Parity)
http://www.synchrimedia.com/
Free to Penn State
Mac only
Contact Pat Besong ([email protected])
•Windows Solutions MAGPie (Free from
http://ncam.wgbh.org/webaccess/magpie/)
Others for Windows and Mac
MovCaptioner 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 a student or TA to transcribe? NOT
a high end skill Speech recognition an option, but proof
text. Live captioning requires a specialist
Case: Motion Impaired•Impaired with respect to HANDS
•Common because it includes: Carpal Tunnel, Parkinsons, Essential
Tremor Broken/sprained wrist Anyone using a new input device
•Keyboard access is best Easy to aim for a key
•Voice Recognition useful
Controls for Animation
Keyboard: S = Start/Slow, F = Fast, space = pause. Let’s view animation
Speaking of Animations…•Animations should begin as
“stopped” Avoids distraction for some users
•Users should be able to stop and start at will
•Animations should be described for visually impaired users
•If interactive form, then describe to screen readers
Case: Low Vision•“Legally Blind”, but also older users Extreme – Zoom page 200% or more
•Needs Good value contrast Clear fonts. Text zooms better than images
•Hidden Audience Older users Users on mobile devices
(iPhone/Blackberry)
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?
At 300% - Text Better than Image
Which part of contentis an image?
Equation!
Check Color Contrast•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)
Other Common Layout Problems
•Text set at 10 point (12 or more better)
•Sidebar/footer text at 8 point (9 point minimum)
•Gray text on white #66666 OK, but not #99999 on
white Links too pale or too dark or
indistinct
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
Data Tables
•Not but headers should be TH tag Note CSS is used to format TH cells
(top row) Left col could also be TH
•Caption (title) also beneficial
View the Code
Headings and Structure•Screen readers can jump from
header to header. H1 = page title, H2 = major headings H3 = subheaders Screen readers can pause on a P tag
•Provides cognitive structure/usability
•Google scans headers (instant outline)
•Use CSS to format headers
Headings and Structure•Screen readers can jump from
header to header. H1 = page title, H2 = major headings H3 = subheaders Screen readers can pause on a P tag
•Provides cognitive structure/usability
•Google scans headers (instant outline)
•Use CSS to format headers
Headers in Blogs•As tested on
http://wave.webaim.org
•Blog title = H1, entry title = H2
•Column headers = H3 (not seen)Blog page as seen on WAVE. H tags are marked in blue.
Headers in Courses H1 should (ideally) be title of each
page, not the site. Otherwise each page has same title
Math course with page title as H1.
Headers in Web Tools•Site title = H1, Page Title = H2 Movable Type (Default) Drupal (Default)
•Page Title = H1 Plone Dreamweaver!
•ANGEL = ???? (Structure is used)
Line Breaks in Web Tools•Each paragraph should be a P tag Enhances screen reader
jumping/pausing
•Return = <p></p> Plone ANGEL 7.3 HTML Editor (FCK)
•Return = <br /> Movable Type 4.1 Word Press (older version) Drupal (unless FCK editor installed)
Headings in Word & PPT
•Word Heading 1/Heading 2 style serve the same function as H1/H2 Converted to tagged headers in PDF Cut and paste into Dreamweaver
converts to H1/H2… Use Styles pane to edit appearance
•Powerpoint Titles like headers Converted to H1 in HTML conversion So…title every slide!
Joy of CSS Styles
•CSS Allows you to use “correct” HTML but control formatting
•Examples Customize H1,H2 Colored Areas Single line spacing P instead of BR Margin control Format “Special Tags” Fake Rollover Buttons (better than
images)
When CSS Goes Bad
•CSS in accessible if Font sizes set too small Not enough color contrast CSS moves things out of logical
order
•Float: right can literally reverse display order from code order
Is there more?
•But of course! http://accessibility.psu.edu http://blogs.tlt.psu.edu/projects/
accessibilitydemo/ http://www.webaim.org
Recommended
