usability and accessibility © 2014 the university of greenwich1 usability and accessibility in web...

© 2014 the University of Greenwich 1

Usability and Accessibility

Usability and Accessibility in Web Site Design

Dr Kevin McManushttp://staffweb.cms.gre.ac.uk/~mk05/web/usability/



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?



“Getting people to your site in the first place: that's what the advertising budget is for.

Making people stay on your site and convert them from one-time visitors to regular users: that's what the usability budget is for.

Internet start-ups typically spend 300 times as much money on advertising as they spend on usability.”

Jakob Nielsen - web site design expert, some time last century

See alsoNielsen, J. (2008) Usability ROI Declining, But Still Strong, Nielsen Norman Group,

http://www.nngroup.com/articles/usability-roi-declining-but-still-strong/



What do people hate about web sites?



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?

supermarket checkout

spreadsheet

cash machine

video recorder

accounting software

game



“They say, ‘When I design a web page, I try to consider the way most people will probably be using it.’”

This makes web sites unique? I'm speechless.

Scott Butler from Rockwell Software

See alsoNielsen, J. (1997) The Difference Between Web Design and GUI Design,

Nielsen Norman Group http://www.useit.com/alertbox/9705a.html



Five Aspects of Design to Consider

• Navigation

• Multimedia content

• Textual content

• Interaction

• Accessibility• Technical aspects• Human aspects



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?



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?



Multimedia content• Download times

• getting better with streamed content• as opposed to download and play content• everyone has broadband these days

• Animations• hard to ignore, even when you want to

• Splash screens• so last century

• surely the user would prefer to get straight to the content?

• Decoration• information or distraction?



“Macromedia says Flash is…

‘the solution for producing and delivering high-impact web sites.’

It's also a solution for making your site highly annoying and downright unusable.”

Ragus, D (1999) Flash is Evil, Dack Consulting, http://www.dack.com/web/flash_evil.html



Textual content• Most web content is still written text.

• Most people don't read web pages• they scan them

• Nielsen, J. (1997) How Users Read on the Web, NNG

• Nielsen, J. (1997) Why Web Users Scan Instead of Reading, NNG

• Morkes, J., Nielsen, J. (1998) Applying writing guidelines to Web pages, Proc. Conference on Human Factors in Computing Systems pp 321-322, ACM

• Text needs to be• Spill cheked and prof 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?



Interaction

• Nobody likes clicking• apart from hyperactive small children

• Reduce clicks wherever you can• broad and shallow is generally 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

† Fitts, Paul M. (1954). The information capacity of the human motor system in controlling the amplitude ofmovement. Journal of Experimental Psychology, volume 47, number 6, June 1954, pp. 381-391



fitts.html



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



“Design for diversity, or expect to succeed with only a very narrow market.”

Usability First Glossary, Foraker Labs http://www.usabilityfirst.com/glossary/diversity/

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee, Web Accessibility Initiative http://www.w3.org/WAI/



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



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



WCAG 1.0Guidelines cover 14 areas of interest

1. Provide equivalent alternatives to auditory and visual content2. Don't rely on colour alone3. Use markup and style sheets and do so properly4. Clarify natural language usage5. Create tables that transform gracefully6. Ensure that pages featuring new technologies transform

gracefully7. Ensure user control of time-sensitive content changes8. Ensure direct accessibility of embedded user interfaces9. Design for device-independence10. Use interim solutions11. Use W3C technologies and guidelines12. Provide context and orientation information13. Provide clear navigation mechanisms14. Ensure that documents are clear and simple



WCAG Priorities

Priority 1 - AMust satisfy these requirements, otherwise it will be impossible for one or more groups to access the Web content

Priority 2 - AAShould satisfy these requirements, otherwise some groups will find it difficult to access the Web content

Priority 3 - AAAMay satisfy these requirements, in order to make it easier for some groups to access the Web content

Each guideline includes a range of checkpoints that are expressed as a range of priorities



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.



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."



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



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 people living with disability tend to be a highly vocal minority• many criticisms of WCAG 1.0 were raised

• WCAG 2.0 working draft 2001 heavily criticised• 12 working drafts later

• addressing over 3000 issues• remained review until 2nd December 2008



WCAG 2.0• WCAG 2.0 takes a different approach to WCAG 1.0 with 4 categories of

interest and no focus on specific technologies such as HTML

• Perceivable• Provide text alternatives for non-text content• Provide captions and other alternatives for multimedia• Create content that can be presented in different ways, including by assistive technologies,

without losing meaning• Make it easier for users to see and hear content

• Operable• Make all functionality available from a keyboard• Give users enough time to read and use content• Do not use content that causes seizures• Help users navigate and find content.

• Understandable• Make text readable and understandable• Make content appear and operate in predictable ways• Help users avoid and correct mistakes.

• Robust• Maximize compatibility with current and future user tools



Legal Compliance• Businesses with an online presence are required by law provide

access to users with disability• not just because there ethical and commercial justifications

• On 27th January 2012, the RNIB served legal proceedings against low-cost airline bmibaby over their ‘failure to ensure web access for blind and partially sighted customers’ • to date, at a number of actions have been initiated by the RNIB, and all

settled out of court

• The landmark 2010/2012 Jodhan decision caused the Canadian Federal government to require that all online content meets the accessibility requirements of WCAG 2.0

• The Australian Government has mandated that all of its websites meet the WCAG accessibility requirements• http://webguide.gov.au/accessibility-usability/accessibility/

• It is anticipated that all nations will require legal compliance• But what with?



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



Equality Act 2010• EU + UK legislation• The Act is 'anticipatory‘

• you cannot wait until a disabled person wants to use your services, you must think in advance about what disabled people might reasonably need

• For instance, it may be unlawful for a website to• have Web links on that are not accessible to a screen reader

• or have forms in a PDF format that cannot be read by a screen reader

• have service information not in a format accessible to screen readers• for instance, timetables on a public transport website

• use colour contrasting and formatting of text making it difficult for a partially sighted user to read

• change security procedures without considering the impact of blind and partially sighted customers that use screen readers

• for instance requiring a CAPTCHA



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



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



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



“Do not do unto others as you would they should do unto you. Their tastes may not be the same.”

George Bernard Shaw

“It's not rocket science. It's social science.”

Clement Mok - design Guru




• A web site and its users may have different goals e.g. (based on Fleming 1998)

Site User

Wants to make money Wants to get good value and buy securely

Wants to find out about its customers

Wants to maintain privacy

Wants to offload 6,000 overstocked copies of Shania

Twain’s latest CD

Wants to buy Charlie Farley and the Electric Rusks' new CD




• 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 and so on

• Read up what others have said• Evaluate your site• Use techniques from traditional HCI

• e.g. heuristic evaluation



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



Web Science

http://webscience.org/



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



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



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



Any Questions?

usability and accessibility © 2014 the university of greenwich1 usability and accessibility in web...

Documents