Your SlideShare is downloading. ×
0
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upa Conference Loic Nunez 18 June2008
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Upa Conference Loic Nunez 18 June2008

564

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
564
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ergonomics & Accessibility : WCAG 1.0 checkpoints illustrated by Bastien-Scapin’s ergonomics criteria Loïc Nunez June, 2008 – UPA Conference
  • 2. Summary Speaker Use cases Merging WCAG 1.0 & Scapin-Bastien's criteria An extended approach to website auditing Questions & Answers <ul><li>- </li></ul>
  • 3. Summary <ul><li>Loïc NUNEZ User experience group Manager, TechSolCom Member of AccessibilitéWeb Msc. in Cognitive Ergonomics Msc. in Social Psychology Certified Accessibility Expert </li></ul><ul><li>l </li></ul><ul><li>l </li></ul><ul><li>l </li></ul><ul><li>l </li></ul>
  • 4. Summary Speaker Use cases Merging WCAG 1.0 & Scapin-Bastien's criteria An extended approach to website auditing Questions & Answers <ul><li>- </li></ul>
  • 5. Before presenting use cases What does Web Accessibiity mean? <ul><li>Web Accessibility means that people with disabilities can use the Web (WAI) </li></ul><ul><li>The W3C , in 1999, had edited a list of 65 criteria, separated in 3 levels: </li></ul>
  • 6. Use Case 1/7 Positioning content <ul><li>Situation The price does not appear when users zoom the page </li></ul>Magnified by 5 Best Practice Always closely group call to action with pertinent information
  • 7. Use Case 2/7 Three level menu <ul><li>Situation The reader is overwhelmed by too many levels in the menu </li></ul>Best Practice Limit menu to two levels
  • 8. Use Case 3/7 Contrasts <ul><li>Situation The contrast level defeats the purpose of the call to action </li></ul>Best Practice Simply increase contrast
  • 9. Use Case 3/7 Contrasts <ul><li>Situation The contrast level defeats the purpose of the call to actions </li></ul>Best Practice Provide a tool with choice of backgrounds
  • 10. Use Case 4/7 Fonts size <ul><li>Situation Users may have difficulty </li></ul><ul><li>r eading content due to font size </li></ul>Best Practice Include a font size tool
  • 11. Use Case 5/7 Collapsed list <ul><li>Situation Too many users miss this type of pull down menu </li></ul>Best Practice Clearly identify the collopsed list
  • 12. Use Case 6/7 Long texts <ul><li>Situation Long texts are difficult to read on a web page, and even more so when users zoom the page </li></ul>Best Practice Provide columns for long texts Magnified by 5
  • 13. Use Case 7/7 <ul><li>- </li></ul>Methodology Findings Top 200 accessible Web sites of 2007 in Quebec Online study http://www.accessibiliteweb.com/projets/evaluations/triennale-2007/en/ The assessment followed the level AA A sample of 3 pages were considered: Home page, landing page and page with tables or forms The most popular Canadian Web sites were selected The assessment combined automatic, semi-automatic and manual evaluations
  • 14. Use Case 7/7 <ul><li>- </li></ul>Methodology Findings Top 200 accessible Web sites of 2007 in Quebec Online study http://www.accessibiliteweb.com/projets/evaluations/triennale-2007/en/ Only 15% of Web sites assessed had an acceptable Web accessibility level. This study means that 85% of Web sites probably do not cater to the needs of your target audience  Developing accessible Web sites help everyone of us to be a better citizen
  • 15. Summary Speaker Use cases Merging WCAG 1.0 & Scapin-Bastien's criteria An extended approach to website auditing Questions & Answers <ul><li>- </li></ul>
  • 16. Merged WCAG 1.0 & Bastien-Scapin's criteria <ul><li>Guidance User Guidance refers to the means available to advise, orient, inform, instruct, and guide the users throughout their interactions with a computer </li></ul>Guidance User Guidance refers to the means available to advise, orient, inform, instruct, and guide the users throughout their interactions with a computer Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012 Guidance
  • 17. Merged WCAG 1.0 & Bastien-Scapin's criteria Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012 Guidance Workload Workload The Workload criterion concerns all interface elements that play a role in the reduction of the users’ perceptual or cognitive load, and in the increase of the dialogue efficiency. This criterion is subdivided into two criteria: - Brevity - Information Density.
  • 18. Merged WCAG 1.0 & Bastien-Scapin's criteria <ul><li>Explicit Control The criterion Explicit Control concerns both the system processing of explicit user actions, and the control users have on the processing of their actions by the system. </li></ul>This criterion is subdivided into two criteria: - Explicit User Action - User Control. Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012 Guidance Workload Explicit Control
  • 19. Merged WCAG 1.0 & Bastien-Scapin's criteria <ul><li>Adaptability </li></ul><ul><li>The adaptability of a system refers to its capacity to behave contextually and according to the users’ needs and preferences. </li></ul>The criterion Adaptability is subdivided into two criteria: - Flexibility - User Experience . Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012 Guidance Workload Explicit Control Adaptability
  • 20. Merged WCAG 1.0 & Bastien-Scapin's criteria <ul><li>Error Management </li></ul><ul><li>The Error Management criterion refers to the means available to prevent or reduce errors and to recover from them when they occur. Errors are defined in this context as invalid data entry, invalid format for data entry, incorrect command syntax, etc. </li></ul>This criterion is subdivided into three criteria: - Error Protection - Quality of Error Messages - Error Correction . Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012 Guidance Workload Explicit Control Adaptability Error Management
  • 21. Merged WCAG 1.0 & Bastien-Scapin's criteria <ul><li>Consistency </li></ul><ul><li>The Consistency criterion refers to the way interface design choices (codes, naming, formats, procedures, etc.) are maintained in similar contexts, and are different when applied to different contexts. </li></ul>Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012 Guidance Workload Explicit Control Adaptability Error Management Consistency
  • 22. Merged WCAG 1.0 & Bastien-Scapin's criteria <ul><li>Significance of codes </li></ul><ul><li>The Significance of Codes criterion qualifies the relationship between a term and/or a sign and its reference. Codes and names are significant to the users when there is a strong semantic relationship between such codes and the items or actions they refer to. </li></ul>Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012 Guidance Workload Explicit Control Adaptability Error Management Consistency Significance of codes
  • 23. Merged WCAG 1.0 & Bastien-Scapin's criteria <ul><li>Compatibility </li></ul><ul><li>The Compatibility criterion refers to the match between users’ characteristics (memory, perceptions, customs, skills, age, expectations, etc.) and task characteristics on the one hand, and the organisation of the output, input, and dialogue for a given application, on the other hand. This criterion also concerns the coherence between environments and between applications. </li></ul>Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012 Guidance Workload Explicit Control Adaptability Error Management Consistency Significance of codes Compatibility
  • 24. Merged WCAG 1.0 & Bastien-Scapin's criteria <ul><li>Accessibility directives & how they relate to usability principles </li></ul><ul><ul><li>WCAG 1.0 rules and checkpoints reorganized </li></ul></ul><ul><ul><li>WCAG 1.0 checkpoints classified by themes </li></ul></ul>Ergonomic Criteria for the Evaluation of Human-Computer Interfaces http://hal.inria.fr/inria-00070012
  • 25. WCAG 1.0 themes Structure Structure Such as : Semantic information to pages and sites (title tag), header elements to convey document structure (h1 to h6), etc. Merged with Bastien-Scapin’s criteria Guidance &Consistency accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 26. WCAG 1.0 themes Textual Equivalents Structure Textual Equivalent Such as: Providing text equivalent for every non-text element like   images, imagemaps, animations, etc. (in the form of alt, title or   longdesc attributes), etc. Merged with Bastien-Scapin’s criteria Consistency accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 27. WCAG 1.0 themes Multimedia Content Textual Equivalents Structure Multimedia Content Such as: Providing text equivalent for every non-text element like   animations, video, audio, applets, downloadable documents, etc. (with   appropriate means), etc. Merged with Bastien-Scapin’s criteria Consistency accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 28. WCAG 1.0 themes Forms Multimedia Content Textual Equivalents Structure Forms Such as: Creating explicit associations between labels and form   controls, dividing large blocks of information into more manageable   groups, etc. Merged with Bastien-Scapin’s criteria Guidance, Explicit Control, Error Management & Significance of codes accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 29. WCAG 1.0 themes Tables Forms Multimedia Content Textual Equivalents Structure Tables Such as: Identifying row and column headers for data tables,   associating data cells and header cells with proper markup, not using   tables for layout unless the table makes sense when linearized, etc. Merged with Bastien-Scapin’s criteria Guidance, Workload, Adaptability & Significance of codes accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 30. WCAG 1.0 themes Page Layout Tables Forms Multimedia Content Textual Equivalents Structure Page Layout Such as: Using CSS to control layout and presentation, organizing   documents so they may be read without CSS, ensuring that all   information conveyed with color is also available without color, etc. Merged with Bastien-Scapin’s criteria Adaptability accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 31. WCAG 1.0 themes accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/ Validation Page Layout Tables Forms Multimedia Content Textual Equivalents Structure Validation Such as: Creating documents that validate to published formal   grammars, avoiding deprecated features of W3C technologies, etc. Merged with Bastien-Scapin’s criteria N ̸ A
  • 32. WCAG 1.0 themes Interactivity Validation Page Layout Tables Forms Multimedia Content Textual Equivalents Structure Interactivity Such as: Ensuring that pages are usable when scripts, applets, or   other programmatic objects are turned off or not supported, ensuring   that equivalents for dynamic content are updated when the dynamic   content changes, etc. Merged with Bastien-Scapin’s criteria Guidance, Consistency & Compatibility accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 33. WCAG 1.0 themes Navigation Interactivity Validation Page Layout Tables Forms Multimedia Content Textual Equivalents Structure Navigation Such as: Using navigation mechanisms in a consistent manner, not   using markup to redirect pages automatically, not creating   periodically auto-refreshing pages, etc. Merged with Bastien-Scapin’s criteria Guidance, Workload & Consistency accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 34. WCAG 1.0 themes Comprehension Navigation Interactivity Validation Page Layout Tables Forms Multimedia Content Textual Equivalents Structure Comprehension Such as: Using the clearest and simplest language appropriate for a   site's content, clearly identifying changes in the natural language of   a document's text and any text equivalents, etc. Merged with Bastien-Scapin’s criteria Workload & Significance of codes accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 35. WCAG 1.0 themes Frames Comprehension Navigation Interactivity Validation Page Layout Tables Forms Multimedia Content Textual Equivalents Structure Frames Such as: Titling each frame to facilitate frame identification and   navigation, describing the purpose of frames and how frames relate to   each other if it is not obvious by frame titles alone, etc. Merged with Bastien-Scapin’s criteria Explicit Control accessibiliteweb.org (FR) http://www.accessibiliteweb.org/bdc/directives/theme/
  • 36. Merged summary of criteria & themes relationship Guidance Workload Explicit Control Adaptability Error Management Consistency Significance of codes Compatibility Structure – Forms –Tables – Links – Colors – Interactivity - Navigation Forms – Tables – Multimedia content – Navigation - Comprehension Interactivity – Multimedia content – Forms - Frames Tables – Page Layout –Multimedia content Forms – User controls Structure – Text equivalent – Interactivity – Navigation - Colors Forms – Tables - Comprehension Multimedia content – Interactivity Bastien-Scapin’s criteria WCAG 1.0 Themes
  • 37. Summary Speaker Use cases Merging WCAG 1.0 & Scapin-Bastien's criteria An extended approach to website auditing Questions & Answers <ul><li>- </li></ul>
  • 38. An extended approach to Website auditing <ul><li>Conduct an ergonomics audit based on Scapin-Bastien's criteria </li></ul><ul><li>Conduct an accessibility audit based on the WCAG 1.0 checkpoints </li></ul><ul><li>Integrate the results of both analysis in one referential document </li></ul><ul><li>Make   recommendations on the ergonomics quality of a website,   including technical qualities related to accessibility checkpoints   that are not related to ergonomics (CSS validation, alts attributes, etc.)‏ </li></ul><ul><li>Plan user testing with specific participants: disabilities, senior,   young and all relevant target audiences </li></ul><ul><li>Compile expert analysis and user testing results in order to propose   realistic, applicable improvement solutions that answer to the users‘ needs and meet their capabilities in regards to the application or   website. </li></ul>
  • 39. Summary Speaker Use cases Merging WCAG 1.0 & Scapin-Bastien's criteria An extended approach to websaite auditing Questions & Answers <ul><li>- </li></ul>
  • 40. Questions & Answers <ul><li>Thank you for your attention. Any questions? </li></ul>Patrice DOONAN Coaching www.snickersdoonan.com <ul><li>Thanks to: </li></ul><ul><li> Lucile VERRECCHIA </li></ul><ul><li> Design presentation </li></ul><ul><li> http:// lucile.verrecchia.free.fr </li></ul><ul><li> [email_address] </li></ul><ul><ul><li>Denis BOUDREAU </li></ul></ul><ul><ul><li>AccessibilitéWeb case study </li></ul></ul><ul><ul><li>www.accessibiliteweb.org </li></ul></ul>

×