Usability and Accessibility in Web Site Design

1. � 2004 the University of Greenwich 1 Usability and Accessibility in Web Site Design Dr Kevin McManus Adapted from material by Gill Windall

2. � 2004 the University of Greenwich 2 Thinking Allowed What do people hate about websites? Is designing the interface of a web site different from designing the interface of other software? What aspects of design should be considered? Users - who are they and what do they want? Do all web sites have the same aims?

3. � 2004 the University of Greenwich 3

4. � 2004 the University of Greenwich 4 What do people hate about web sites?

5. � 2004 the University of Greenwich 5 Is designing the interface of a web site different from designing the interface of other software? Yes and no What factors might be different? What factors might be the same?

6. � 2004 the University of Greenwich 6

7. � 2004 the University of Greenwich 7 Five Aspects of Design to Consider Navigation Multimedia content Textual content Interaction Accessibility Technical aspects Human aspects

8. � 2004 the University of Greenwich 8 Navigation Where am I? Where can I get to? How do I get there? How do I get back? Where's the thing I want - now?

9. � 2004 the University of Greenwich 9 Navigation Aids Navigation bars Site maps Frames (not allowed in XHTML strict) Related links (people who bought this book also ..) Searching (is Google the answer to navigation?) Breadcrumbs Home > Products > Clothes > Shoes > Sneakers How do users usually get to a particular web page? What navigation aids do you find most useful? Are users actually interested in navigation?

10. � 2004 the University of Greenwich 10 Multimedia content Download times getting better with flash and streamed content everyone has broadband these days Animations hard to ignore, even when you want to Splash screens or would the user rather get straight to the content? Decoration - information or distraction?

11. � 2004 the University of Greenwich 11

12. � 2004 the University of Greenwich 12 Textual content Most web content is still written text. Most people don't read web pages they scan them (Morkes and Nielsen) Text needs to be Spill chucked and poof red? (must be correct my spill chukka didn't complain!) Concise and precise Physically easy to read colour scheme fonts background layout Appropriate for an international audience?

13. � 2004 the University of Greenwich 13 Interaction Nobody likes clicking apart from perhaps hyperactive small children So reduce clicks where you can broad and shallow is better than narrow and deep Fitts' Law� the time to acquire a target is a function of the distance to and the size of the target

14. � 2004 the University of Greenwich 14 fitts.html

15. � 2004 the University of Greenwich 15 Accessibility Technical aspects (how systems vary) different browsers need for special plug-ins different machine capabilities (e.g. screen resolution, processor speed) connection speeds Human aspects (how people vary) range of computer experience disabilities preferences/needs language and culture

16. � 2004 the University of Greenwich 16

17. � 2004 the University of Greenwich 17 Human Factors Visual disabilities lack of screen reader compatibility unlabeled graphics and video, poor labelling of tables & frames poor user style support Hearing disabilities: lack of captioning for audio Physical or motor disabilities: lack of keyboard support for menu commands Cognitive or neurological disabilities: lack of consistent navigation structure overly complex presentation or language flickering or flashing designs on pages

18. � 2004 the University of Greenwich 18 Web Accessibility Initiative (WAI) The WAI, in coordination with organisations around the world, pursues accessibility of the Web through five primary areas of work technology guidelines tools education and outreach research and development Web Content Accessibility Guidelines (WCAG) 1.0 published in 1999

19. � 2004 the University of Greenwich 19 WCAG 1.0 Guidelines cover 14 areas of interest Provide equivalent alternatives to auditory and visual content Don't rely on colour alone Use markup and style sheets and do so properly Clarify natural language usage Create tables that transform gracefully Ensure that pages featuring new technologies transform gracefully Ensure user control of time-sensitive content changes Ensure direct accessibility of embedded user interfaces Design for device-independence Use interim solutions Use W3C technologies and guidelines Provide context and orientation information Provide clear navigation mechanisms Ensure that documents are clear and simple

20. � 2004 the University of Greenwich 20 WCAG Priorities Priority 1 - A Must satisfy these requirements, otherwise it will be impossible for one or more groups to access the Web content Priority 2 - AA Should satisfy these requirements, otherwise some groups will find it difficult to access the Web content Priority 3 - AAA May satisfy these requirements, in order to make it easier for some groups to access the Web content

21. � 2004 the University of Greenwich 21 e.g. Guideline Checkpoints5. Create tables that transform gracefully 5.1 For data tables, identify row and column headers. [Priority 1] For example, in HTML, use TD to identify data cells and TH to identify headers. 5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1] For example, in HTML, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data. 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2] Note. Once user agents support style sheet positioning, tables should not be used for layout. 5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority 2] For example, in HTML do not use the TH element to cause the content of a (non-table header) cell to be displayed centered and in bold. 5.5 Provide summaries for tables. [Priority 3] For example, in HTML, use the "summary" attribute of the TABLE element. 5.6 Provide abbreviations for header labels. [Priority 3] For example, in HTML, use the "abbr" attribute on the TH element.

22. � 2004 the University of Greenwich 22 Quick Tips to Make Accessible Web Sites For Complete Guidelines & Checklist: http://www.w3.org/WAI Images & animations Use the alt attribute to describe the function of each visual Image maps Use client-side MAP and text for hotspots Multimedia Provide captioning and transcripts of audio, and descriptions of video Hypertext links Use text that makes sense when read out of context. For example, avoid "click here."

23. � 2004 the University of Greenwich 23 Quick Tips to Make Accessible Web Sites Page organization Use headings, lists, and consistent structure Use CSS for layout and style where possible Graphs & charts Summarize or use the longdesc attribute Scripts, applets, & plug-ins Provide alternative content in case active features are inaccessible or unsupported Frames Use NOFRAMES and meaningful titles Tables Make line by line reading sensible, no nesting Check your work Validate. Use tools, checklist, and guidelines at www.w3.org/TR/WCAG10 and www.w3.org/TR/WCAG20

24. � 2004 the University of Greenwich 24 WCAG 2.0 Website accessibility has been given serious consideration for many years before the WWW penetrated all corners of society Has become an increasingly hot topic especially since the rise of the silver surfers and... Representative groups for the disabled tend to be a highly vocal minority many criticisms of WCAG 1.0 were voiced WCAG 2.0 working draft 2001 heavily criticised 12 working drafts later addressing over 3000 issues still under review until 2nd December 2008

25. � 2004 the University of Greenwich 25 Section 508 1998 the US Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities Section 508 was enacted to eliminate barriers in information technology to make available new opportunities for people with disabilities, to encourage development of technologies that will help achieve these goals Has led to development of very useful guidelines

26. � 2004 the University of Greenwich 26 Disability Discrimination Act 1995 Championed by the RNIB the main part of the DDA requiring websites to be accessible came into force on 1 October 1999 updated in 2005 to require compliance from employers and service providers previously exempt from the Act such as the police and small employers Requires websites to have links which are accessible to a screen reader PDF forms that can be read by a screen reader The size of text, colour contrasting and formatting of a website to be accessible to a partially sighted job person public information (e.g. transport timetables) must be in a format accessible to screen readers online retailers must not excluding people from making purchases on their website

27. � 2004 the University of Greenwich 27 Accessibility Tools The original and best tool was Bobby by CAST this was bought by Watchfire and integrated into WebXact then bought by IBM and incorporated into Rational Step 1 choose a sensible DOCTYPE and use a markup validator http://validator.cms.gre.ac.uk Step 2 use a decent WCAG and 508 validator tool WAVE from webAIM AccVerify from HiSoftware Accessibility Check from Etre Step 3 tools cannot automate all checks perform manual checks

28. � 2004 the University of Greenwich 28 Who are users and what do they want? We are all web users, so some concerns are likely to be very common (e.g. download speeds) but we also differ: experience and skill age how we're connected to the web time available cultural background learning style needs preferences

29. � 2004 the University of Greenwich 29

30. � 2004 the University of Greenwich 30 Who are users and what do they want? A web site and its users may have different goals e.g. (based on Fleming 1998)

31. � 2004 the University of Greenwich 31 Who are users and what do they want? What will happen if the site forces its goals on the user? How can you see things from your users' point of view? Think about who they are children, parents, teachers, etc. Think about how to deal with multiple groups Imagine what they want and need - use scenarios Ask them (surveys etc) Read up what others have said Test your site Use techniques from traditional HCI (e.g. heuristic evaluation)

32. � 2004 the University of Greenwich 32 Do all web sites have the same aims? Obviously not!!! Some different types of site (Fleming 1998): Shopping Community - sharing an interest, interacting with people with a similar interest Entertainment Identity - presenting a corporate (or personal) identity on the web Learning - teaching something via the web Information - providing access to a large amount of information for reference purposes For each type, the user will have goals and the site will have goals. Need to design to match site's goals with user's goals so that both get what they want.

33. � 2004 the University of Greenwich 33 Web Science

34. � 2004 the University of Greenwich 34 Summary It is very easy to create obstacles to usability and drive away our hard won customers We do not create accessible websites because we are good people we do it because it is required by law it improves usability

35. � 2004 the University of Greenwich 35 Books "Web Navigation - Designing the User Experience�, Jennifer Fleming, O'Reilly, 1998 "Web Design in a Nutshell�, Jennifer Niederst, O'Reilly, 1998 - more technically than usability oriented but lots of useful information & tips "Designing Web Usability�, Jakob Nielsen, New Riders, 1999 - excellent but expensive book

36. � 2004 the University of Greenwich 36 Web Resources Usable Information Technology (Jakob Nielsen) http://www.useit.com Usability First - a guide to usability resources http://usabilityfirst.com/ W3C's Web Accessibility Initiative (WAI) http://www.w3.org/WAI/ WebAIM - expanding the web's potential for people with disabilities http://www.webaim.org home of the WAVE accessibility evaluation tool

37. � 2004 the University of Greenwich 37 Any Questions?