website accessiblilty
DESCRIPTION
A large number of instructors are taking advantage of online materials as a way to not only teach but to integrate technology into the classroom. Some students who need assistive technology face barriers to the same access as their non-disabled peers. I will be discussing finding accessible content and alternatives to what you already use. Demonstrations on: Described and Captioned Media (and similar) Picassa (how to find free formatting options for your website) Windows Movie Maker (subtitles - the old school way) Dreamweaver (alt image tags and simplifying your html) Finding captioned You Tube videos (GoogleVideo) Finding text based alternatives to Flash.TRANSCRIPT
Accessible Web Content (and design)
ByBeth Sallay
Background
Painful self disclosure:Geocities 1995
Non profit website admin:1999-2009
U of Utah IT Monkey:2000-forever
IDET Grad Student:Now
Web Content
• Text• Images • Sounds• Videos• Animations
Web Design
The way that web content is delivered through the web.
Using Dreamweaver with some html tips.
• Web Design (tutorials and blogs) Picasa, Flickr and formatting tools Described and Captioned Media Windows Movie Maker Online videos Flash and alternatives
• Test your site• Resources
1. Consistency: Use CSS (cascading style sheets)
Dreamweaver
Web Design Tutorials:UEN on YouTube (Tim Stack)
Dreamweaver and CSS LayoutFireworks
Noupe
2. Alt Image Text
Dreamweaver:
Picasa and Flickr
PicasaFlickr
Both allow for linking and embedding to your images with descriptions.
• Embed with Picasa:
Or link:https://picasaweb.google.com/lh/photo/11tCd_ZQxUTapzm9yBDMGA?feat=directlink
Embed with Flickr:
Or link:http://www.flickr.com/photos/22247045@N03/5354748901/
Formatting tools*: Smashing Magazine Photography &
*try not to annoy your users with effects
3. Page Headings: keep them consistent<h1> Title<h2> Subtitle<h3> Text
Wrong: <span style="font-size:2em"><b>My Page Title</b></span>
Right: <h1>My Page Title</h1>
4. Links
Awareness:
Links
Jump to:
<A HREF="#codeword">Jump to Content</A>
<A NAME="codeword">
Links
Make them keyboard accessibleLink focusContextUnderlined
5. Color Contrast
Good:
Bad:
6. Use Captioned Video
Described and Captioned Mediawww.dcmp.org
DCMP YouTube Channel: http://www.youtube.com/user/dcmpnad
Fill out a short survey.
*They have no sense of humor.
Finding Captioned Video
YouTube: “closed captions“
Google Video: “captioned”
General Search
Finding Captioned Video
YouTube: “closed captions“
Google Video: “captioned”
General Search
Or you can just make your own…
Download video from a website:
Firefox Download Helper
Real Player
Open downloads folder or
Convert to an editable format:
Hamster Free Video Converter
Open Windows Movie Maker:
Save Movie or Publish Movie
Done:
7. Flash
WebAIMThe majority of Flash content cannot be made natively accessible to screen readers.
Assistive Technology Boogie
Menu Items:can be made accessible
Text Equivalents: Add descriptive text in the ‘Name’ field of the accessibility window.
Example
Animations:not accessible
General Flash Strategies:
• Use Captions• No strobe content that flashes 2-55 times per second• Good Contrast• Allow scaling to a larger size• Audio that doesn’t interfere with screen readers• Text equivalents
General Flash Strategies:
• Content is keyboard accessible • Does not require fine motor skills• No time sensitive content• Easy to use controls and navigation
Feed the frog:
Alternatives to Flash Video
NCBYS: National Center for Blind Youth in Science
RFB&D: Recording for the Blind and Dyslexic- presenting Saturday at 10:30am
ResourcesWeb Design: UEN on YouTube Noupe
Web Albums and Formatting: PicasaFlickrSmashing Magazine Visual Slide Show Photography &
Captioning: Described and Captioned MediaDCMP on YouTubeCaptioning Web
Flash: and Alternatives:WebAIMNational Center for Blind Youth in ScienceRecording for the Blind and Dyslexic
Test Your Site:WebAIM
Misc.: Media Access GroupAudio Description ProjectWeb Accessibility InitiativeXKCD
