Utilisabilité et Accessibilité au Web 
Utilisabilité  <ul><li>Utilisabilite est l'étude de la facilité avec laquelle les gens peuvent utiliser un outil particuli...
navigation sur le site Web  <ul><li>Vous devez offrir de recherche + navigation </li></ul><ul><li>Le contenu doit être pla...
Conventions utilisées dans la navigation  Where am I How we got here Site logo “ utilities” sections Simple search + instr...
Page d'accueil - ce qu'elle doit contenir  <ul><li>Logo + tag line </li></ul><ul><li>Sections/classification </li></ul><ul...
Page d'accueil - objectifs  <ul><li>Montre a l’utilisateur ce qu’il recherche </li></ul><ul><li>Offre des alternatives (no...
logo tagline search navigation Dynamic content sections commercials Welcome  What it offers teasing
Quels éléments pouvez-vous identifier 
Accessibilité  <ul><li>Web Content Accessibility Guidelines (WCAG) 2.0 définit la façon de rendre le contenu Web plus acce...
Introduction <ul><li>environ 160 millions de personnes ont une forme de handicap visuel  </li></ul><ul><li>Environ 40 mill...
Guides for accessible web sites <ul><li>Web Accessibility Initiative  –   Le groupe de travail W3C pour améliorer l'access...
Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus  <ul><li>Tout le contenu non-texte doit a...
Examples <ul><li>Image with an associated explanation </li></ul><ul><li>Video with  explanations </li></ul>
Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus  <ul><li>Le contenu de la page devrait ma...
Examples <ul><li>Le * ne signifie pas pour tout le monde que les champs sont obligatoires  </li></ul><ul><li><img src=&quo...
 
Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus  <ul><li>Le contenu doit être facile à co...
Examples <ul><li>test  pour identifier la perception correcte des couleurs  </li></ul><ul><li>L'utilisation de couleurs po...
Objectif n °. 2: Les composants de la page doit être facile a actionner  <ul><li>Toutes les fonctionnalités devraient être...
Examples <ul><li>Flash peut être mis en œuvre en utilisant le <blink> ou comme des objets Flash ou GIF, ...   </li></ul><u...
Objectif n °. 2: Les composants de la page doit pouvoir être actionnés  <ul><li>Les utilisateurs doivent être autorisés à ...
Examples <ul><li>How to avoid a repeating component </li></ul><ul><li>titres explicites   Précisez la section </li></ul><u...
Objectif n °. 3 L'interface et le contenu de la page doivent être compréhensibles  <ul><li>Les utilisateurs devraient être...
Examples <ul><li>Éviter / corriger les erreurs  </li></ul><ul><ul><li>Eviter et corriger les erreurs  </li></ul></ul><ul><...
Conclusions <ul><li>Lorsque nous développons une page web, nous devons prendre soin non seulement sur que la page fonction...
References <ul><li>Web Content Accessibility Guidelines 2.0  – W3C working draft </li></ul><ul><li>Accessible Web Design E...
A propos de l'examen  <ul><li>75 minutes </li></ul><ul><li>Vous avez la possibilite de venir avec 1 A4 qui peut contenir s...
A propos de l'examen <ul><li>Si votre page de documentation n'est pas selon les règles ci-dessus, il sera confisqué, sans ...
About the exam <ul><li>The exam does not repeat this session </li></ul><ul><li>If you fail you will have to take it again ...
Prochain SlideShare
Chargement dans…5
×

utilisabilite et accessibilite au web

4 087 vues

Publié le

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
4 087
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 796
Actions
Partages
0
Téléchargements
20
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

utilisabilite et accessibilite au web

  1. 1. Utilisabilité et Accessibilité au Web 
  2. 2. Utilisabilité  <ul><li>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 </li></ul><ul><li>Une application web doit fonctionner et doit être utilisable </li></ul><ul><li>  Il ya beaucoup de livres sur le sujet - nous avons que le temps de présenter quelques trucs </li></ul>
  3. 3. navigation sur le site Web  <ul><li>Vous devez offrir de recherche + navigation </li></ul><ul><li>Le contenu doit être placé dans une hiérarchie / classification </li></ul><ul><li>L'utilisateur doit savoir où il se trouve dans le site Web  </li></ul><ul><li>L'utilisateur doit savoir comment il est arrive dans la page </li></ul><ul><li>Navigation dans le contenu et dans les options du site </li></ul>
  4. 4. Conventions utilisées dans la navigation  Where am I How we got here Site logo “ utilities” sections Simple search + instructions + options
  5. 5. Page d'accueil - ce qu'elle doit contenir  <ul><li>Logo + tag line </li></ul><ul><li>Sections/classification </li></ul><ul><li>Recherche  </li></ul><ul><li>Teasing (des choses intéressantes qui peuvent être trouvées sur le site web)  </li></ul><ul><li>Du contenu dynamique  </li></ul><ul><li>[publicite] </li></ul><ul><li>Raccourcis - des liens vers les pages les plus visitées  </li></ul><ul><li>[inscription] </li></ul>
  6. 6. Page d'accueil - objectifs  <ul><li>Montre a l’utilisateur ce qu’il recherche </li></ul><ul><li>Offre des alternatives (nous ne proposons pas seulement ce que l'utilisateur veut, mais aussi quelque chose de plus)  </li></ul><ul><li>Montre comment commencer à utiliser votre site web </li></ul><ul><li>Montre crédibilité et confiance  </li></ul>
  7. 7. logo tagline search navigation Dynamic content sections commercials Welcome What it offers teasing
  8. 8. Quels éléments pouvez-vous identifier 
  9. 9. Accessibilité  <ul><li>Web Content Accessibility Guidelines (WCAG) 2.0 définit la façon de rendre le contenu Web plus accessible aux personnes handicapées.  </li></ul><ul><li>L'accessibilité implique un large éventail de handicaps, y compris visuelles, auditives, physiques, de la parole, cognitif, langagier, l'apprentissage et des troubles neurologiques.  </li></ul><ul><li>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.  </li></ul>
  10. 10. Introduction <ul><li>environ 160 millions de personnes ont une forme de handicap visuel  </li></ul><ul><li>Environ 40 millions de personnes sont aveugles  </li></ul><ul><li>Il existe des outils qui permettent aux personnes ayant une déficience visuelle à utiliser l'ordinateur et l'internet </li></ul><ul><li>Il ya des gens souffrant d'autres handicaps que l'utilisation des différents types d'outils </li></ul><ul><li>Il ya des gens souffrant d'autres handicaps qui l'utilise des différents types d'outils  </li></ul>
  11. 11. Guides for accessible web sites <ul><li>Web Accessibility Initiative –  Le groupe de travail W3C pour améliorer l'accessibilité du Web  </li></ul><ul><li>Web Content Accessibility Guidelines 1.0 –  paru en 1999 - édité par le W3C  </li></ul><ul><li>Web Content Accessibility Guidelines 2 .0 – paru en 2008  </li></ul><ul><li>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)  </li></ul>
  12. 12. Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus  <ul><li>Tout le contenu non-texte doit avoir un texte alternatif  </li></ul><ul><ul><li>Pour une image nous pouvons spécifier un texte alternatif qui décrit l'image (<img alt=&quot;description&quot;> ..)  </li></ul></ul><ul><ul><li>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.  </li></ul></ul><ul><ul><li>Les objets multimédia (audio-vidéo) devrait être associé à des textes qui expliquent le contenu  </li></ul></ul>
  13. 13. Examples <ul><li>Image with an associated explanation </li></ul><ul><li>Video with explanations </li></ul>
  14. 14. Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus  <ul><li>Le contenu de la page devrait maintenir l'importance lors du changement de présentation  </li></ul><ul><li>Comprendre les relations entre les éléments du contenu de ces liens par des éléments graphiques  </li></ul><ul><li>S'assurer que le texte de la page est lue dans un ordre correct  </li></ul><ul><li>Les instructions sur comment faire fonctionner une page ne doit pas être fondée exclusivement sur des symboles graphiques  </li></ul><ul><ul><li>ex: les flèches qui marquent la page suivante sont expliqués avec le texte  </li></ul></ul>
  15. 15. Examples <ul><li>Le * ne signifie pas pour tout le monde que les champs sont obligatoires  </li></ul><ul><li><img src=&quot;../graphics/fback.gif&quot; alt=&quot;Previous chapter&quot; border=&quot;0&quot;> </li></ul><ul><li>Utilisez &quot;tabindex&quot; pour spécifier l'ordre dans lequel les éléments d'une page doit être « lu »  </li></ul>
  16. 17. Objectif n ° 1: l'information et des éléments de l'interface doivent être perçus  <ul><li>Le contenu doit être facile à comprendre par la séparation du premier plan à l'arrière-plan  </li></ul><ul><ul><li>La couleur ne doit pas être le seul moyen par lequel une information est offerte.  </li></ul></ul><ul><ul><li>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  </li></ul></ul>
  17. 18. Examples <ul><li>test pour identifier la perception correcte des couleurs  </li></ul><ul><li>L'utilisation de couleurs pour les messages d'erreur doivent être expliqué  </li></ul>
  18. 19. Objectif n °. 2: Les composants de la page doit être facile a actionner  <ul><li>Toutes les fonctionnalités devraient être accessibles à partir du clavier  </li></ul><ul><li>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 </li></ul><ul><li>L'utilisateur doit avoir suffisamment de temps pour lire le contenu de la page  </li></ul><ul><ul><li>Il devrait être en mesure d'arrêter ou de régler une minuterie éventuelle  </li></ul></ul><ul><li>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 ) </li></ul>
  19. 20. Examples <ul><li>Flash peut être mis en œuvre en utilisant le <blink> ou comme des objets Flash ou GIF, ...  </li></ul><ul><li>Les menus flash ne peuvent généralement pas être contrôlée en utilisant uniquement le clavier  </li></ul><ul><li>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 ) </li></ul>
  20. 21. Objectif n °. 2: Les composants de la page doit pouvoir être actionnés  <ul><li>Les utilisateurs doivent être autorisés à sauter par-dessus le texte que de le répéter à chaque page  </li></ul><ul><li>Les pages doivent avoir des titres explicites  </li></ul><ul><li>Les composants d'une page doit obtenir focus dans un ordre intelligible  </li></ul>
  21. 22. Examples <ul><li>How to avoid a repeating component </li></ul><ul><li>titres explicites  Précisez la section </li></ul><ul><ul><li>Ne pas utiliser le même titre pour chaque page  </li></ul></ul><ul><li>tabindex permet de spécifier l'ordre de navigation  </li></ul>
  22. 23. Objectif n °. 3 L'interface et le contenu de la page doivent être compréhensibles  <ul><li>Les utilisateurs devraient être permis d'éviter ou de corriger les erreurs dans l'utilisation de l'interface  </li></ul><ul><li>Utilisez des étiquettes ou des instructions quand vous avez besoin de données de l'utilisateur  </li></ul>
  23. 24. Examples <ul><li>Éviter / corriger les erreurs  </li></ul><ul><ul><li>Eviter et corriger les erreurs  </li></ul></ul><ul><ul><li>Correction des erreurs (incomplète)  </li></ul></ul><ul><li>Les étiquettes et les instructions - le format correct des données d'entrée  </li></ul>
  24. 25. Conclusions <ul><li>Lorsque nous développons une page web, nous devons prendre soin non seulement sur que la page fonctionne correctement, mais aussi sur la  </li></ul><ul><ul><li>Utilisabilité  </li></ul></ul><ul><ul><li>Accessibilité  </li></ul></ul><ul><li>Pensez quelles personnes sont plus susceptibles d'utiliser votre page web  </li></ul><ul><li>Connaître les normes et recommandations existantes  </li></ul>
  25. 26. References <ul><li>Web Content Accessibility Guidelines 2.0 – W3C working draft </li></ul><ul><li>Accessible Web Design Examples </li></ul><ul><li>Web Content Accessibility Guidelines 1.0 </li></ul><ul><li>See the links inside the presentation </li></ul>
  26. 27. A propos de l'examen  <ul><li>75 minutes </li></ul><ul><li>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 </li></ul><ul><li>La page A4 ne doit pas contenir des exemples complets de code </li></ul><ul><li>Vous ne serez pas autorisé à échanger ces pages lors de l'examen  </li></ul>
  27. 28. A propos de l'examen <ul><li>Si votre page de documentation n'est pas selon les règles ci-dessus, il sera confisqué, sans droit de le remplacer  </li></ul><ul><li>L'examen consistera en   </li></ul><ul><ul><li>3-5 questions théoriques (max 5 lignes pour la réponse) </li></ul></ul><ul><ul><li>des questions pratiques </li></ul></ul><ul><ul><ul><li>Mettre en œuvre une fonctionnalité décrite dans une image </li></ul></ul></ul><ul><ul><ul><li>Valider certaines entrées dans un formulaire  </li></ul></ul></ul><ul><ul><ul><li>Comment est affiché un élément HTML étant donné une entrée CSS  </li></ul></ul></ul>
  28. 29. About the exam <ul><li>The exam does not repeat this session </li></ul><ul><li>If you fail you will have to take it again in september </li></ul><ul><li>Any attempt of cheating will be severely punished (automatically failing the subject+ proposal of expulsion from the faculty) </li></ul><ul><li>In order to pass you need to score at least 50% of the exam points </li></ul>

×