1. 1 Part B Web Site Development Chapter 4 Presenting Information on the Internet - 4.2 Web Usability: Web Design Concerns Information and Communication Technology “Multimedia Production and Web Site Development”

2. Ch 4.2 Web Usability: Web Design Concerns 2 Web design factors for different user groups Web Accessibility Standards # # Not included in the C&A Guide

3. Ch 4.2 Web Usability: Web Design Concerns 3 Know that there are guidelines to cater for web accessibility by people with special needs. Appreciate some popular standards or guidelines for web accessibility. # # Not included in the C&A Guide

4. Ch 4.2 Web Usability: Web Design Concerns 4

5. 5 Table of Contents 1.Different Groups of Users with Special Needs 2.How to Making Web Sites Easy to Use: Some General Discussions 3.Web Accessibility

6. Ch 4.2 Web Usability: Web Design Concerns 6

7. 7 1. Different Groups of Users with Special Needs Usability vs. Utility Does the system provide the raw capabilities to allow the user to achieve their goals? Does the system allow the user to learn and to use the raw capabilities easily? Usability engineering in software engineering

8. Ch 4.2 Web Usability: Web Design Concerns 8 Aspects of Usability Learn-ability The speed with which a new user can become proficient with the system. Efficiency of use How fast an expert user can do their work. Error handling The extent to which it prevents the user from making errors, detects errors, and helps to correct errors. Acceptability The extent to which users like the system. 1. Different Groups of Users with Special Needs

9. Ch 4.2 Web Usability: Web Design Concerns 9 Usability slogans The user is always right The user is not always right Users are not designers Designers are not users Less is more Source: Jacob Nielsen ’ s Usability Engineering 1. Different Groups of Users with Special Needs

10. Ch 4.2 Web Usability: Web Design Concerns 10 What Types of Users? People here care a lot about features People here want reliability, convenience “no bother” 1. Different Groups of Users with Special Needs

11. Ch 4.2 Web Usability: Web Design Concerns 11 Target users Blind / Visual Impairment. Cognitive / Learning Difficulties. Deaf / Hearing Impairment. Dyslexia / Specific Learning Difficulty. Hidden. Manual Dexterity. Mobility Impairment. Speech. Everyone! 1. Different Groups of Users with Special Needs

12. Ch 4.2 Web Usability: Web Design Concerns 12 Hardware products Alternative keyboards — featuring larger- or smaller- than-standard keys or keyboards, alternative key configurations, and keyboards for use with one hand. Electronic pointing devices — used to control the cursor on the screen without use of hands. Devices used include ultrasound, infrared beams, eye movements, nerve signals, or brain waves. Joysticks — manipulated by hand, feet, chin, etc., to control the cursor on screen. Trackballs — popular among users with motor impairments http://www.microsoft.com/enable/at/types.aspx 1. Different Groups of Users with Special Needs

13. Ch 4.2 Web Usability: Web Design Concerns 13 Software products Screen enlargers, or screen magnifiers --- a magnifying glass to enlarge portion of the screen contents Screen readers --- speaks everything on the screen into a computerized voice, they are essential for computer users who are blind. http://www.microsoft.com/enable/at/types.aspx 1. Different Groups of Users with Special Needs

14. Ch 4.2 Web Usability: Web Design Concerns 14 Screen Reader demo WebAIM Screen Reader Simulation 1. Different Groups of Users with Special Needs Users have to listen to the simulated screen reader to finish the tasks by using keyboard commands. A screen shot which is not clickable by mouse will be provided for illustration.

15. Ch 4.2 Web Usability: Web Design Concerns 15

16. Ch 4.2 Web Usability: Web Design Concerns 16 Avoid getting lost in the cyberspace Contextual links Color coding of links Using colors for visited/unvisited/active links Don ’ t mess with the convention that blue is an unvisited link Breadcrumbs: Indicate the path from the Home page to where you are 2. How to Making Web Sites Easy to Use: Some General Discussions

17. Ch 4.2 Web Usability: Web Design Concerns 17 Colored coding of links and breadcrumbs examples 2. How to Making Web Sites Easy to Use: Some General Discussions Breadcrumbs Colored coding of links

18. Ch 4.2 Web Usability: Web Design Concerns 18 Avoid getting lost in the cyberspace Contextual links Tabs showing: Where you are now Where you are now in relation to the global site 2. How to Making Web Sites Easy to Use: Some General Discussions

19. Ch 4.2 Web Usability: Web Design Concerns 19

20. Ch 4.2 Web Usability: Web Design Concerns 20 Definition Means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging. Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities 3. Web Accessibility

21. Ch 4.2 Web Usability: Web Design Concerns 21 Standards and Laws Standards & Guidelines: World Wide Web Consortium (W3C) Laws: Section 508 of Rehabilitation Act in United States 3. Web Accessibility

22. Ch 4.2 Web Usability: Web Design Concerns 22 W3C Standards W3C started in 1994 as a world wide organization of over 400 members The W3C Web Accessibility Initiative (WAI) is widely accepted as standard. 13 guidelines, 56 checkpoints 3. Web Accessibility

23. Ch 4.2 Web Usability: Web Design Concerns 23 Why? W3C effort Users may not speak or understand fluently the language in which the document is written They may be in a situation where their eyes, ears or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.) They may have an early version of a browser, a different browser entirely, a voice browser, or a different operation system Web Content Accessibility Guidelines 2.0 (WCAG 2.0) 3. Web Accessibility

24. Ch 4.2 Web Usability: Web Design Concerns 24 Why? http://www.w3.org/TR/WCAG20/ They may not be able to see, hear, move, or may not be able to process some types of information easily or at all. They may have difficulty reading or comprehending text. They may not have or be able to use a keyboard or mouse. They may have a text-only screen, a small screen, or a slow internet connection. Web Content Accessibility Guidelines 2.0 3. Web Accessibility

25. Ch 4.2 Web Usability: Web Design Concerns 25 Important New Terms Used in WCAG 2.0 “Web Unit” Web pages are the most common type of Web unit. The broader term was chosen because it covers Web applications and other types of content to which the word "page" may not apply. A Web unit is any collection of information, consisting of one or more resources, intended to be rendered together, and identified by a single Uniform Resource Identifier (such as a URL). For example, A Web page containing several images and a style sheet is a typical Web unit. Web Content Accessibility Guidelines 2.0 3. Web Accessibility

26. Ch 4.2 Web Usability: Web Design Concerns 26 The Four Principles of Accessibility Content must be perceivable Interface components in the content must be operable Content and controls must be understandable Content should be robust enough to work with current and future user agents (including assistive technologies) Web Content Accessibility Guidelines 2.0 3. Web Accessibility

27. Ch 4.2 Web Usability: Web Design Concerns 27 Guideline 1.1: Provide text alternatives for all non-text content Guideline 1.2: Provide synchronized alternatives for multimedia Guideline 1.3: Ensure that information and structure can be separated from presentation Guideline 1.4: Make it easy to distinguish foreground information from its background Web Content Accessibility Guidelines 2.0 Principle 1: Content must be perceivable 3. Web Accessibility

28. Ch 4.2 Web Usability: Web Design Concerns 28 Guideline 2.1: Make all functionality operable via a keyboard interface Guideline 2.2: Allow users to control time limits on their reading or interaction Guideline 2.3: Allow users to avoid content that could cause seizures due to photosensitivity Guideline 2.4: Provide mechanisms to help users find content, orient themselves within it, and navigate through it Guideline 2.5: Help users avoid mistakes and make it easy to correct mistakes that do occur 3. Web Accessibility Web Content Accessibility Guidelines 2.0 Principle 2: Interface components in the content must be operable

29. Ch 4.2 Web Usability: Web Design Concerns 29 Guideline 3.1: Make text content readable and understandable Guideline 3.2: Make the placement and functionality of content predictable Web Content Accessibility Guidelines 2.0 Principle 3: Content and controls must be understandable 3. Web Accessibility

30. Ch 4.2 Web Usability: Web Design Concerns 30 Guideline 4.1: Support compatibility with current and future user agents (including assistive technologies) Guideline 4.2: Ensure that content is accessible or provide an accessible alternative Web Content Accessibility Guidelines 2.0 Principle 4: Content should be robust enough to work with current and future user agents (including assistive technologies) 3. Web Accessibility

31. Ch 4.2 Web Usability: Web Design Concerns 31 Section 508 Federal IT Accessibility Initiative (FITAL) in United States In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. 3. Web Accessibility

32. Ch 4.2 Web Usability: Web Design Concerns 32 Section 508 Technical Standards for: Software Applications & OS. Web-based intranet and internet information and applications. Telecommunication products. Video and multimedia products. Self contained, closed products. Desktop and portable computers. Applies to Federal Government Institutions only, does not apply to industry yet 3. Web Accessibility

33. Ch 4.2 Web Usability: Web Design Concerns 33 Section 508 Standards 9. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply. The content of the text-only page shall be updated whenever the primary page changes. 3. Web Accessibility

34. Ch 4.2 Web Usability: Web Design Concerns 34 Text only page: examples 3. Web Accessibility Hong Kong SAR Government website

35. Ch 4.2 Web Usability: Web Design Concerns 35 Section 508 Standards 12. When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. 3. Web Accessibility

36. Ch 4.2 Web Usability: Web Design Concerns 36 Bad examples This site does not consider users with colour-blindness! 3. Web Accessibility

37. Ch 4.2 Web Usability: Web Design Concerns 37 Good examples This site is much more better as asterisks (*) have been used to indicate the text fields to be filled 3. Web Accessibility

38. Ch 4.2 Web Usability: Web Design Concerns 38 Barrier free websites E-Inclusion Campaign initiated by iProA, Internet Professional Association E-Inclusion Campaign Easy guide for building barrier free websites: Easy guide 1. Provide text description of “Top of the page” and “Close” so that disabled users know this is a new window and have a way to exit 2. Provide alternative text description, use ALT command 3. Test the colors used in web pages against a monochrome screen or a black and white printer. Ensure that a sharp contrast is displayed 4. Break down the table into smaller sections 5. Provide caption and written script available for download 3. Web Accessibility

39. Ch 4.2 Web Usability: Web Design Concerns 39 Barrier free websites Easy guide for building barrier free websites: Easy guide 6. Avoid putting two languages on the same page and allow readers to switch between languages 7. Web authors need to restrict the use of auto-refresh feature. Refresh upon user’s request only or an option to disable the auto-refresh feature 8. Do not set the font size attribute to a number of points or pixels but set it to a percentage for the default font size. 9. Provide an alternative entry point that skips the flash section 3. Web Accessibility

40. Ch 4.2 Web Usability: Web Design Concerns 40 Barrier free websites examples Hong Chi Association 3. Web Accessibility Skip movie Different languages separated in different pages Alternative text for graphics Text description showing a way to back to main page

41. Ch 4.2 Web Usability: Web Design Concerns 41

42. Ch 4.2 Web Usability: Web Design Concerns 42 References Web Accessibility, The University of Utah, website from Oct 2003 http://www.utah.edu/uwebresources/forums/10-20- 03_conference/adaov2_edited.ppt http://www.utah.edu/uwebresources/forums/10-20- 03_conference/adaov2_edited.ppt Alan Dix. Human-computer interaction Daniel D. McCracken and Rosalee J. Wolfe. User-Centered Website Development: A Human-Computer Interaction Approach Brian J. Rosmaita. Accessibility First! A New Approach to Web Design http://academics.hamilton.edu/computer_science/brosmait/talks/2 006-03-03/fp166-rosmaita.html http://academics.hamilton.edu/computer_science/brosmait/talks/2 006-03-03/fp166-rosmaita.html

43. Ch 4.2 Web Usability: Web Design Concerns 43 References Modules for Web Accessibility Training http://www.w3.org/WAI/training/ra http://www.w3.org/WAI/training/ra Carmen Mardiros, Bobby WorldWide Web Accessibility Tool - How Accessible Is Your Web Site? http://www.mardiros.net/bobby-accessibility-tool.html http://www.mardiros.net/bobby-accessibility-tool.html Various other internet resources as accompanied in the slides where they were used