1. Accessible Website Guidelines Sam Frank
UCCS Web Services
Accessible Website Guidelines Sam Frank

2. Accessible Website Guidelines
UCCS Web Services
Accessible Website Guidelines

3. Learning Objectives What is the Definition of Accessibility?
What is Section 504,508, Colorado Bill ?
What are the Primary Accessibility Issues?
What should be our campus goal on accessible websites?
What are the benefits of making websites accessible?
Does UCCS have any resources (computers / Software) available?

4. Learning Objectives Cont.
What tools and strategies should we consider when we are designing sites?
How can you use the Accessibility features of Dreamweaver?
What is a sufficient checklist for Accessibility / Usability?
Exercises

5. Why should we make our websites Accessible?

6. UCCS Web Services Web Accessibility is mandated by federal law.
Web Accessibility is also governed by Colorado House Bill

7. Section 504 / 1990 Disabilties Act
Section 504 of the Vocational Rehabilitation Act of 1973 and the Americans with Disabilities Act of 1990 prohibit discrimination against individuals with disabilities. Web content is “also”covered by this legislation. Section 504 Handbook

8. Section 508
Section 508 of the Rehabilitation act requires that webpages and other information technologies of federal agencies be designed to be accessible to employees and visitors with disabilities.

9. Colorado Bill
Adopted from ADA Standards, Establishes web nonvisual access standards and criteria for the use by individuals who are blind or visually impaired. There are also guidelines for individuals that are hearing impaired.

10. What is Web Accessibility?
Web Accessibility? Here’s a 10 minute video that explains.
Keeping Web Accessibility in Mind
Gain an appreciation of web accessibility by understanding the user perspective.

11. What should be our primary Goal?
Web Designers on campus should provide Access to everyone regardless of disability!

12. Web Accessibility Benefits
What are several benefits to improving web Accessibilty !

13. Why make your websites Accessible?
10 reasons from WebAim
To improve the lives of people with disabilities.
To avoid lawsuits and / or bad press.
To improve website performance on smaller devices.
To improve usability (Ease of Use) for all visitors.

14. 10 Positive Outcomes
Captioning is useful for people with hearing impairments, for people in noisy environments, or people who speak a foreign language.
Good color contrast aids people with color blindness, and those who prefer to read from printed pages.
Providing text equivalents (e.g., ALT attributes and metadata) improves search engine listings.

15. 9 Positive Outcomes
Web content in alternate formats assists low-bandwidth users.
Web Accessibility Reduces site maintenance. By separating structure and presentation and using style sheets, the look of a site can easily be changed by modifying only one file.
Special Keyboard commands assists people with limited hand function.

16. How do we Get Information to begin making our sites accessible?

17. Visit these 6 Web Resources
Web Aim
Expanding the web’s potential for people with disabilities.
W3C
Web Content Accessibility Guideline (WCAG) 2.0
Section 508
Rehabilitation Act amended in 1998 to include that technology must be made accessible to people with disabilities.
Colorado The Official State Web Portal
Accessibility Instructions, Bill , Resources.
Accessibility in Microsoft 0ffice 2007
Description of accessibility tools in Office 2007.
Webucator Accessibility Tutorial
Accessibility Tutorial

18. Look at Accessibilty issues at other Schools
CU Boulder
Accessibility Resources and Training.
Colorado State University
Accessibility at Colorado State University
CSU The California State University
Accessible Technology Initiative
MIT Adaptive Technology Information Center (ATIC)
Addresses the needs of visitors with disabilities.
The University of Arizona
UA policies on website accessibility and federal law.
Minnesota State Colleges and Universities
Excellent reference for Web Accessibility Guidelines

19. Watch Video Links from Microsoft
Windows Vista Ease of Access Center
Ease of Access Center Demonstration
Use Text of visual Alternatives for Sounds
Alternatives Demonstration
Making the Internet Easier to Use
Internet Explorer Demonstration
Use the Computer without a Display
Hear Text read aloud

20. There is a ton of information on the Web
There is a ton of information on the Web. Keep it simple and remember that small details can make a huge difference.

21. Assistive Technologies / Tools
Does UCCS have Assistive Technology tools? What are some simple tools and strategies for making websites accessible?

22. Does UCCS have Assistive Technology tools ?
Disability Services Department, x3195 that will provide:
Assistive technology (Computers and software)
Books on Tape
Interpreters
Extended Testing Time
Scribe for Exams
Assistive Technology Lab
Location: EL Pomar Center Room 215,.
Provides hardware and software for students with a qualifying physical, visual or learning / reading disability.

23. Does UCCS have Assistive tools on Campus?
For Physical Impairments The AT Lab has the following hardware and software:
Power Height Adjustable Tables.
Fully Adjustable Articulating Monitor Arms.
Ergo Wrist Rests
Tracker Pro (Head Controlled Mouse)
Dragon Naturally Speaking (voice recognition software.

24. Does UCCS have Assistive tools on Campus?
For Visual Impairments and Learning Disabilities The AT Lab has the following hardware and software:
CCTVs (video magnifiers)
Fully Adjustable Articulating Monitor Arms.
20” wide screen monitors
Zoom Caps Keyboards
Perkins Braille Writer
Jaws for Windows (Screen Reader)
Duxbury Braile Translator
Omni Page pro (OCR scanning software)
Zoomtext (Screen Reader)
Kurzweil 3000 (Scanning and Reading software)

25. Assistive Technologies / Tools
What are some simple tools and strategies for making websites accessible?

26. 10 Web Aim Guidelines
“Some similarities exist between W3C and Web Aim guidelines.”
Provide appropriate alternative text.
Provide headings for data tables.
Ensure users can submit all forms.
Ensure that links make sense out of context.
Caption and / or provide transcripts for media.

27. 10 Web Aim Guidelines
“Some similarities exist between W3C and Web Aim guidelines.”
Ensure accessibility of non-HTML content including PDF, DOC, PPT and flash content.
Allow users to skip repetitive elements on the page.
Do not rely on color alone to convey meaning.
Make sure content is clearly written and easy to read.
Make javascript accessible.

28. UCCS Web Services
Alt Tags

29. How would you make this Cartoon Accessible on the web?

30. Give us much info as possible, be precise and succinct.
Incorrect Examples of alt tag:
-Picture of two dogs
-Two Dog Cartoon
-Image
-Cartoon image of two dogs and a computer.
-Black and white image
Correct Example alt tag :
Two Dogs looking at each other. One of the dog is sitting at a computer. Cartoon punchline says, "On the Internet, nobody knows you're a dog."

31. How would you make this Cartoon Accessible on the web?

32. Give us much info as possible, be precise and succinct
Incorrect: Examples of alt tag:
-pic
-Classroom with kids.
-Teacher and class.
-Cartoon image of teacher and children.
-Black and white image
Correct: Example alt tag :
Student asks teacher a question, in class. “How come Lewis and Clark didn’t just use MapQuest?”

33. Testing your Website… Use Markup validation programs and built in Dreamweaver tools.

34. 2 good Markup Validation Tools
W3C Markup Validation Service
Check the markup (HTML, XHTML) of web documents. Can specify to get new generated code with HTML Tidy.
Wave (Version 3)(See Key in packet)
Free web accessibility evaluation tool provided by WebAim.

35. Images and Colors Colour Check
Checks that color combinations provide sufficient contrast.
Image Analyser
This service examines all images found on a web page to check for any accessibility issues. The width, height, alt, and longdesc attributes are examined for appropriated values.
HTML TIDY
simple way to fix coding mistakes automatically and tidy up sloppy editing into nicely layed out markup.

36. Dreamweaver Tools for Accessibility
From Adobe, tools built into Dreamweaver for Accessibility
Reference Guides
Templates
Code Snippets
Built in Validation Tool

37. How do DW Tools work?
Accessibility preferences must be enabled of order for accesibilty options to appear in dialog boxes. Press (Ctrl + U) for preferences.
Use alt tags for images.
Use alt tag (alt=“”) for decorative, spacer or null images.
Provide headers, captions and summary information for tables.
Pay attention to position of headers on tables.

38. Dreamweaver Accessibility Cont.
Demonstration
Validate Entire Site
From site>Reports