Website Accessiblilty
-
Upload
beth-sallay -
Category
Education
-
view
346 -
download
0
description
Transcript of Website Accessiblilty
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