Website Accessiblilty
•Download as PPTX, PDF•
0 likes•318 views
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.
Recommended
More Related Content
Viewers also liked
Viewers also liked (9)
Recently uploaded
Recently uploaded (20)
Website Accessiblilty
- 1. Accessible Web Content (and design) By Beth Sallay
- 3. Web Design The way that web content is delivered through the web. Using Dreamweaver with some html tips. Web Content Text Images Sounds Videos Animations
- 5. Described and Captioned Media
- 8. Flash and alternativesTest your site Resources
- 9. Consistency: Use CSS (cascading style sheets) Dreamweaver
- 10. Web Design Tutorials: UEN on YouTube (Tim Stack) Dreamweaver and CSS Layout Fireworks Noupe
- 11. 2. Alt Image Text Dreamweaver:
- 12. Picasa and Flickr Picasa Flickr Both allow for linking and embedding to your images with descriptions.
- 13. Embed with Picasa: Or link: https://picasaweb.google.com/lh/photo/11tCd_ZQxUTapzm9yBDMGA?feat=directlink
- 14. Embed with Flickr: Or link: http://www.flickr.com/photos/22247045@N03/5354748901/
- 15. Formatting tools*: Smashing Magazine Photography & *try not to annoy your users with effects
- 16. 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>
- 18. Links Jump to: <A HREF="#codeword">Jump to Content</A> <A NAME="codeword">
- 19. Links Make them keyboard accessible Link focus Context Underlined
- 20. 5. Color Contrast Good: Bad:
- 21. 6. Use Captioned Video Described and Captioned Media www.dcmp.org DCMP YouTube Channel: http://www.youtube.com/user/dcmpnad
- 22. Fill out a short survey. *They have no sense of humor.
- 23. Finding Captioned Video YouTube: “closed captions“ Google Video: “captioned” General Search
- 24. Finding Captioned Video YouTube: “closed captions“ Google Video: “captioned” General Search Or you can just make your own…
- 26. Download video from a website: Firefox Download Helper Real Player
- 29. Open downloads folder or
- 30. Convert to an editable format: Hamster Free Video Converter
- 35. Open Windows Movie Maker:
- 39. Save Movie or Publish Movie
- 40. Done:
- 41. 7. Flash WebAIM The majority of Flash content cannot be made natively accessible to screen readers. Assistive Technology Boogie
- 42. Menu Items:can be made accessible
- 43. Text Equivalents: Add descriptive text in the ‘Name’ field of the accessibility window. Example
- 45. 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
- 46. 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:
- 47. 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
- 48. Test Your Site WebAIM
- 49. Resources Web Design: UEN on YouTube Noupe Web Albums and Formatting: Picasa Flickr Smashing Magazine Visual Slide Show Photography & Captioning: Described and Captioned Media DCMP on YouTube Captioning Web Flash: and Alternatives: WebAIM National Center for Blind Youth in Science Recording for the Blind and Dyslexic Test Your Site: WebAIM Misc.: Media Access Group Audio Description Project Web Accessibility Initiative XKCD
- 50. Questions? Beth Sallay bs11@utah.edu
Editor's Notes
- Web design 1995- now painful self disclosureRds website updater
- Rearranged for better flow
- Design perspective: you want your layout to be consistent
- When making your own webpage, it’s begging you to add alt text to imagesWhy? If you can tag all of your facebook pictures you can handle this or you can use flickr and picasa
- These sites have either code or downloadable programs to create online photoalbums for flickr and Picasa.
- Information as to the type of link, click on a link ‘download/save’ file.
- Click here to visit the bottom of this page
- when a keyboard user visits a web page he or she will use their keyboard’s tab key to access the page, hopping from link to link. When doing this, the browser they’re using will typically apply something that marks their current location on the page.
- Do searches for both
- This was done with windows movie maker
- Hey since you’re watching this youtube video do you want to just download it?
- realplayer
- Firefox download helper
- Then open hamster free converter
- DemoWmm only does wmv files
- Drag and drop
- Edit: choose flv (or whatever you want)
- Press to convertDefault folder is my videos
- Drag and drop the videoSwitched to a shorter video
- Click on the captions icon
- Always save a high quality version first before sending it to youtube or facebook
- Make the Flash content natively accessible to the screen reader.Make the Flash content self-voicing, eliminating the need for the screen reader.Provide an accessible alternative to the Flash content.Something like a form would be considered ‘natively accessible’
- presenting tomorrow at 10:30am.