1 / 24

Unlocking Digital Accessibility: Web Design Tips & Tools

Explore barrier-free web design principles, WAI guidelines, and benefits of universal design with EASI courses. Learn about creating accessible content for all users. Enhance your web pages with inclusive features to improve user experience. Validate your work for accessibility and make the internet a more inclusive space. Contact EASI for more information on accessible e-learning.

thane-whitney
Download Presentation

Unlocking Digital Accessibility: Web Design Tips & Tools

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. EASIEqual Access to Software and Information EASI is the premier provider of online training about accessible information technology

  2. EASI COURSESwww.rit.edu/~easi • Barrier-free Info Tech • Barrier-free Web Design • Advanced Web Design • Barrier-free E-learning • Train the Trainer • LD & Accessible IT • Business Benefits of Accessible Design

  3. BARRIER-FREE WEB DESIGN • Resources • WAI www.w3.org/wai • EASI www.rit.edu/~easi • www.access-board.gov

  4. WAI • The Web Access Initiative was established by the World Wide Web Consortium to develop guidelines on making the web accessible to users with disabilities • http://www.w3.org/wai

  5. WAI • WAI has created many useful resources including: • Authoring tool guidelines • Web design guidelines • Web quick tips

  6. WHY UNIVERSAL DESIGN? • It’s the Right Thing TO DO • It Makes Ecconomic Sense • It’s the Law • Do It For Yourself

  7. ACCEESS FOR ALL Disabled users surf your pages with: • Screen Magnification Software • Screen Reading Software • Alternative Browsers • Alternative Keyboards • Alternative mouses

  8. IMAGES AND ANIMATIONS • Use the alt attribute to describe the function of all visuals

  9. WEB PAGE AS IMAGE

  10. SAME PAGE GRAPHICS OFF

  11. ALT TAG HTML CODE <img src="alt2.gif" width=417 height=128 alt="EASI Banner, with words EASI Equal Access to Software and information" border=0 align="middle"> <p> <img src="alt3.gif" width=285 height=143 alt="Picture of Dr.Norman Coombs and Dick Banks" border=0 align="middle">

  12. IMAGE MAPS • Use client-side maps and text for hotspots

  13. MULTIMEDIA • Provide captioning and transcripts of audio and descriptions of video

  14. HYPERTEXT LINKS • Use text that makes sense when read out of context • For example, avoid “click here”

  15. Links That Make Sense Click Here to view EASI video on Adaptive Computing Click Here to view video on Adaptive Computing

  16. PAGE ORGANIZATION • Use headings, lists and consistent structure • Use CSS for layout and style where possible

  17. GRAPHS AND CHARTS • Summarize or use the longdesc attribute

  18. SCRIPTS, APPLETS AND PLUG-INS • Provide alternate content in case active features are inaccessible or unsupported

  19. FRAMES • Use noframes and meaningful titles Example of NOFRAMES and TITLE Code

  20. TABLES • Make line by line reading sensible • Summarize

  21. CHECK YOUR WORK • Validate for HTML • Validate for access features • View with several browsers • View using browser with graphics off • Use WAI checklist and guidelines

  22. ACCESS CHECKERS • Bobby • http://www.cast.org/bobby/ • WAVE • A-PROMPT

  23. THANK YOU FOR CARING We thank you for caring enough to make the world of information a better place for us personally and millions of people just like us.

  24. CONTACT INFORMATION • My e-mail: nrcgsh@rit.edu • EASI www.rit.edu/~easiNational Center for Accessible E-learning: • Easi-elearn.org

More Related