Website Accessiblilty


Published on

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.

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • Website Accessiblilty

    1. 1. Accessible Web Content (and design)<br />By<br />Beth Sallay<br />
    2. 2.
    3. 3. Web Design<br />The way that web content is delivered through the web.<br />Using Dreamweaver with some html tips.<br />Web Content<br />Text<br />Images <br />Sounds<br />Videos<br />Animations<br />
    4. 4. Web Design (tutorials and blogs)<br /><ul><li>Picasa, Flickr and formatting tools
    5. 5. Described and Captioned Media
    6. 6. Windows Movie Maker
    7. 7. Online videos
    8. 8. Flash and alternatives</li></ul>Test your site<br />Resources<br />
    9. 9. Consistency: Use CSS (cascading style sheets)<br />Dreamweaver<br />
    10. 10. Web Design Tutorials:<br />UEN on YouTube (Tim Stack)<br /> Dreamweaver and CSS Layout<br /> Fireworks<br />Noupe<br />
    11. 11. 2. Alt Image Text<br />Dreamweaver: <br />
    12. 12. Picasa and Flickr<br />Picasa<br />Flickr<br />Both allow for linking and embedding to your images with descriptions.<br />
    13. 13. Embed with Picasa:<br />Or link:<br /><br />
    14. 14. Embed with Flickr:<br />Or link:<br /><br />
    15. 15. Formatting tools*:<br />Smashing Magazine<br />Photography &<br />*try not to annoy your users with effects<br />
    16. 16. 3. Page Headings: keep them consistent<br /><h1> Title<br /><h2> Subtitle<br /><h3> Text<br />Wrong: <span style="font-size:2em"><b>My Page Title</b></span><br />Right: <h1>My Page Title</h1><br />
    17. 17. 4. Links<br />Awareness: <br />
    18. 18. Links<br /> Jump to:<br /><A HREF="#codeword">Jump to Content</A><br /><A NAME="codeword"><br />
    19. 19. Links<br />Make them keyboard accessible<br />Link focus<br />Context<br />Underlined<br />
    20. 20. 5. Color Contrast<br />Good:<br />Bad:<br />
    21. 21. 6. Use Captioned Video<br />Described and Captioned Media <br /><br />DCMP YouTube Channel:<br />
    22. 22. Fill out a short survey. <br />*They have no sense of humor. <br />
    23. 23. Finding Captioned Video<br />YouTube: “closed captions“<br />Google Video: “captioned”<br />General Search<br />
    24. 24. Finding Captioned Video<br />YouTube: “closed captions“<br />Google Video: “captioned”<br />General Search<br />Or you can just make your own…<br />
    25. 25.
    26. 26. Download video from a website:<br />Firefox Download Helper<br />Real Player<br />
    27. 27.
    28. 28.
    29. 29. Open downloads folder or <br />
    30. 30. Convert to an editable format:<br />Hamster Free Video Converter<br />
    31. 31.
    32. 32.
    33. 33.
    34. 34.
    35. 35. Open Windows Movie Maker: <br />
    36. 36.
    37. 37.
    38. 38.
    39. 39. Save Movie or Publish Movie<br />
    40. 40. Done:<br />
    41. 41. 7. Flash<br />WebAIM<br />The majority of Flash content cannot be made natively accessible to screen readers.<br />Assistive Technology Boogie<br />
    42. 42. Menu Items:can be made accessible<br />
    43. 43. Text Equivalents: Add descriptive text in the ‘Name’ field of the accessibility window.<br />Example<br />
    44. 44. Animations:not accessible<br />
    45. 45. General Flash Strategies:<br />Use Captions<br />No strobe content that flashes 2-55 times per second<br />Good Contrast<br />Allow scaling to a larger size<br />Audio that doesn’t interfere with screen readers<br />Text equivalents<br />
    46. 46. General Flash Strategies:<br />Content is keyboard accessible <br />Does not require fine motor skills<br />No time sensitive content<br />Easy to use controls and navigation<br />Feed the frog:<br />
    47. 47. Alternatives to Flash Video<br />NCBYS: National Center for Blind Youth in Science<br />RFB&D: Recording for the Blind and Dyslexic<br />- presenting Saturday at 10:30am <br />
    48. 48. Test Your Site<br />WebAIM<br />
    49. 49. Resources<br />Web Design: <br />UEN on YouTube<br />Noupe<br />Web Albums and Formatting: <br />Picasa<br />Flickr<br />Smashing Magazine<br />Visual Slide Show<br />Photography &<br />Captioning: <br />Described and Captioned Media<br />DCMP on YouTube<br />Captioning Web<br />Flash: and Alternatives:<br />WebAIM<br />National Center for Blind Youth in Science<br />Recording for the Blind and Dyslexic <br />Test Your Site:<br />WebAIM<br />Misc.: <br />Media Access Group<br />Audio Description Project<br />Web Accessibility Initiative<br />XKCD<br />
    50. 50. Questions?<br />Beth Sallay<br /><br />