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

Accessible Website Guidelines UCCS Web Services Accessible Website Guidelines

Learning Objectives What is the Definition of Accessibility? What is Section 504,508, Colorado Bill 00-1069? 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?

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

Why should we make our websites Accessible?

UCCS Web Services Web Accessibility is mandated by federal law. Web Accessibility is also governed by Colorado House Bill 00-1269

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

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. http://www.section508.gov

Colorado Bill 00-1269 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. http://www.colorado.gov/colorado/accessibility.html

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.

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

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

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.

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.

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.

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

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 00-1269, Resources. Accessibility in Microsoft 0ffice 2007 Description of accessibility tools in Office 2007. Webucator Accessibility Tutorial Accessibility Tutorial

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

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

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.

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

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.

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.

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)

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

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.

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.

UCCS Web Services Alt Tags

How would you make this Cartoon Accessible on the web?

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."

How would you make this Cartoon Accessible on the web?

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?”

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

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.

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.

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

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.

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