Designing Accessible Web Sites

1. Designing Accessible Web Sites • Rick Hill, Webmaster • College of Engineering

2. Why are you here? • Converting an existing site? • Creating a new site? • Create accessible web standards? • Required knowledge for a project? • Just curious? • Other needs?

3. Who are you? • Webmaster? • Web designer? • Web database programmer? • Administrator? • Researcher?

4. Who are you? • How many sites do you work with? • Use a GUI authoring tool or hand code? • Use cascading style sheets (CSS)? • Use validation tools? • Accessibility experience?

5. Class Goals • Define web accessibility • Why is it important? • Why should you do it? • Identify the issues involved • Explore design standards • Discuss methods to create and maintain accessible sites • Identify resources

6. Accessibility Defined • The qualities of a website that allow people to use it even when they are working under limiting conditions or constraints • Allows more people to use a site in more situations • Provides web content to people with disabilities • Allows web content to be presented using adaptive technology

7. Users Limitations • Functional Limitations • Visually Impaired (includes color blindness) • Hearing Impaired • Mobility Impaired • Cognitively Impaired • Situational Limitations • Device Limitations • Browser Limitations

8. Scope of Functional Disabilities • The American Foundation for the Blind claims 10 million visually impaired in the US and over 900,00 computer users • A Harris Poll, June 2000, showed that 43% of US adults with disabilities use the Internet • WHO reports 15% to 30% of the population have functional limitations that can affect their ability to use technology • According to a Georgia Institute of Technology survey, almost 10% of internet users reported having a disability

9. Scope of Functional Disabilities • 1999 US Department of Commerce survey reported that in the US: • 7.3 million had vision problems • 6.9 million had hearing problems • 6.3 million had difficulty using their hands • 2.9 million had a learning disability • ~12% of the US have some type of work disability • Statistics point to an increasing number of people with functional limitations as the population ages

10. Goals of Accessible Design • Make web-based information and services available to people with disabilities • Make web-based information and services available to the widest audience

11. How the Disabled Use the Web • Visually Impaired • Screen readers • Screen magnifiers • Text browser • Braille display • Hearing impaired • Braille display • Direct connection to hearing aid • Captioned audio and multimedia

12. How the Disabled Use the Web • Mobility impaired • Speech control • Keyboard guards and overlays • Slow keys and on-screen keyboards • Replacement mice and switches • Cognitive disabilities • Most neglected disability • Require clear and simple content • Alternate presentations of data

13. What is the problem? • Web sites use design techniques, scripts, images and graphics in ways that make the content inaccessible or difficult to use • Graphic content without text equivalent • Images, charts, Flash, PDF’s • Complex navigation • Video and audio clips without captions or transcripts • Require a specific browser or mouse • Not user-centric

14. The Solution: Standards • Define standards for web accessibility • Create tools that support the standard • Adaptive technologies that interpret websites designed to the standards • Authoring tools that integrate the standards into web designs • Validation tools that help determine standards compliance • Author web sites and pages to comply with the standards

15. Pro and Con • Pro • Since pages are designed to standards, authors need not know which adaptive technology is being used by the client nor do they have to test pages using different adaptive tools • Con • The standards are not specific enough, so they are subject to interpretation • No tool can fully automatically test or create accessible web pages

16. The Standards • W3C’s Web Accessibility Initiative (WAI) • Published guidelines, implementation methods, and priority checkpoints under the Web Content Accessibility Guidelines (WCAG). • No force of law • US Rehabilitation Act Section 508 • Subpart B - Technical Standards § 1194.22 • Based on WCAG Priority A standards • Emphasizes end results and enforceability

17. Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity

18. Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity

19. Federal Legislation • Americans with Disabilities Act, Title II • Communications must be as effective for those with disabilities as for those without • Rehabilitation Act, Section 504 • Establishes requirement to make programs, services and activities accessible • Rehabilitation Act, Section 508 • Provides standards to use in evaluating the accessibility of web pages and other electronic communication

20. Federal Impact • After June 25, 2001, technology must meet 508 standards. • Enforcement covers all Federal agencies • Applies to web pages as they are updated or added • Applies to Assistive Technology Act funding • 1998 act provides funding to states for maintaining technology-related assistance programs for the disabled • California is a recipient • UC Federally funded sites may need to comply

21. California State Impact • State agencies adopt accessibility standards: • California State Webmasters Site • Compliance with Government Code Section 11135.d(2) which references Federal Rehabilitation Act Section 508 • Priority 1 and 2 level checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0 “AA” Conformance Level) • Recommended best practices from the California Department of Rehabilitation

22. Impact on California Public Colleges and Universities • California Community College system ruled that 508 applies system wide • California State University System required by legislation to comply with 508 • In December 2004, CSU Executive Order 926 states - "Section 11135 of the California Government Code was amended ... to clarify that Section 508 of the 1973 Rehabilitation Act applies to the CSU. " • California State University's Accessible Technology Initiative • All CSU sites Section 508 compliant by 2012

23. And what about UC? • No legislative requirement • No system-wide accessibility policy - yet! • Former UC President Atkinson 2001 letter to UC chancellors pledged to: • " ...ensure that the digital technologies we use for academic and administrative purposes are accessible to all of our students, faculty, and staff "

24. And what about UC? • Electronic Accessibility at the University of California • System-wide groups discussing issues • Draft policy • Exploring acquisition of testing/validation tools

25. And UC Davis? • ADA challenge - UC Davis and UC Berkeley • Expanded to include web accessibility issues • UC Davis web policy PPM 310-70 • Adopted August 2006 • Applies to official and department sites sites • Added accessibility requirements • Minimum standard is 508 • Implementation in process

26. And UC Davis? • Support resources available or planned • Implementation plan being drafted • Training, tools and web resources? • Web templates • Web developers forum • Content Management System • Video captioning services

27. Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity

28. Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity

29. Better Web Design • Refocus on purpose of your web site • Design to current web standards • Reevaluate site and page navigation • Provides additional redundancy • Improved page load speeds • New skills • Potentially easier to maintain • Better search rankings • More usable sites

30. Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity

31. Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity

32. Funding Issues • The costs to respond to an ADA challenge • Other accommodation • Redesign to meet a deadline • External review • Section 508 has implications for research • Grant funding • Web requirements • Potentially lower web maintenance costs

33. Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Ethics

34. Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Ethics

35. Ethics • UCD Principles of Community • It’s the right thing to do!

36. Time for a Movie

37. How Do I Do It? • Author sites/pages that are compliant to 508 standards • Check sites/pages for compliance to the standard • Maintain compliant sites/pages • Go beyond 508 standards when possible • Worldwide Web Consortium (W3C) Web Accessibility Initiative (WAI) Web Accessibility Guidelines (WCAG) • Use best practices

38. It’s an Art! • There are no tools available that will automatically create an accessible site/page • There are no tools available that will automatically determine if a site/page is compliant with any standard • You will need to supplement any tool with your understanding and interpretation of the standards

39. The Basic Design Process • Take a user-centric approach to design • You do not control the user experience, only content • Create a map of your site and check that it is logically arranged/linked • Make sure that page navigation is is consistent and clear • Create a site map page to assist navigation • Make sure that content is current and will be maintained

40. Use Valid HTML or XHTML • Use current (X)HTML standards in design • HTML 4.01, XHTML 1.0, XHTML 1.1 • Use CSS in lieu of deprecated font/layout tags • Specify the DOCTYPE • Markup and CSS won’t validate without it • Declare the natural language type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">

41. Use Valid HTML or XHTML • Engineering: • Use W3C web standards when possible • WaSP- Web Standards Project • Validate the HTML • Validate the CSS <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

42. Other Good Practises • Use percentages and ems • Optimize page sizes and included image sizes to decrease page load speeds • Consider using a design tool that allows template driven design

43. Section 508 Standards

44. Section 508 Standards (a) • (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

45. Section 508 Standards (a) • ALL images MUST have an "alt" attribute • The content of "alt" attribute is a matter of style and judgment • Do not label a link as "Link to" in the "alt" text • Validation tools will check to see if "alt" attribute exist but cannot interpret their content

46. Section 508 Standards (a) • Blank "alt" attribute (alt="") can be used for appropriate images but ALL images need an "alt" attribute • Appropriate for images that convey no information • A blank alt attribute is alt="", that is quote-quote not quote-space-quote • Background graphic and patterns do not require "alt" attribute (in fact they can’t take one)

47. Section 508 Standards (a) • "alt" text should be kept short - less than 1024 characters • Use "longdesc" attribute to provide a link to a page with a larger amount of information • "longdesc" pages should be simple, text only • "longdesc" pages could provide a link back to an anchor on the calling page

48. Section 508 Standards (a) • Image examples • Image • Image links • Image map hot spots <img src="logo.gif" width="10" height= "10" alt="Company Logo" longdesc="logoinfo.html"> <a href="index.html"><img src="logo.gif" width="10" height="10" alt="Homepage></a> <img src="banner.gif " width="500" alt="Navigation Banner" usemap="#banner"> <map name="banner"> <area href="home.html" alt="Homepage" shape="rect" coords="0,0,110,24"> <area href ="services.html" alt="Services" shape="rect" coords="111,0,215,24"> …

49. Section 508 Standards (a) • Image types • Image Buttons • Decorative and spacer (no information) • Information rich, like charts and graphs • Building Accessible Websites by Joe Clark addresses providing text equivalents for many other types of images (hit counters, maps) <input type="image" src="logon.gif" alt="Logon" name="logon"> <img src="spacer.gif" width="1" height="1" alt=""> <img src="chart.gif" width="360" height="220" alt="Growth of visually impaired internet users" longdesc="chart.html">

50. Section 508 Standards (b) • (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.