Examples of Accessible Course Content

Elizabeth J. Pyatt, Ph.D. (ejp10@psu.edu)

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 (pzb4@psu.edu)

•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