40
June 2008 – UPA Conference Loic Nunez Loïc Nunez June, 2008 – UPA Conference Ergonomics & Accessibility : WCAG 1.0 checkpoints illustrated by Bastien-Scapin’s ergonomics criteria

Upa Conference Loic Nunez 18 June2008

Embed Size (px)

Citation preview

Page 1: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Loïc Nunez

June, 2008 – UPA Conference

Ergonomics & Accessibility :WCAG 1.0 checkpoints illustrated by Bastien-Scapin’s ergonomics criteria

Page 2: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

- Speaker

Use cases

Merging WCAG 1.0 & Scapin-Bastien's criteria

An extended approach to website auditing

Questions & Answers

Summary

Page 3: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Summary

l

l

l

l

Loïc NUNEZUser experience group Manager, TechSolCom

Member of AccessibilitéWeb

Msc. in Cognitive Ergonomics

Msc. in Social Psychology

Certified Accessibility Expert

Page 4: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

-

Speaker

Use cases

Merging WCAG 1.0 & Scapin-Bastien's criteria

An extended approach to website auditing

Questions & Answers

Summary

Page 5: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Before presenting use cases What does Web Accessibiity mean?

• Web Accessibility means that people with disabilities can use the Web (WAI)

• The W3C , in 1999, had edited a list of 65 criteria, separated in 3 levels:

Page 6: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Use Case 1/7 Positioning content

Situation The price does not appear when users zoom the page

Magnified by 5

Best PracticeAlways closely group call to action with pertinent information

Page 7: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Use Case 2/7 Three level menu

Situation The reader is overwhelmed by too many levels in the menu

Best PracticeLimit menu to two levels

Page 8: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Use Case 3/7 Contrasts

Situation The contrast level defeats the purpose of the call to action

Best PracticeSimply increase contrast

Page 9: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Use Case 3/7 Contrasts

Situation The contrast level defeats the purpose of the call to actions

Best PracticeProvide a tool with choice of backgrounds

Page 10: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Use Case 4/7 Fonts size

Situation Users may have difficultyreading content due to font size

Best PracticeInclude a font size tool

Page 11: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Use Case 5/7 Collapsed list

Situation Too many users miss this type of pull down menu

Best PracticeClearly identify the collopsed list

Page 12: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Use Case 6/7 Long texts

Situation Long texts are difficult to read on a web page, and even more so when users zoom the page

Best PracticeProvide columns for long texts

Magnified by 5

Page 13: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

- Methodology

Findings

Use Case 7/7 Top 200 accessible Web sites of 2007 in Quebec

Online studyhttp://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

Page 14: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

-Methodology

Findings

Use Case 7/7 Top 200 accessible Web sites of 2007 in Quebec

Online studyhttp://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

Page 15: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

-

Summary

Speaker

Use cases

Merging WCAG 1.0 & Scapin-Bastien's criteria

An extended approach to website auditing

Questions & Answers

Page 16: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

Guidance User Guidance refers to the means available to advise, orient, inform, instruct, and guide the users throughout their interactions with a computer

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 ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Guidance

Page 17: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

Ergonomic Criteria for the Evaluation ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Guidance

WorkloadWorkload

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.

Page 18: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

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.

This criterion is subdivided into two criteria: - Explicit User Action - User Control.

Ergonomic Criteria for the Evaluation ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Guidance

Workload

Explicit Control

Page 19: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

Adaptability

The adaptability of a system refers to its capacity to behave contextually and according to the users’ needs and preferences.

The criterion Adaptability is subdivided into two criteria: - Flexibility - User Experience.

Ergonomic Criteria for the Evaluation ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Guidance

Workload

Explicit Control

Adaptability

Page 20: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

Error Management 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.

This criterion is subdivided into three criteria: - Error Protection - Quality of Error Messages - Error Correction.

Ergonomic Criteria for the Evaluation ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Guidance

Workload

Explicit Control

Adaptability

Error Management

Page 21: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

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

Ergonomic Criteria for the Evaluation ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Guidance

Workload

Explicit Control

Adaptability

Error Management

Consistency

Page 22: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

Significance of codes

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.

Ergonomic Criteria for the Evaluation ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Guidance

Workload

Explicit Control

Adaptability

Error Management

Consistency

Significance of codes

Page 23: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

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

Ergonomic Criteria for the Evaluation ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Guidance

Workload

Explicit Control

Adaptability

Error Management

Consistency

Significance of codes

Compatibility

Page 24: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Merged WCAG 1.0 & Bastien-Scapin's criteria

Accessibility directives & how they relate to usability principles

– WCAG 1.0 rules and checkpoints reorganized– WCAG 1.0 checkpoints classified by themes

Ergonomic Criteria for the Evaluation ofHuman-Computer Interfaces

http://hal.inria.fr/inria-00070012

Page 25: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

WCAG 1.0 themesStructure 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/

Page 26: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

WCAG 1.0 themesTextual 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/

Page 27: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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/

Page 28: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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/

Page 29: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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/

Page 30: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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/

Page 31: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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

Page 32: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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/

Page 33: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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/

Page 34: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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/

Page 35: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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/

Page 36: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

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

Page 37: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

-

Summary

Speaker

Use cases

Merging WCAG 1.0 & Scapin-Bastien's criteria

An extended approach to website auditing

Questions & Answers

Page 38: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

An extended approach to Website auditing• Conduct an ergonomics audit based on Scapin-Bastien's criteria• Conduct an accessibility audit based on the WCAG 1.0 checkpoints• Integrate the results of both analysis in one referential document• 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.)

• Plan user testing with specific participants: disabilities, senior,  young and all relevant target audiences

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

Page 39: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

-

Summary

Speaker

Use cases

Merging WCAG 1.0 & Scapin-Bastien's criteria

An extended approach to websaite auditing

Questions & Answers

Page 40: Upa Conference Loic Nunez 18 June2008

June 2008 – UPA Conference

Loic Nunez

Questions & AnswersThank you for your attention. Any questions?Thank you for your attention. Any questions?

Patrice DOONAN Coachingwww.snickersdoonan.com

Thanks to: Lucile VERRECCHIA Design presentation http://lucile.verrecchia.free.fr [email protected]

Denis BOUDREAU AccessibilitéWeb case studywww.accessibiliteweb.org