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)