1. Accessibility, Usability and Web Standards David Robins NORASIST Annual Meeting September 17, 2007

2. 9/17/2007NORASIST Annual Meeting 20072 Purpose Explore the relationship, if any, between accessibility issues and usability issues Discuss strategies for achieving both

3. 9/17/2007NORASIST Annual Meeting 20073 Agenda Accessibility Issues: Standards and Laws Usability Issues and Guidelines Design for both: Web Standards Converting to Web Standards

4. 9/17/2007NORASIST Annual Meeting 20074 Accessibility Case: Target.com Target.com Suit by a blind student at UC Berkeley Suit alleges that site denies equal access to goods and services, e.g.: Lacks “alt” text for images Uses image maps for navigation Brought forth through ADA interpretation

5. 9/17/2007NORASIST Annual Meeting 20075 A Quick Study… Sites using Web Standards Quirks Mode Stds Mode XHTML 1.0 S XHTML 1.0 T HTML 1.0 S HTML 1.0 T E-Comm10 2215 Acad Lib6142813 Public Lib9110801 Total253541829 %42%58%7%30%3%15%

6. 9/17/2007NORASIST Annual Meeting 20076 Accessibility Issues Guidelines and Law 508 Section 508 of the American Rehabilitation Act WAI Web Accessibility Initiative of the World Wide Web Constortium (W3C)

7. 9/17/2007NORASIST Annual Meeting 20077 The Text-Only Question Users may be luke warm to text-only sites Many text-only sites are not fully accessible Cannot tab among links Link text may be confusing Many text-only forms are not accessible May marginalize disabled users Loss of branding

8. 9/17/2007NORASIST Annual Meeting 20078 Accessibility: Section 508 Technical Standards Software applications and operating systems Web-based intranet and internet information and applications Telecommunication products Video and multimedia products Self contained, closed products Desktop and portable computers Functional Performance Criteria Information, Documentation, and Support

9. 9/17/2007NORASIST Annual Meeting 20079 Accessibility: Section 508 Alternatives must be available to those with disabilities Tables for data only Graphically based information (images, flash, color, etc.) must have alternative rendering Document must be readable without style sheets

10. 9/17/2007NORASIST Annual Meeting 200710 Accessibility: Section 508 Client-side image maps are preferable to server-side image maps Try to find balance between redundancy and moderation (navigation, etc.) Scripting or forms should not interfere with assistive technology When all else fails, create a parallel text site

11. 9/17/2007NORASIST Annual Meeting 200711 508: Functional Performance At least one alternative to visual interaction People with sight impairments. People with visual acuity of worse than 20/70, or the device should have the ability to incorporate assistive technology At least one alternative to auditory interaction (“operation and information retrieval”) should be provided, or the device should allow for the inclusion of assistive technology appropriate to the hearing impaired.

12. 9/17/2007NORASIST Annual Meeting 200712 508: Functional Performance Auditory enhancement for critical auditory content (or allow for assistive technology that will allow a user to hear the information). At least one alternative to systems requiring human speech should be provided for people with speech impairments. At least one alternative must be provided to systems that require fine motor control (e.g. mice or tablets) to operate.

13. 9/17/2007NORASIST Annual Meeting 200713 Exceptions to 508 Equipment purchased or systems designed before 1998 Equipment and systems designed for intelligence or other operations critical to national security need not be altered for accessibility. Organizations receiving federal money when the purchase is “incidental to a contract.”

14. 9/17/2007NORASIST Annual Meeting 200714 Help with 508 Compliance W3C – Web Accessibility Initiative (WAI) http://www.w3.org/WAI/http://www.w3.org/WAI/ Section 508 Site (US Government) http://www.section508.gov/ http://www.section508.gov/ Validation: Use Firefox Web Developer Toolbar

15. 9/17/2007NORASIST Annual Meeting 200715 WAI ATAG (Authoring Tool Accessibility Guidelines) UAAG (User Accessibility Agent Guidelines) WCAG (Web Content Accessibility Guidelines)

16. 9/17/2007NORASIST Annual Meeting 200716 WCAG: Priority 1 General guidelines such as clarity of writing, descriptive text for non-text content, use of color as content, and dynamic content Use of images and image maps (use redundant text links for server-side maps) Use of appropriate table markup Use of frame identification Ensure that applets, scripts and multimedia produce usable content Use of alternative pages that are accessible if the primary page content is not

17. 9/17/2007NORASIST Annual Meeting 200717 WCAG: Priority 2 Appropriate text/background contrast Limiting use of images where text is sufficient Use of style sheets rather than mark up for content presentation Division of large text blocks into smaller where possible Use of consistent navigation tools Recommends against the use of tables as layout and visual formatting tools Proper positioning and association of labels and controls in forms More specific guidelines on the use of scripts and applets

18. 9/17/2007NORASIST Annual Meeting 200718 WCAG Priority 3 Specifying acronyms when first used Identifying the document’s primary natural language Use of keyboard shortcuts to links Use of navigation bars Placing defining content in headings and the tops of paragraphs Use of consistent style throughout pages Use of redundant text links for client-side image maps Provide summaries for tables and abbreviations for header rows Use of default text in form controls

19. 9/17/2007NORASIST Annual Meeting 200719 Usability Overview Part of large process of system development Involves the analysis of users using systems Determines the effectiveness of interfaces Usually involves the analysis of tasks Not limited to computers

20. 9/17/2007NORASIST Annual Meeting 200720 Usability Overview AKA Human-Computer Interaction (HCI) Computer-Human Interaction (CHI) Human Factors Interface Design Related to User Experience Interaction Design

21. 9/17/2007NORASIST Annual Meeting 200721 Usability Overview Two main interests Ease of learning Ease of use

22. 9/17/2007NORASIST Annual Meeting 200722 Web Standards Separation of content and presentation Content is structured according to syntactic and semantic elements Presentation is accomplished through external style sheets Use of tables for layout is discouraged Use of formatting elements is discouraged

23. 9/17/2007NORASIST Annual Meeting 200723 Why should we separate content and presentation? Issues Accessibility Section 508 Assistive technology File sizes Download speeds Simplicity “Future-proofing”

24. 9/17/2007NORASIST Annual Meeting 200724 Web Standards: Design Layers Content/Structure Presentation/Style Behavior/Programming

25. 9/17/2007NORASIST Annual Meeting 200725 Accessibility and Usability in Web Standards Content Layer Primarily an accessibility layer Presentation Layer Primarily a usability layer Behavior Layer Both accessibility and usability are issues here

26. 9/17/2007NORASIST Annual Meeting 200726 Migrating to Web Standards There is no one model for doing so No magic bullet It will be expensive and labor intensive Different considerations for different situations Different considerations for different systems

27. 9/17/2007NORASIST Annual Meeting 200727 Steps in Web Standards Design Content/Structure Layer Assess your audience and content Determine the types of content needed How can this content be broken down? What elements are necessary to present the content to your audience? Structure your content Group content into logical categories Determine logical names for your content categories Markup your content (decide logical flow) Apply XHTML markup using categories in divisions This markup should written in such a way that it does not have to be altered in the future Markup one time—style many times

28. 9/17/2007NORASIST Annual Meeting 200728 Steps in Web Standards Design Design/Style Layer (Template Development) Wireframe your design (information design) For any presentation of your site, decide on a design Create a wireframe that shows where each element will be positioned Make notes of color, typography, alignment, Gather necessary graphics Construct Style Sheets Based on your wireframe, write necessary rules for each element Establish selectors and rules Determine the extent to which your styles are inline, embedded, externally linked, or imported This is where boxes are sized and positioned Test in various browsers

29. 9/17/2007NORASIST Annual Meeting 200729 Steps in Web Standards Design Behavior Layer Script development Database design and implementation Content Management Systems

30. 9/17/2007NORASIST Annual Meeting 200730 Migration Issues Culture Management Technical Resources

31. Questions?