Accessibility, Usability and Web Standards

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

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

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

4. 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 NORASIST Annual Meeting 2007

5. A Quick Study… Sites using Web Standards NORASIST Annual Meeting 2007

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

7. 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 NORASIST Annual Meeting 2007

8. 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 NORASIST Annual Meeting 2007

9. 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 NORASIST Annual Meeting 2007

10. 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 NORASIST Annual Meeting 2007

11. 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. NORASIST Annual Meeting 2007

12. 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. NORASIST Annual Meeting 2007

13. 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.” NORASIST Annual Meeting 2007

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

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

16. 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 NORASIST Annual Meeting 2007

17. 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 NORASIST Annual Meeting 2007

18. 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 NORASIST Annual Meeting 2007

19. 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 NORASIST Annual Meeting 2007

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

21. Usability Overview • Two main interests • Ease of learning • Ease of use NORASIST Annual Meeting 2007

22. 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 NORASIST Annual Meeting 2007

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

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

25. 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 NORASIST Annual Meeting 2007

26. 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 NORASIST Annual Meeting 2007

27. 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 NORASIST Annual Meeting 2007

28. 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 NORASIST Annual Meeting 2007

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

30. Migration Issues • Culture • Management • Technical • Resources NORASIST Annual Meeting 2007

31. Questions?