Accessibility

1. Accessibility

2. Overview • What is accessibility? • Essential Components of Accessibility • How to identify special needs audiences? • How people with disabilities use the web? • Developing a business case accessibility plan including social, technical, financial, and legal factors • Accessibility tools • Accessibility basics for mobile devices

3. Web Accessibility Essential components of accessibility

4. Web accessibility means… • People with disabilities can use the Web • People with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web • Benefits others, including older people with changing abilities due to aging.

5. Legal Obligations • Section 504 of the 1973 Rehabilitation Act and 1990 Americans with Disabilities Act • Both state that “No otherwise qualified individual with a disability shall, solely by reason of his/her disability, be excluded from the participation in, be denied the benefits of, or be subjected to discrimination under any program or activity of a public entity.” • US Policies Relating to Web Accessibility - http://www.w3.org/WAI/Policy/#US

6. Guidelines for Accessibility Components • Based on the fundamental technical specifications Web, in coordination with W3C technical specifications (HTML, XML, CSS, etc.) • Include: • Authoring Tool Accessibility Guidelines (ATAG) • Web Content Accessibility Guidelines (WCAG) • User Agent Accessibility Guidelines (UAAG)

7. Penn State Lawsuit • “pervasive and ongoing discrimination” • Included: Penn State’s course-management software, library catalogue, and departmental Web sites • Violation the civil rights of blind people under the Americans With Disabilities Act

8. Penn State Settlement • http://accessibility.psu.edu/nfbpsusettlement • Settlement included: • Complete an accessibility audit of its electronic and information technologies • Develop an Electronic and information technology Accessibility Policy Statement • Adopt WCAG 2.0 level AA standards for all University websites • Select an accessible course management system that complies with the Section 508 Guidelines to replace the existing course management system

9. Components of Accessibility • Content - the information in a Web page or Web application, including: • natural information such as text, images, and sounds • code or markup that defines structure, presentation, etc. • Web browsers, media players, and other "user agents” • Assistive technology, in some cases - screen readers, alternative keyboards, switches, scanning software, etc. • Users' knowledge, experiences, and in some cases, adaptive strategies using the Web • Developers - designers, coders, authors, etc., including developers with disabilities and users who contribute content • Authoring tools - software that creates Web sites • Evaluation tools - Web accessibility evaluation tools, HTML validators, CSS validators, etc.

10. How the Components Relate • Web developers usually use authoring tools and evaluation tools to create Web content. • People (”webusers") use Web browsers, media players, assistive technologies, or other "user agents" to get and interact with the content.

11. What to Fix • Image ALT Tag • Page or Document Title • Headings and Subheadings • Link Text • Table Headers and Captions • Form Design Considerations • Contrast or Luminosity/Brightness • Color Issues • Fonts and Text Layout • Text Reading Order • Foreign Languages and Accessibility • PDF Files

12. Image ALT Tag • are invisible descriptions of images which are read aloud to blind users on a screen reader • Accurate, Concise Description • A good rule of thumb to consider is to include what you might relay over the phone.

13. ALT Example • Possible ALT Tags • ALT = "Capitol Building” • ALT = "Capital Dome in neo Classical style. Dome is white, circular with narrow windows on many levels and pillars on the lowest level. See additional details in text.”

14. Document Title • Should include a TITLE tag within the HEAD area, and the title should be unique to each page on the Web site. • The TITLE can be repeated as the H1 of the page.

15. Link Text • Write links that make sense out of context • Make text links are underlined and are a different color value (lighter or darker) than the main text • If you use an image or image map to create links, make sure the destination is included as an ALT tag.

16. Other Link Tips • Insert "Top of Page" links after each section in longer documents • Avoid links opening in a new window unless absolutely necessary • If you use JavaScript links, such as those to open pop-up windows, make sure they are coded to be accessible to screen readers.

17. Font Size • Main concern = too small for many users to read • General Guidelines • 12 Point for Body Text • Fonts at smaller sizes may be illegible for some audiences.

18. Color Issues • Do not rely on color codes alone to provide information. "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." • Avoid contrasts of red and black, since some color blind users do not perceive reds • Test that text and background have a sufficient contrast in light/dark or "luminosity." • Juicy Studios • Avoid long blocks of light text on dark backgrounds; they are generally more difficult to read.

19. Examples of Color Coding • Color coding is possible as long as the color information is supplemented with differences in shape or text.

21. What is accessibility? • Chapter 1: (lynda.com) (33 mins) • What does accessibility mean? • How does accessibility help your users? • Experiencing a website via a screen reader • How does accessibility help you and your clients? • Overview of Section 508 standards • Overview of WCAG standards • Understanding consistency and semantic markup

22. Why Web Accessibility Matters Chapter 2: (lynda.com) (11 mins) • Experiencing an inaccessible web site • Experiencing an accessible web site

23. Accessibility Tips • Vision • Part 1 • Part 2 • Hearing • Mobility

24. 10 Minute Break

25. Business Accessibility Plan

26. Business Accessibility Plan Factors • Social Factors • Technical Factors • Financial Factors • Legal and Policy Factors

27. Identifying Social Factors • Corporate Social Responsibility (CSR) • Web accessibility is a social issue • Overlap with Older Users' Needs • Vision • Physical ability • Hearing • Cognitive ability

28. Identifying Technical Factors • Reduce Site Development and Maintenance Time • Reduce time and effort needed to change presentation • Facilitate efficient debugging • Reduce redesign and translation time and skills • Reduce development and maintenance • Reduce Bandwidth Use and Server Load • Reduce the size of each page served • Reduce downloading of large image and multimedia files • Reduce unwanted page downloading • Enable Content on Different Configurations • Render styled text across a wide range of configurations • Facilitate interaction with different input devices • Allow users and user agents to request content

29. Identifying Financial Factors • Increased Website Use • Direct Cost Savings • Decreases potential for high legal expenses • On-Going Costs • Decreasing costs

30. Identifying Legal Factors • Determining Applicable Policies • Considerations Beyond Requirements • Considerations for the Future • Understanding Risks for Non-Compliance

31. Adding Accessibility to Links, Images, and Other Content • Chapter 6: Video (lynda.com) (22 mins) • Marking up links properly • Marking up images • Creating a proper image header with CSS

32. Summary of Benefits of Accessibility • Improved Web Usage • Wider Audience (20% of the US population has some sort of disability) • Easier to use, easier to maintain • Semantic web, standards compliant • Reduce Legal Risks/Costs • Avoid Negative Brand Impact • Social Responsibility: Equal Access & Equal Rights

33. Accessibility Tools

34. Accessibility Evaluation tools • Keyboard — using your tab, arrow, and enter keys • AChecker — Online accessibility checker • WAVE — Firefox browser add-on toolbar • Contrast Color Checker — Firefox browser add-on with results displayed in table format

35. The keyboard • one of the cornerstones of web accessibility • Screen reader users and those with motor impairments cannot use a mouse • You should be able to easily navigate to any part of your web pages or website and perform all functionality using just the keyboard

36. Testing keyboard accessibility • Unplug your mouse • Employ the tab, arrow, return, and spacebar keys • Tab through the entire page. Note sequence. Can you see keyboard focus? • Operate menus and widgets • Submit forms

37. Potential Problems Excessive tabbing to reach main content Solution: employ skip-to-content link that has visible focus Links not visible on keyboard focus Solution: Add a:focus style to highlight focus Example: tyler.temple.edu Keyboard Testing

38. Skip Navigation • "skip to content" link be included before the site's main navigation tools • WCAG 2.0 Guideline 2.4.1 "A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.” • Allow users of screen readers to skip over a block of navigational links

39. Skip Link Method #1 • Use CSS and place text off the screen • Apply a class to link • Not visible in the browser

40. Skip Link Method #2 CSS Clip

41. AChecker • An online accessibility evaluator. • On a single page: • cites the line number of the accessibility violation • shows the errant code • gives the appropriate remediation • links to a resource page specific to the problem • Concentrate on “Known Problems” category.

42. Potential Problems Lack of alt text for images Lack of labels for form elements Color contrast Mouse event handlers AChecker

43. Using AChecker • Enter URL of site you are affiliated with • Select compliance level under “Options” link • Download a report

44. WAVE Accessibility Toolbar • FREE http://wave.webaim.org/toolbar • The primary evaluation function of the WAVE toolbar is the Errors, Features, and Alerts button • WAVE uses a distinctive icon approach in displaying accessibility information. Displays: • missing alternative text for images • missing form labels • table structure • script elements and event handlers • document structure and reading order • Icon key explains icons

45. WAVE Toolbar

46. Juicy Studio Juicy Studio add-on for Firefox Works on Macs, PCs, and Linux platforms Examines the information in your style sheet calculates the contrast DOES NOT evaluate graphic or Flash content evaluate text over a background image Color contrast checker

47. Juicy Studio

48. Other Web Accessibility Tools • Compliance Sheriff (http://www.hisoftware.com/products/hisoftware-compliance-sheriff.aspx) • Screen readers (Jaws demo http://www.freedomscientific.com) • WebAnywhere, http://webanywhere.cs.washington.edu/wa.php • Use different user agents and operating systems • Mac, Windows, Linux, Internet Explorer, Firefox, Safari, etc. • Simulators: • Screen Reader simulator, http://www.webaim.org/simulations/screenreader.php • aDesigner simulation, http://www.alphaworks.ibm.com/tech/adesign • dotMobi emulator, http://mtld.mobi/emulator.php • OperaMini simulator, http://www.opera.com/mini/demo/ • iPhone simulator, http://www.testiphone.com/

49. Accessibility Evaluation Tools Chapter 3: Video (lynda.com) (16 mins) Evaluating screen readers for Windows and Mac Installing browser development tools Pretending to be a screen reader for Web Designers/Developers

50. Accessibility Guideline Example • Temple University • Legacy web technology (greater than 2 years) • Web technologies related to core academic activities or core university business that have not been created, revised or redesigned after December 31, 2010, are considered legacy technologies and do not need to be revised, unless requested to do so. (page 8)