accessibility without tears? examples from real courses elizabeth j. pyatt, ph.d....
Post on 23-Dec-2015
217 Views
Preview:
TRANSCRIPT
Accessibility Without Tears?Examples from Real Courses
Elizabeth J. Pyatt, Ph.D. (ejp10@psu.edu)
Information Technology Services (TLT)
Outline•Audience Needs Tech & standards change, but needs
are the same
•Common Issues Examples from Real Courses Workflow recommendations More exotic examples (Time
permitting)
Two Courses•Phil 12 – Symbolic Logic Video (with captions) Unusual symbols Proof Tables (exotic)
•ME 300 – Thermodynamics Images & animations Math Symbols
•Both – navigation, layout, structure
Audiences
•Severe Visual Impairment (Screenreader)
•Low Vision (Zoom 200% or more)
•Motion Impaired (esp hands)
•Hearing Impaired (need to read)
•Cognitive Impairments
•Neurological (Epilepsy, Migraines?)
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
Form fields should announce info needed
•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
Nitty Gritty: Alt Tags•ALT tag describes image if image
disabled 155 characters or less Use extended link if more
information is needed You don’t need to describe
decorative images If image is a link, describe
destination, not link Imagine you’re on the phone!
Insert an Alt Tag (PSU Logo)•HTML Alt tag <img src=“logo.gif” alt = “Penn
State” />
•Add Tool Tip (Title) <img src = “logo.gif” alt = “Penn
State”title=“Go to Penn State Home Page” />
•Alt tag tools available in ANGEL, Dreamweaver, Movable Type,…
ALT Tagger in ANGEL
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”
ALT Tag – Word/PowerPoint
•Correct Way (Windows Only) Right click on image to open
properties. Click “Alternative Text” tab to enter ALT tag.
•Not-so-Correct, but faculty friendly Add label or caption for each image Only option on the Mac
Extended Description (Graph)•Provide link to extended description page
Engineering diagram with “D” link to right. ALT tag says to click D for more info. Page can include data table.
On D Link Page: “x axis is specific volume; y axis is presssure….”
Workflow for many images
•Add ALT text in Word for Webmaster to insert
•For CMS (ANGEL/Drupal/Movable Type) Compose in Dreamweaver, then cut
and paste page into desired setting
•The key is to tag each image as it comes
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 Cognitive Audience
•Everyone appreciates usability
•Learners often have “simpler” mental models than experts Includes instructors learning new
tech!
Do Icons Always Help?
•Icons commonly recommended for cognitively disabled audience (e.g. arrows, checks/X, print…)
•BUT – Supplement ambiguous icons w/ labels
What are these icons?
Icons + labels
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!
PDF Files•Use as last resort, not easy fix Layout issues for motion impaired,
cognitive impaired, & screen readers
•Best to convert from text based file (e.g. Word, PPT) not graphic
•Headings should be “tagged” Word Styles for Heading 1/Heading 2
are tagged. Otherwise use advanced tools in Adobe Acrobat
•Scanned pages = images (unless OCR)
Data Tables
•Not forbidden but need to have headers identified
•Caption (title) also beneficial
•A sample data table (top row = header) Left col may also be header
HTML TH tag for Headers<table>
<caption>Constants by substance</caption><tr> <th scope=“col”>Molecule</th>
<th scope = “col”>Constant a</th>
</tr><tr> <th scope=“row”>Ammonia</th>
<td>4.223a</td>
</table>
Table Tags•Why TH? Screen readers speak data &
associated headers for each cell
•Caption: Adds title to table <table><caption>…</caption>
<tr>…</tr></table>
•FYI - Any tag can have CSS applied
•Avoid merging/splitting cells (multiple simple tables may be better)
Dreamweaver Table Insertion•Decide location of headers along with number of rows and columns when inserting table into Dreamweaver.•Can copy/paste HTML in other systems
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. Use
CSS to add formatting over images whenever possible
•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 Contrast Checkers•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”)
Example & Test Results
Pale blue #F3FF6FF / link text = #003B94
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)
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 or audio cuts out
Can’t find one of 5 volume controls
Poor audio quality (even for normal hearing)
Noisy room
Non-native speakers
50% students used captions in online class
Captions Reveal Information
Caption explains WHY proofs have these steps
Backup Text•Summary can let users read
crucial information without (re)-viewing 5 min video
Steps of logic proof summarized in text for quick reference.
Done as a table with CSS.
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
Caption Tool•Parity (Penn State) Auto looping speeds process Parity free (Mac only) and in CLC labs Easy to learn (time codes automatic) Exports transcript in external text file Multiple formats (Quicktime, Flash,
YouTube…)
•Other Tools MagPie (Free from WGBH NCAM) Others
Parity Tool
Post to Web
•Captions may be an external text file (Quicktime) or XML file (Flash) or other text file. Good if you need to fix a typo SMIL file (Quicktime) – places video
& captions together
•Place all files in same directory
Sample File Quicktime•Captions(Quicktime) {QTtext}{font:Arial}{justify:center}
{size:16}{timeScale:100}{width:320}{height:40}{backColor:0, 0, 0}…[00:00:52.15]
{font:Arial}{size:14}{Plain}{textColor:65535, 65535, 0}Now, there are two ways of crossing the road. <Walk in front of car> and this way
•Requires SMIL (XML) Creates player interface & loads
video/captions SMIL ≠ Flash (Flash may have .as file
instead)
Motion Impaired•Keyboard always easier than mouse Enable keyboard tabbing on forms, links Develop text-based alternative (esp. drop
down menus) Keyboard shortcuts (e.g. games, Flash
controls) BIG click targets & avoid disappearing
controls
•Hidden Audience Carpal tunnel, broken wrist, essential
tremor, New to mouse, iPhone, track pad…
Math – Single Lines
•If one line – then use plain text (w/Unicode for symbols) ∀x(1x ⊃ Ux) ∧ ~Mx (Phil 12)
δW =1W2 =∮ F∙ds (ME 300)
•Text clearer when zoomed, exports to XML and can be read by screen reader (with right .sbl file)
Multiline Equations
•Multiline = Fraction, roots
•Choices Image with ALT tag MathML (still 2 flavors for Firefox &
IE) Table layout tricks (tricky)
Equation Editors
•Easily format equation with templates
•MathType & MathMagic 2 options
•Export into multiple formats MathML (Firefox & IE), for future
reference Images (e..g. JPG, GIF)
•I export to PDF then convert to PNG/GIF LaTex (another common standard)
Math Magic Screen
Proof Tables (Phil 12)• HTML Table with CSS
• Top line = caption, but no TH
• Lines are cell tweaked cell borders
• Padding adds appropriate space
• Invisible graphic with ALT text announces line (or “sub proof”)
New Tech Checks•Check to see if it works on a screen
reader
•Check for keyboard alternates
•If video, check for caption capabilities
•Is interface low-vision & color blind friendly?
•Think of a Plan B! Even if it’s “old school”
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.
Final Tips•HTML is still the most accessible tech Use Flash for multimedia, but not
navigation/forms (or be careful if you do) 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)
Cautions•Don’t Panic!
•Make sure complex accessibility tag really supported by JAWS
•XHTML Standards ≠ accessibility They are complementary but not
identical
•75% = common sense
•Some human intervention may be needed for unusual cases
Help is Available•Penn State
http://accessibility.psu.edu/ (Penn State Hub)
Tutorial & Tips by Technology
•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)
More 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)
•The End…for now
More Failed Contrast•White and Teal (#088) AA at #088; AAA at #055 (see
image below)
•White and Gray (#999) AA at #888; AAA at #555 (see 3
images below)
top related