1 / 30

Cuyamaca College

Introduction to Accessibility Part 2. Cuyamaca College. How To Make Your Online Material Accessible. Don’t Worry…. How. Checklist - divide into 3 semesters Revise your materials as you review them for class

kylee
Download Presentation

Cuyamaca College

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Accessibility Part 2 Cuyamaca College

  2. How To Make Your Online Material Accessible

  3. Don’t Worry…

  4. How • Checklist - divide into 3 semesters • Revise your materials as you review them for class • Attend staffed labs during staff development week (guided demonstrations and time) • Evaluations of online courses will include accessibility check

  5. Support • Training each semester • Staffed labs during staff development week • ED 216 class (in development) • Help Desk (660-4395) • DSPS: http://www.cuyamaca.edu/dsps/

  6. Cuyamaca Online Blog http://cuyamaca-online.blogspot.com/

  7. Priorities this semester • Color • Color contrast • Hyperlinks • Images • Usable Design

  8. Color Other elements besides color are used to convey information Required fields are marked in red and an asterisk

  9. Vischeck http://www.vischeck.com/vischeck/vischeckImage.php

  10. Color Contrast • Avoid using text and background colors that do not provide sufficient contrast.  • Check the page to ensure hyperlinks and background colors have sufficient contrast.

  11. What can you easily read? • What can you easilyread?

  12. Color Contrast Examples OK Not OK OK Not OK OK Not OK

  13. Accessibility Color Wheel • http://gmazzocato.altervista.org/colorwheel/wheel.php

  14. Hyperlinks/Hypertext • When creating hyperlinks, be descriptive as to the function or location the hyperlink will take the student.  • Hyperlink text of "Click Here" does not provide information as to "where" the hyperlink will take the student.

  15. Link Examples • Student/Faculty mentor program is available for qualifying students. Click here for more information. • Student/Faculty mentor program is available for qualifying students. • Click here to submit a survey and a chance to win a $200 gift certificate. • Enter Survey for a chance to win a $200 gift certificate.

  16. Hyperlinks – Title Attribute • Title attribute only when it adds value • WebAdvisor • Title attribute = “Register for classes, view schedule” • http://www.cuyamaca.edu/ • Title attribute = “Cuyamaca College”

  17. Images – What’s Needed • Text description • Alt text • Description within text of page • Link to long description page using the “longdesc” attribute • Decorative images can use empty alt text or alt=“”

  18. Alt text examples

  19. Images • Are images bad? • No! • Useful to individuals with: • Reading disabilities • Learning disabilities • Attention deficit disorders • Cognitive disabilities • Sight

  20. The Specifics This section will provide instructions for how to add Alt text for Microsoft Office, FrontPage, SharePoint Designer, Dreamweaver, and Blackboard.

  21. Alt text - MS Office 2007 • Right-click image • Choose Size… or Size and Position… • Select the Alt Text tab • Enter alternative text

  22. Alt text - MS Office 2003 • Right-click image • Choose Format Picture • Select the Web tab • Enter alternative text

  23. FrontPage Accessibility Tool • Tools Menu • Accessibility

  24. Alt text – FrontPage • Right-click image • Choose Picture Properties • Select the General tab • Enter text

  25. SharePoint Designer Accessibility Tool • Tools Menu • AccessibilityReports

  26. Alt text – SharePoint Designer • Right-click image • Choose Picture Properties • Select the General tab • Enter alternative text

  27. Dreamweaver Accessibility Tool • Site Menu • Reports…

  28. Alt text – Dreamweaver • Click on image • Enter alt textin properties

  29. Alt text – Blackboard • Attach image • Enter alt text

  30. Tools • Wavehttp://wave.webaim.org/ • Cynthia Sayshttp://www.contentquality.com/ • WebDeveloper Toolbar for Firefoxhttp://chrispederick.com/work/web-developer/

More Related