Examples of Accessible Course ContentElizabeth J. Pyatt, Ph.D. ([email protected]) Information Technology Services
Accessibility or Universal Design?Universal DesignDesigning for the largest audience possible regardless of disability or ability UMN Duluth Web Glossary
Universal Accessregardless of disability, location, device or speed of connection to the Internet [or audio]
Example NeedsVisually impairedOn a screen readerHearing ImpairedCaptions/transcripts neededLow VisionLegibility crucial, may zoon to 200%Motion Impaired (hands)Keyboard access critical
Case: Severe Visual ImpairmentRequires a screen reader to read Web content aloudMultimedia, images need to be described Not all descriptions need to be hiddenProgram elements need to identify themselvesHidden AudienceText-based mobile device, missing plugin, images disabled, or broken image link
What the ALT Tag doesMolecules in uneven heatText describes distribution of atoms. Lets 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.
ALT Tagger in ANGEL CMSEnter information Alternative Text field when uploading images
Alt Tag Blogs/DreamweaverBlogs: Name field =ALT tag. By default thefile name is the ALT tag(not always helpful).Dreamweaver Properties WindowIncludes ALT tag when image selectedDreamweaver Insert Image: Usuallyprompts for Alternative Text
Other ApplicationsMicrosoft Office (Windows)Right Click on image to add ALT TagFlickrFile name = ALT Tag (OK unless its Photo97)DrupalALT tag tool (code view) or enter manually
Screen Reader New Apps Gotcha Not all apps and plugins include information for screen readerOld iTunes: MP3 music files were accessbile, but navigation in iTunes was notSome users encounter difficulty creating a login! (esp Flash based interface)Web Forms Need to signal new information See WAI-ARIA for how to code. JavaScript CAN be accessible.
Case: Hearing ImpairedYou cannot hear contentCaptions, captions, captions (or transcript)Some users more fluent in sign languageHidden UsersForgot headphone in labAudio cuts outCant find one of 5 volume controls Poor audio quality (even for normal hearing)50% students used captions in online class
Captions Reveal InformationCaption shows how to spell Cole Campleses name.Lets view an example
About CaptionsAbout students in Phil 12 used caption option in videosExternal text files can be created forQuicktimeFlash VideoPodcast (tricky)YouTubeStreamed Video (must burn captions)
Captioning ToolsMovCaptioner (formerly Parity)http://www.synchrimedia.com/Free to Penn StateMac onlyContact Pat Besong ([email protected])Windows SolutionsMAGPie (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 firstOrder a transcript/script from a TV showBuy 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 ImpairedImpaired with respect to HANDSCommon because it includes:Carpal Tunnel, Parkinsons, Essential TremorBroken/sprained wristAnyone using a new input deviceKeyboard access is bestEasy to aim for a keyVoice Recognition useful
Controls for AnimationKeyboard: S = Start/Slow, F = Fast, space = pause. Lets view animation
Speaking of AnimationsAnimations should begin as stoppedAvoids distraction for some usersUsers should be able to stop and start at willAnimations should be described for visually impaired usersIf interactive form, then describe to screen readers
Case: Low VisionLegally Blind, but also older usersExtreme Zoom page 200% or moreNeedsGood value contrastClear fonts.Text zooms better than images Hidden AudienceOlder usersUsers on mobile devices (iPhone/Blackberry)
A Little Hard on the Eyes?Tiny Text (7/8 pt)Light gray field labelsCan you see the text?An entire page in a cursive font?
At 300% - Text Better than ImageWhich part of contentis an image?
Equation!
Check Color Contrasthttp://juicystudio.com/services/luminositycontrastratio.php ORhttp://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 SchemesMinor adjustments can change a borderline scheme to a good one and preserve designer intentAA Level OnlyPale blue #CDF link text = #058
AAA LevelPale blue #F3F6FF
link text = #049 (bold)
Other Common Layout ProblemsText 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 whiteLinks too pale or too dark or indistinct
Color Deficient usersPrimarily Red/Green (10% men)Design so information viewable in black and white (or grayscale)Underline your text linksSupplement color coding with shapeRed X and Green Hidden AudiencePeople with a black and white printerANGEL Quiz Scores X &
Different Colored WorldColor coded textColor deficient:Shades of brown and blueColor coded currency exchange.Green = up, red = downDeuteranopia view (Photoshop Proof)Up/down arrows still informative
Data TablesNot but headers should be TH tagNote CSS is used to format TH cells (top row)Left col could also be THCaption (title) also beneficialView the Code
Headings and StructureScreen readers can jump from header to header.H1 = page title, H2 = major headingsH3 = subheaders Screen readers can pause on a P tagProvides cognitive structure/usability Google scans headers (instant outline)Use CSS to format headers
Headings and StructureScreen readers can jump from header to header.H1 = page title, H2 = major headingsH3 = subheaders Screen readers can pause on a P tagProvides cognitive structure/usability Google scans headers (instant outline)Use CSS to format headers
Headers in BlogsAs tested on http://wave.webaim.orgBlog title = H1, entry title = H2Column headers = H3 (not seen)
Blog page as seen on WAVE. H tags are marked in blue.
Headers in CoursesH1 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 ToolsSite title = H1, Page Title = H2Movable Type (Default)Drupal (Default)Page Title = H1PloneDreamweaver!ANGEL = ???? (Structure is used)
Line Breaks in Web ToolsEach paragraph should be a P tagEnhances screen reader jumping/pausingReturn = PloneANGEL 7.3 HTML Editor (FCK)Return = Movable Type 4.1Word Press (older version)Drupal (unless FCK editor installed)
Headings in Word & PPTWord Heading 1/Heading 2 style serve the same function as H1/H2Converted to tagged headers in PDFCut and paste into Dreamweaver converts to H1/H2Use Styles pane to edit appearancePowerpoint Titles like headersConverted to H1 in HTML conversionSotitle every slide!
Joy of CSS StylesCSS Allows you to use correct HTML but control formatting ExamplesCustomize H1,H2Colored AreasSingle line spacing P instead of BRMargin controlFormat Special TagsFake Rollover Buttons (better than images)
When CSS Goes BadCSS in accessible ifFont sizes set too smallNot enough color contrastCSS moves things out of logical orderFloat: right can literally reverse display order from code order
Is there more?But of course!http://accessibility.psu.eduhttp://blogs.tlt.psu.edu/projects/accessibilitydemo/http://www.webaim.org
First challenge accessibility a specialty problem.http://blogs.tlt.psu.edu/projects/accessibilitydemo/examples/imagealttag.html
Pedestrian Crossing. http://www.nationalarchives.gov.uk/films/1945to1951/popup/transcript/trans_pc.htmhttp://blogs.tlt.psu.edu/projects/accessibilitydemo/examples/animationexample.html
