1 / 23

Planning an Accessible Website: Beyond Alt Tags

Planning an Accessible Website: Beyond Alt Tags . Stephanie M. Randolph School of Health, Physical Education, and Recreation Indiana University. Session Outline. What is web accessibility? Why is accessibility important? What are the guidelines for evaluating accessibility?

mechelle-pacheco
Download Presentation

Planning an Accessible Website: Beyond Alt Tags

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

  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 <IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html"> • Caption video and multi-media • http://www.ncaonline.org/monographs/19inclusion.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 • <TH id="header1"> and <TD headers="header1"> 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/webrequest/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 • <a href="#content" accesskey="2" title="Skip to content">content</a> 14. Ensure that documents are clear and simple • Simple language and grammar Not So Good – for a description of our program, click here Good – for a description of our program, please visit our program info page.

  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

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

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

More Related