29
Utilisabilité et Accessibilité au Web

utilisabilite et accessibilite au web

Embed Size (px)

Citation preview

Page 1: utilisabilite et accessibilite au web

Utilisabilité et Accessibilité au Web 

Page 2: utilisabilite et accessibilite au web

Utilisabilité 

• Utilisabilite est l'étude de la facilité avec laquelle les gens peuvent utiliser un outil particulier ou tout autre objet par l'homme afin d'atteindre un objectif particulier

• Une application web doit fonctionner et doit être utilisable

•  Il ya beaucoup de livres sur le sujet - nous avons que le temps de présenter quelques trucs

Page 3: utilisabilite et accessibilite au web

navigation sur le site Web • Vous devez offrir de recherche + navigation• Le contenu doit être placé dans une

hiérarchie / classification• L'utilisateur doit savoir où il se trouve dans le

site Web • L'utilisateur doit savoir comment il est arrive

dans la page • Navigation dans le contenu et dans les

options du site

Page 4: utilisabilite et accessibilite au web

Conventions utilisées dans la navigation 

Where am I How we got here

Site logo

“utilities”sections

Simple search + instructions + options

Page 5: utilisabilite et accessibilite au web

Page d'accueil - ce qu'elle doit contenir 

• Logo + tag line• Sections/classification

• Recherche • Teasing (des choses intéressantes qui

peuvent être trouvées sur le site web) • Du contenu dynamique • [publicite]

• Raccourcis - des liens vers les pages les plus visitées 

• [inscription]

Page 6: utilisabilite et accessibilite au web

Page d'accueil - objectifs 

• Montre a l’utilisateur ce qu’il recherche

• Offre des alternatives (nous ne proposons pas seulement ce que l'utilisateur veut, mais aussi quelque chose de plus) 

• Montre comment commencer à utiliser votre site web

• Montre crédibilité et confiance 

Page 7: utilisabilite et accessibilite au web

logo

tagline

searchnavigation

Dynamic content

sections

commercials

Welcome What it offers

teasing

Page 8: utilisabilite et accessibilite au web

Quels éléments pouvez-vous identifier 

Page 9: utilisabilite et accessibilite au web

Accessibilité • Web Content Accessibility Guidelines (WCAG) 2.0

définit la façon de rendre le contenu Web plus accessible aux personnes handicapées. 

• L'accessibilité implique un large éventail de handicaps, y compris visuelles, auditives, physiques, de la parole, cognitif, langagier, l'apprentissage et des troubles neurologiques. 

• Ces lignes directrices sont doivent rendre le contenu Web plus utilisable par les personnes âgées et, souvent, d'améliorer la utilisabilite pour les utilisateurs en général. 

Page 10: utilisabilite et accessibilite au web

Introduction

• environ 160 millions de personnes ont une forme de handicap visuel 

• Environ 40 millions de personnes sont aveugles • Il existe des outils qui permettent aux personnes

ayant une déficience visuelle à utiliser l'ordinateur et l'internet

• Il ya des gens souffrant d'autres handicaps que l'utilisation des différents types d'outils

• Il ya des gens souffrant d'autres handicaps qui l'utilise des différents types d'outils 

Page 11: utilisabilite et accessibilite au web

Guides for accessible web sites

• Web Accessibility Initiative –  Le groupe de travail W3C pour améliorer l'accessibilité du Web 

• Web Content Accessibility Guidelines 1.0 –  paru en 1999 - édité par le W3C 

• Web Content Accessibility Guidelines 2.0 – paru en 2008 

• Les instructions présentées dans ces guides sont regroupés selon les caractéristiques qui ils s'adressent, et chaque instruction a une priorité (niveau 1 ou A étant le plus important) 

Page 12: utilisabilite et accessibilite au web

Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus 

• Tout le contenu non-texte doit avoir un texte alternatif  – Pour une image nous pouvons spécifier un texte

alternatif qui décrit l'image (<img alt="description"> ..)  – Si un son a une signification spécifique (c'est à dire

qu'il annonce qu'une erreur s'est produite), il doit être accompagné d'un texte expliquant. 

– Les objets multimédia (audio-vidéo) devrait être associé à des textes qui expliquent le contenu 

Page 13: utilisabilite et accessibilite au web

Examples

• Image with an associated explanation

• Video with explanations

Page 14: utilisabilite et accessibilite au web

Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus 

• Le contenu de la page devrait maintenir l'importance lors du changement de présentation 

• Comprendre les relations entre les éléments du contenu de ces liens par des éléments graphiques 

• S'assurer que le texte de la page est lue dans un ordre correct 

• Les instructions sur comment faire fonctionner une page ne doit pas être fondée exclusivement sur des symboles graphiques – ex: les flèches qui marquent la page suivante sont

expliqués avec le texte 

Page 15: utilisabilite et accessibilite au web

Examples

• Le * ne signifie pas pour tout le monde que les champs sont obligatoires 

• <img src="../graphics/fback.gif" alt="Previous chapter" border="0">

• Utilisez "tabindex" pour spécifier l'ordre dans lequel les éléments d'une page doit être « lu » 

Page 16: utilisabilite et accessibilite au web
Page 17: utilisabilite et accessibilite au web

Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus 

• Le contenu doit être facile à comprendre par la séparation du premier plan à l'arrière-plan – La couleur ne doit pas être le seul moyen par lequel

une information est offerte. – Il devrait y avoir un moyen d'arrêter le son en

arrière-plan d'une page afin de ne pas chevaucher le son de l'écran-lecteur 

Page 18: utilisabilite et accessibilite au web

Examples

• test pour identifier la perception correcte des couleurs • L'utilisation de couleurs pour les messages d'erreur

doivent être expliqué 

Page 19: utilisabilite et accessibilite au web

Objectif n °. 2: Les composants de la page doit être facile a actionner 

• Toutes les fonctionnalités devraient être accessibles à partir du clavier 

• Si pour la navigation de page sont mis en oeuvre des caractéristiques non-standard (autre que Tab et les flèches), l'utilisateur doit être averti

• L'utilisateur doit avoir suffisamment de temps pour lire le contenu de la page  – Il devrait être en mesure d'arrêter ou de régler une

minuterie éventuelle  • Dans une page, il ne devrait pas être clignote

(flashes) car ils peuvent provoquer des convulsions (see . http://www.w3.org/TR/2007/WD-WCAG20-20071211/#general-thresholddef)

Page 20: utilisabilite et accessibilite au web

Examples

• Flash peut être mis en œuvre en utilisant le <blink> ou comme des objets Flash ou GIF, ... 

• Les menus flash ne peuvent généralement pas être contrôlée en utilisant uniquement le clavier 

• Certains sites Web pour e-banking permet très courtes sessions de travail dans lequel les utilisateurs ayant un handicap ne peut pas finir à «lire» l'information (ex: www.brdoffice.ro) (ex: www.brdoffice.ro)

Page 21: utilisabilite et accessibilite au web

Objectif n °. 2: Les composants de la page doit pouvoir être actionnés 

• Les utilisateurs doivent être autorisés à sauter par-dessus le texte que de le répéter à chaque page 

• Les pages doivent avoir des titres explicites 

• Les composants d'une page doit obtenir focus dans un ordre intelligible 

Page 22: utilisabilite et accessibilite au web

Examples

• How to avoid a repeating component

• titres explicites  Précisez la section– Ne pas utiliser le même titre pour chaque page 

• tabindex permet de spécifier l'ordre de navigation 

Page 23: utilisabilite et accessibilite au web

Objectif n °. 3 L'interface et le contenu de la page doivent être compréhensibles 

• Les utilisateurs devraient être permis d'éviter ou de corriger les erreurs dans l'utilisation de l'interface 

• Utilisez des étiquettes ou des instructions quand vous avez besoin de données de l'utilisateur 

Page 24: utilisabilite et accessibilite au web

Examples

• Éviter / corriger les erreurs – Eviter et corriger les erreurs – Correction des erreurs (incomplète) 

• Les étiquettes et les instructions - le format correct des données d'entrée 

Page 25: utilisabilite et accessibilite au web

Conclusions

• Lorsque nous développons une page web, nous devons prendre soin non seulement sur que la page fonctionne correctement, mais aussi sur la  – Utilisabilité – Accessibilité 

• Pensez quelles personnes sont plus susceptibles d'utiliser votre page web 

• Connaître les normes et recommandations existantes 

Page 26: utilisabilite et accessibilite au web

References

• Web Content Accessibility Guidelines 2.0 – W3C working draft

• Accessible Web Design Examples• Web Content Accessibility Guidelines 1.0• See the links inside the presentation

Page 27: utilisabilite et accessibilite au web

A propos de l'examen 

• 75 minutes• Vous avez la possibilite de venir avec 1 A4

qui peut contenir seulement des descriptions des éléments HTML ou CSS ou des proprietes des objets Javascript

• La page A4 ne doit pas contenir des exemples complets de code

• Vous ne serez pas autorisé à échanger ces pages lors de l'examen 

Page 28: utilisabilite et accessibilite au web

A propos de l'examen

• Si votre page de documentation n'est pas selon les règles ci-dessus, il sera confisqué, sans droit de le remplacer 

• L'examen consistera en – 3-5 questions théoriques (max 5 lignes pour la réponse)– des questions pratiques

• Mettre en œuvre une fonctionnalité décrite dans une image

• Valider certaines entrées dans un formulaire • Comment est affiché un élément HTML étant donné

une entrée CSS 

Page 29: utilisabilite et accessibilite au web

About the exam

• The exam does not repeat this session• If you fail you will have to take it again in

september• Any attempt of cheating will be severely

punished (automatically failing the subject+ proposal of expulsion from the faculty)

• In order to pass you need to score at least 50% of the exam points