1. Planning an Accessible Website: Beyond Alt Tags Stephanie M. Randolph School of Health, Physical Education, and Recreation Indiana University

2. Session Outline What is web accessibility? Why is accessibility important? What are the guidelines for evaluating accessibility? How do I evaluate my website? Resources

3. What is Web Accessibility? Anyone regardless of ability can use the web. People can understand, navigate, interact and contribute to the web. Accessibility benefits everyone, not just individuals with disabilities.

4. Why is Accessibility Important? The Web is becoming a bigger part of everyone’s lives The Web can make many tasks easier for individuals with disabilities Accessibility is good for business Some websites are required by law to be accessible (Section 508) Web accessibility benefits everyone

5. Different Disabilities That Can Affect Web Accessibility Visual disabilities Blindness Low vision Color blindness Hearing impairments Deafness Hard of hearing Physical disabilities Speech disabilities Cognitive and neurological disabilities Dyslexia and dyscalculia Attention deficit disorder Intellectual disabilities Memory impairments Mental health disabilities Seizure disorders Multiple Disabilities Aging-related conditions

6. Other Considerations There are a wide array of different browsers to consider when designing accessible websites Internet Explorer, Firefox, Opera, text only, screen readers Different versions Many individuals still use a dial-up modem to connect to the internet Some people may only use one type of input devise

7. Section 508 1998 Amendment to the Rehabilitation Act Federal agencies are required to make their electronic and information technology accessible to employees and the public Criteria for web-based applications based on the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).World Wide Web Consortium Web Accessibility Initiative

8. What are the guidelines for evaluating accessibility? Web Content Accessibility Guidelines Current version 1.0 2.0 due out soon WCAG 1.0 versus WCAG 2.0 Applies more broadly to different technologies More comprehensive Testable Organized differently (guidelines and checkpoints versus principles and success criteria) If you conform to 1.0, you will probably conform to 2.0

9. Themes of Accessible Design Ensure graceful transformation Guidelines 1-11 Separate structure from presentation Provide text alternatives Provide info that serves the same purpose as audio or visual in ways suited for alternate sensory channels Create documents that do not rely on one type of hardware

10. Themes of Accessible Design Make content understandable and navigable Guidelines 12-14 Make language clean and simple Provide navigation tools and orientation info that is understandable

11. Priorities Priority 1: Must satisfy this checkpoint Priority 2: Should satisfy this checkpoint Priority 3: May address this checkpoint

12. Guideline 1 1. Provide equivalent alternatives to auditory and visual content Be as descriptive but succinct as possible Long descriptions Caption video and multi-media http://www.ncaonline.org/monographs/19in clusion.shtml http://www.ncaonline.org/monographs/19in clusion.shtml Not So Good – wedding photo Good – a bride feeds wedding cake to the groom

13. Guideline 2 2. Don’t rely on color alone Examine with colors turned off Provide sufficient color contrast Not So Good – Our school is the best in the nation. Good – Our school is the best in the nation.

14. Guideline 3 and 4 3. Use markup and style sheets and do so properly Separate structure from presentation HTML and CSS Use the right DOCTYPE HTML 4.01 Transitional 4. Clarify natural language usage Identify primary language – EN Write out abbreviations the first time they occur in a document

15. Guideline 5 and 6 5. Create tables that transform gracefully Avoid using tables for layouts Identify row and column headers and 6. Ensure that pages featuring new technologies transform gracefully Test pages without style sheets and scripting

16. Guideline 7 and 8 7. Ensure user control of time-sensitive content changes Avoid screen flicker and text blink 8. Ensure direct accessibility of embedded user interfaces http://www.indiana.edu/~hperdev/webr equest/index.php http://www.indiana.edu/~hperdev/webr equest/index.php

17. Guideline 9 and 10 9. Design for device-independence Tab indexes and access keys http://www.ncaonline.org/index.shtml 10. Use interim solutions No pop-ups without alerting user Don’t use auto refresh

18. Guideline 11 and 12 11. Use W3C technologies and guidelines HTML, XHTML and XML for structure SMIL for multi-media CSS and XSL for style PNG for graphics Avoid deprecated tags 12. Provide context and orientation information Identify frames (or don’t use them)

19. Guideline 13 and 14 13. Provide clear navigation mechanisms Skip over navigation content 14. Ensure that documents are clear and simple Simple language and grammar Not So Good – for a description of our program, click hereclick here Good – for a description of our program, please visit our program info page. program info

20. How Do I Evaluate My Website? Review guidelines and plan ahead! Examine pages using graphical browsers Use different types and versions Turn off style sheets, images, etc. Examine pages using specialized browsers Text-only Screen readers Check PDF’s and other technologies Validate site for accessibility when doing other validation checks Have actual users test it out

21. Browser Checks IE7Firefox 1.5Opera 9.2Netscape 8.1 Zoom -lower right hand side of screen -magnifying glass -up to 1000% Needs add-on-upper right hand side of screen -magnifying glass -up to 1000% Change colors -Tools, Internet Options, Colors -Tools, Options, Content, Colors -Tools, Preferences, Web Pages -Or User Mode -Tools, Options, General, Fonts and Colors Change text size -Page, Text Size, largest – smallest -View, Text Size, Increase/Decrease -Author/User Mode, A++, A+ or A -View, Text Size, Increase/Decrease Choose font -Tools, Internet Options, Fonts (webpage and plain text) -Tools, Options, Content, Fonts and Colors -Tools, Preferences, Web pages -Tools, Options, General, Fonts and Colors Turn off style sheets -Tools, Internet Options, Accessibility, Formatting (check all 3) -View, Page Style, No Style -User Mode-View, Page Style, No Style Turn off images -Tools, Internet Options, Advanced, Multi-media, uncheck Show Pictures -Tools, Options, Content, uncheck Load Images -Show Images-Tools, Options, Site Controls, uncheck Allow Images to be displayed Turn off scripting -Tools, Internet Options, Security, Custom Level, Scripting, disable all -Tools, Options, Content, uncheck Enable Java and Enable Javascript -Tools, Quick Preferences, uncheck Enable Java and Javascript -Tools, Options, Site Controls, uncheck Enable Java and Javascript

22. Resources Web Accessibility Web Accessibility Initiative (http://www.w3.org/WAI/) Web Accessibility Initiative WebAIM (http://www.webaim.org/) WebAIM Accessibility Forum (http://www.accessibilityforum.org/) Accessibility Forum Dive Into Accessibility (http://diveintoaccessibility.org/) Dive Into Accessibility Web Axe (http://webaxe.blogspot.com/) Web Axe Section 508 Section508.gov (http://www.section508.gov) Section508.gov Validation Tools Accessify.com (http://accessify.com/tools-and-wizards/) Accessify.com Watchfire (http://webxact.watchfire.com/) Watchfire ATRC Web Accessibility Checker (http://checker.atrc.utoronto.ca/index.html) ATRC Web Accessibility Checker Hermish (http://www.hermish.com/) Hermish Cynthia Says (http://www.cynthiasays.com/) Cynthia Says Anybrowser.com (http://www.anybrowser.com/siteviewer.html) Anybrowser.com

23. Resources Browsers Lynx (http://www.vordweb.co.uk/standards/download_lynx.htm) Lynx JAWS (http://www.freedomscientific.com/fs_products/software_jaws. asp) JAWS Opera (http://www.opera.com/) Opera Other Colorblind Web Page Filter (http://colorfilter.wickline.org/) Colorblind Web Page Filter Using Opera to check accessibility (http://www.webaim.org/resources/opera/) Using Opera to check accessibility Magpie (http://ncam.wgbh.org/webaccess/magpie/) Magpie Adobe Accessibility Resource Center (http://www.adobe.com/accessibility/) Adobe Accessibility Resource Center Web developer toolbar (http://chrispederick.com/work/web- developer/) Web developer toolbar Flash (http://www.webaim.org/techniques/flash/) Flash