Accessibility

1. Accessibility CSCI 216

3. What is Web Accessibility? • The practice of making websites inclusive and usable to the widest possible audience, including people with: • Visual disabilities • Need screen readers or enlargers • Hearing disabilities • Need captioning • Physical disabilitites • Need alternative input devices • Cognitive disabilities • Need simple, consistent navigation structure

4. Why Be Accessible? • It makes good business sense. • It's the right thing to do. • It's the law!

5. Best Practices • Provide text alternatives • Choose colors wisely • Create structure • Design tables carefully • Keyboard-friendly shortcuts • Make accessible forms • Provide clear navigation • Strive for simplicity

6. 1. Provide text alternatives • Provide a text equivalent for images, image maps, and graphical buttons

7. 1. Provide text alternatives • Explain graphs or charts • Provide "long descriptions" by creating a file and using the "longdesc" attribute

8. 1. Provide text alternatives • Provide captioning and/or transcripts of audio and video. • Use HTML instead of PDF, where possible. PDF documents should be "tagged" to make it more accessible. • It's better to leave the ALT tag blank (ALT="") than to enter text that's not useful or is redundant. The single most important thing to understand is that people use web sites in very different ways. This doesn’t just mean disabled people using special equipment but everyone – regardless of whether you might think of them as having a “special need”.

9. 1. Provide text alternatives • Ensure that there is a text equivalent for applets, frames, and scripts.

10. 2. Choose colors wisely • Don't rely on color to convey information. • Ensure that foreground and background color combinations provide sufficient contrast.  • Avoid low-contrast graphics. • Be careful with green and red. • Examine content on a monochrome screen or send to a black and white printer.

11. Color Resources • See your website as a color blind person might, go to Vischeck to run a simulation. • Color Oracle colorblindness simulator for Windows, Mac and Linux  • A full palette of hex values and how these colors are transformed for those with color deficient vision • Paciello Group's contrast tool to test for contrast, color blindness, and luminosity • Juicy Studio's color/contrast online test site to test hex values for foreground and background colors

12. 3. Create structure • Use style sheets to control layout and presentation. • Use headings (<H1>-<H6>) and lists to convey document structure. • Produce documents that validate! • Label links properly - be brief but descriptive • Avoid "click here" or "more" • Mark up lists and list items properly.

13. 3. Create structure • Use both id and name when creating anchor tags. • <a id="content" name="content"> • Use skip links to skip over navigation elements and jump to main content.

14. 4. Ensure control over fonts • Don't force the font, size, or color. • Use relative rather than absolute units. • Pixel measurements cannot be resized in IE • Specify a generic font family

15. 4. Design tables carefully • Identify row and column headers. • Provide summaries for tables. • Do not use tables for layout. 

16. 5. Keyboard-friendly shortcuts • Provide keyboard shortcuts to important links • To follow access keys, use ALT + access key, then hit enter • Provide documentation of shortcuts Web Accessibility is not only for people with disabilities but for all of us who are thankful that there are no barriers in using our abilities.

17. 6. Make accessible forms • Use fieldsets and optgroups to group related items • Every form element should have a label • Provide keyboard shortcuts to form controls

18. 6. Make accessible forms • Create a logical tab order through form controls • Try navigating your web page without the mouse! It’s not just about disabled users being able to access your website — it’s about everyone being able to access your website.

19. 7. Provide clear navigation • Provide information about the general layout of a site (e.g., a site map or table of contents). • Use a consistent navigation scheme. • Clearly identify the target of each link. • Use text for hyperlinks that makes sense out of context. • E.g., avoid "Click here" or "More"

20. 8. Strive for simplicity • Use the clearest and simplest language appropriate for a site's content. • Use clear, readable fonts. • Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. • Create a style that is consistent across pages. The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. ~Tim Berners Lee

21. Test Your Website • Turn off images in your browser(make sure image place holders are turned on) • Turn off support for JavaScript • Turn off support for stylesheets • Tab through the page, try navigating without a mouse • Try to change the standard font colors and styles in your browser • Try to increase the font size by using the browser Does your site still makes sense?

22. Useful Links • Testing • http://www.craigcecil.com/checkyoursite.htm • http://wave.webaim.org// • Demo • http://www.w3.org/WAI/demos/bad/after/home.html • References • Web Accessibility Initiative (WAI) • www.WebAIM.org • www.cew.wisc.edu/accessibility • http://web.mit.edu/atic/www/accessibility/guidelines.html