Bonnes pratiques graphiques
20 j'aime•9,012 vues
Le document présente un florilège de bonnes pratiques graphiques pour optimiser l'ergonomie et l'accessibilité des designs web, en abordant des thèmes tels que les couleurs, la lisibilité typographique et la signalétique des hyperliens. Il cite plusieurs ressources et guides existants pour aider les créateurs à améliorer leurs conceptions. Ces pratiques visent à garantir que l'information est accessible et compréhensible pour tous les utilisateurs, en tenant compte de divers critères d'accessibilité.
![Contrastes et couleurs
L’information
ne doit pas
être donnée
uniquement
par la couleur
Critère Accessiweb 2.1 No 10.4 [Argent]
RGAA 2.2 test 2.1 [A]
Source : information routière Apple
http://humeursmondialisees.blogspot.fr/2012/11/les-sites-dinformation-trafic-co.html
16 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-16-320.jpg)
![Contrastes et couleurs
L’information
ne doit pas
être donnée
uniquement
par la couleur
Critère Accessiweb 2.1 No 10.4 [Argent]
RGAA 2.2 test 2.1 [A]
Source : http://wiki.accede-web.com/notices/graphique-ergonomique/
assurer-la-comprehension-de-l-information-meme-en-l-absence-de-couleurs
19 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-19-320.jpg)
![Lisibilité typographique
Pouvoir
zoomer le texte
x2
Critère Accessiweb 2.1 No 10.4 [Argent]
Test RGAA 2.2 No 7.13 [AA]
Source : http://www.voyages-sncf.com/guide/accessibilite
Améliorer l’accessibilité par la typographie : http://www.pompage.net/
traduction/ameliorer-l-accessibilite-par-la-typographie
37 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-37-320.jpg)
![Lisibilité typographique
Ne pas justifier
Critère Accessiweb 2.1 No 10.9 [Or]
Test RGAA 2.2 No 7.12 [AAA]
Le texte se justifie-t-il ?
http://www.ergologique.com/conseils/conseils.php?id_tip=818
39 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-39-320.jpg)
![Lisibilité typographique
Augmenter
l’interlignage
à 1.5
Critère Accessiweb 2.1 No 10.12 [Or]
Test RGAA 2.2 No 7.17 [AAA]
WCAG 2.0 No1.4.8 [AAA]
1.2 1.5
Source : http://www.lefigaro.fr/international/
20060906.WWW000000341_bush_prisonniers.html
Manifeste pour un interlignage minimum syndical
http://css.4design.tl/manifeste-pour-un-interlignage-minimum
40 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-40-320.jpg)
![Lisibilité typographique
60 à 80
caractères
par ligne
Critère Accessiweb 2.1 No 10.11 [Or]
WCAG 2.0 No1.4.8 [AAA]
66
Source : Enlarge your police
http://phollow.fr/2012/02/enlarge-your-police
41 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-41-320.jpg)
![Hyperliens
Le contraste
suffit-il ?
Critère Accessiweb 2.1 No 10.6.1 [Bronze]
Test RGAA 2.2 No 7.10 [A]
Un contraste suffit-il à distinguer un lien ?
http://storify.com/tetue/la-couleur-suffit-elle-a-distinguer-un-lien
Source : http://www.philippe-donnart.com/Lire-un-pdf-sur-Kindle.html
47 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-47-320.jpg)
![Hyperliens
Rendre
évident ce qui
est cliquable
Critère Accessiweb 2.1 No 10.6 [Bronze]
Test RGAA 2.2 No 7.10 [A]
Rendre évident ce qui est cliquable
http://www.ergologique.com/conseils/conseils.php?id_tip=10
Soulignez vos hyperliens ! http://romy.tetue.net/913
49 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-49-320.jpg)
![Hyperliens
Avertir du
comportement
+ Critère Accessiweb 2.1 No 6.3 [Or]
51 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-51-320.jpg)
![Hyperliens
Avertir du
comportement
Bonne pratique Opquast V2 No 120 [Niveau 2]
Critère Accessiweb 2.1 No 13.6 [Or]
52 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-52-320.jpg)
![Hyperliens
Intitulé explicite
pour chaque lien
Critère Accessiweb 2.1 No 6.1 [Bronze]
Notice AcceDe Web 4.1.1
Prévoir un intitulé explicite pour chaque lien : http://wiki.accede-web.com/
notices/graphique-ergonomique/prevoir-un-intitule-explicite-pour-chaque-
lien
54 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-54-320.jpg)
![Hyperliens
Liens explicites
hors contexte
Critère Accessiweb 2.1 No 6.1 [Bronze]
Source : http://www.kiwano.fr/ergonomie-accessibilite-site-crimes-web/
55 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-55-320.jpg)
![Hyperliens
Prévoir
tous les états
Bonne pratique Opquast V2 No 124 [Niveau 2]
+ Critère Accessiweb 2.1 No 12.12 [Or]
57 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-57-320.jpg)
![Hyperliens
Signaler
la prise de focus
Critère Accessiweb 2.1 No 10.7 [Bronze]
Source : http://www.lesintegristes.net/2009/09/13/hover-vs-active/
58 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-58-320.jpg)
![Utilisabilité des formulaires
CAPTCHA
accessible
Critères Accessiweb 2.1 No 1.4 et 1.5 [Bronze]
Bonnes pratiques Opquast V2 No 87 et 154 [Niveau 2 et 3]
Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre-
avis.html
67 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-67-320.jpg)
![Utilisabilité des formulaires
Signaler les
champs
obligatoires
de manière
pertinente
Critère Accessiweb 2.1 No 11.10 [Bronze]
71 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012](https://image.slidesharecdn.com/crea11y-parisweb2012-130120135404-phpapp02/85/Bonnes-pratiques-graphiques-71-320.jpg)
Bonnes pratiques graphiques
- 1. Petit florilège de bonnes pratiques graphiques pour améliorer l’ergonomique et l’accessibilité de vos conceptions web par Romy Duhem-Verdière Atelier Paris Web 2012
- 2. De quoi dispose-t-on ? Amis créas, à quelles guidelines vous fiez-vous ? http://romy.tetue.net/921 2 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 3. Ressources existantes Les 12 règles de l'ergonomie web Le livre Ergonomie web : http://ergonomie-sites-web.com 3 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 4. Ressources existantes Bonnes pratiques Voir en ligne : https://checklists.opquast.com/fr/opquastv2?q=design 4 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 5. Ressources existantes Référentiel Accessiweb 2.1 Voir en ligne : http://www.accessiweb.org/index.php/accessiweb_2.1_liste_generale 5 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 6. Ressources existantes Notice d'accessibilité pour la conception graphique Voir en ligne : http://wiki.accede-web.com/notices/graphique- ergonomique 6 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 7. • Couleurs et contrastes • Lisibilité typographique • Signalétique des hyperliens • Utilisabilité des formulaires 7 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 8. Contrastes et couleurs 8 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 9. Contrastes et couleurs Source : http://awesome-fontstacks.com/404 9 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 10. Contrastes et couleurs 10 % de la population masculine est daltonienne Source : http://www.coloradd.net/why.asp 10 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 12. Source : http://www.pomodorospizza.net Outil : http://colororacle.cartography.ch
- 13. Source : http://www.pomodorospizza.net Outil : http://colororacle.cartography.ch
- 14. Source : http://www.pomodorospizza.net Outil : http://colororacle.cartography.ch
- 15. Contrastes et couleurs Source : information routière Google Maps http://humeursmondialisees.blogspot.fr/2012/11/les-sites-dinformation-trafic-co.html 15 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 16. Contrastes et couleurs L’information ne doit pas être donnée uniquement par la couleur Critère Accessiweb 2.1 No 10.4 [Argent] RGAA 2.2 test 2.1 [A] Source : information routière Apple http://humeursmondialisees.blogspot.fr/2012/11/les-sites-dinformation-trafic-co.html 16 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 17. Contrastes et couleurs Test d’Ishihara : http://www.declic.ph/depistage.asp?iddepistage=21 17 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 18. Contrastes et couleurs Source : http://wiki.accede-web.com/notices/graphique-ergonomique/ assurer-la-comprehension-de-l-information-meme-en-l-absence-de-couleurs 18 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 19. Contrastes et couleurs L’information ne doit pas être donnée uniquement par la couleur Critère Accessiweb 2.1 No 10.4 [Argent] RGAA 2.2 test 2.1 [A] Source : http://wiki.accede-web.com/notices/graphique-ergonomique/ assurer-la-comprehension-de-l-information-meme-en-l-absence-de-couleurs 19 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 20. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check 20 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 21. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check 21 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 22. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check 22 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 23. Contrastes et couleurs Source : http://www.dondorganes.fr 23 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 24. Contrastes et couleurs Proposer une alternative contrastée Source : http://www.dondorganes.fr/?rgaa=1 Assurer un contraste suffisant entre les contenus et l'arrière-plan ou proposer une alternative contrastée 24 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 25. Lisibilité typographique 25 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 26. Lisibilité typographique UN GENDARME TUE 26 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 27. Lisibilité typographique Accentuer les majuscules UN GENDARME TUÉ Lexique des règles typographiques en usage à l’Imprimerie nationale, page 12 Notice AcceDeWeb No 6.1 WCAG 2.0 No 3.1 Accentuez les lettres capitales et majuscules : http://www.tentatives- accessibles.eu/182-accentuer-les-lettres-majuscules Orthographe et accessibilité : http://www.nota-bene.org/509 27 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 28. Lisibilité typographique Caractères spéciaux Microsoft Windows Voir : alt-codes.net 28 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 29. Lisibilité typographique LE BAOBAB AFRICAIN EST UN ARBRE À LA LONGÉVITÉ EXCEPTIONNELLE, SURTOUT PRÉSENT AU SENEGAL. D'UNE CROISSANCE LENTE, ON TROUVE DES SPÉCIMENS QUI SERAIENT ÂGÉS DE PRÈS DE 2000 ANS. EN FAIT, CES ARBRES NE PRODUISENT PAS DE CERNES TOUS LES ANS DU FAIT DES SÉCHERESSES RÉCURRENTES QUI TOUCHENT LA SAVANE AFRICAINE, IL EST DONC DIFFICILE DE DÉTERMINER LEUR ÂGE PAR DES MÉTHODES DE DENDROCHRONOLOGIE. 29 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 30. Lisibilité typographique Le baobab africain est un arbre à la longévité exceptionnelle, surtout présent Éviter les au Sénégal. D’une croissance lente, on majuscules trouve des spécimens qui seraient âgés de pas plus de près de 2000 ans. En fait, ces arbres ne 5 mots successifs produisent pas de cernes tous les dans du en majuscules fait des sécheresses récurrentes qui touchent la savane africaine. Il est donc difficile de déterminer leur âge par des méthodes de dendrochronologie. Des minuscules sinon rien http://www.graphemes.com/enews/41/41minuscule.html 30 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 31. Lisibilité typographique Préférer une fonte conçue pour l’écran CSS Typography: The Basics http://sixrevisions.com/css/css-typography-01/ Stop Arial 11px ! http://romy.tetue.net/stop-arial-11px 31 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 32. Lisibilité typographique Prévoir des polices de substitution font-family: 'StempelGaramondW01-Ital'; font-family: 'StempelGaramondW01-Ital', Garamond, Georgia, serif; Le site Garamond maltraite la typo http://romy.tetue.net/865 32 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 33. Lisibilité typographique Prévoir une « Font Stack » complète font-family: Book Antiqua, Courier New, Georgia; Source : http://www.gitton.net/fr/1-chroniques-injustes/29-facebook- espace-public-ou-priver-.html ? 33 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 34. Lisibilité typographique Prévoir une 1 2 3 « Font Stack » complète et cohérente Arial Revised Font Stack http://www.awayback.com/revised-font-stack/ 34 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 35. Lisibilité typographique Laisser le texte 16px 11pt à 100 % Relative readability, by Wilson Miner, 2008 http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/ 35 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 36. Lisibilité typographique 16px/ 16px/ 1.5 1.5 Laisser le texte 100 % 16px/ 16px/ à 20px 1.5 1.6em/ 14pt/ 1.5 21pt Lisibilité des sites web, font-size : 100% – 16px : http://all-for-design.com/web- design/lisibilite-des-sites-web-font-size-100-16px/ 16px/ 16px/ 36 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 37. Lisibilité typographique Pouvoir zoomer le texte x2 Critère Accessiweb 2.1 No 10.4 [Argent] Test RGAA 2.2 No 7.13 [AA] Source : http://www.voyages-sncf.com/guide/accessibilite Améliorer l’accessibilité par la typographie : http://www.pompage.net/ traduction/ameliorer-l-accessibilite-par-la-typographie 37 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 38. Lisibilité typographique Source : http://www.nota-bene.org/916 38 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 39. Lisibilité typographique Ne pas justifier Critère Accessiweb 2.1 No 10.9 [Or] Test RGAA 2.2 No 7.12 [AAA] Le texte se justifie-t-il ? http://www.ergologique.com/conseils/conseils.php?id_tip=818 39 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 40. Lisibilité typographique Augmenter l’interlignage à 1.5 Critère Accessiweb 2.1 No 10.12 [Or] Test RGAA 2.2 No 7.17 [AAA] WCAG 2.0 No1.4.8 [AAA] 1.2 1.5 Source : http://www.lefigaro.fr/international/ 20060906.WWW000000341_bush_prisonniers.html Manifeste pour un interlignage minimum syndical http://css.4design.tl/manifeste-pour-un-interlignage-minimum 40 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 41. Lisibilité typographique 60 à 80 caractères par ligne Critère Accessiweb 2.1 No 10.11 [Or] WCAG 2.0 No1.4.8 [AAA] 66 Source : Enlarge your police http://phollow.fr/2012/02/enlarge-your-police 41 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 42. Lisibilité typographique Laisser 25 % à 50 % d’espace « blanc » sur chaque page Aérer l’information : http://www.ergologique.com/conseils/conseils.php?id_tip=17 Webdesign : difficile de vendre du vide, et pourtant… http://blog.axe-net.fr/webdesign-difficile-de-vendre-du-vide/ 42 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 43. Lisibilité typographique Aérer facilite la compréhension Source : http://www.ojr.org/ojr/stories/070312ruel/ 43 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 44. Lisibilité typographique Aérer facilite la compréhension Source : http://www.ojr.org/ojr/stories/070312ruel/ 44 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 45. Lisibilité typographique Web Design is 95% Typography : http://informationarchitects.net/blog/the- web-is-all-about-typography-period/ 45 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 46. Signalétique des hyperliens 46 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 47. Hyperliens Le contraste suffit-il ? Critère Accessiweb 2.1 No 10.6.1 [Bronze] Test RGAA 2.2 No 7.10 [A] Un contraste suffit-il à distinguer un lien ? http://storify.com/tetue/la-couleur-suffit-elle-a-distinguer-un-lien Source : http://www.philippe-donnart.com/Lire-un-pdf-sur-Kindle.html 47 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 48. Hyperliens Combien identifiez-vous de liens sur cette page ? Source : http://www.bouygues.com/developpement-durable/axes- strategiques/environnemental/strategie-carbone/ 48 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 49. Hyperliens Rendre évident ce qui est cliquable Critère Accessiweb 2.1 No 10.6 [Bronze] Test RGAA 2.2 No 7.10 [A] Rendre évident ce qui est cliquable http://www.ergologique.com/conseils/conseils.php?id_tip=10 Soulignez vos hyperliens ! http://romy.tetue.net/913 49 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 50. Hyperliens Source : http://www.info-meningocoque.fr/mentions-legales.html 50 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 51. Hyperliens Avertir du comportement + Critère Accessiweb 2.1 No 6.3 [Or] 51 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 52. Hyperliens Avertir du comportement Bonne pratique Opquast V2 No 120 [Niveau 2] Critère Accessiweb 2.1 No 13.6 [Or] 52 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 53. Hyperliens Source : http://www.fr.capgemini.com 53 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 54. Hyperliens Intitulé explicite pour chaque lien Critère Accessiweb 2.1 No 6.1 [Bronze] Notice AcceDe Web 4.1.1 Prévoir un intitulé explicite pour chaque lien : http://wiki.accede-web.com/ notices/graphique-ergonomique/prevoir-un-intitule-explicite-pour-chaque- lien 54 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 55. Hyperliens Liens explicites hors contexte Critère Accessiweb 2.1 No 6.1 [Bronze] Source : http://www.kiwano.fr/ergonomie-accessibilite-site-crimes-web/ 55 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 56. Hyperliens Prévoir tous les états 56 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 57. Hyperliens Prévoir tous les états Bonne pratique Opquast V2 No 124 [Niveau 2] + Critère Accessiweb 2.1 No 12.12 [Or] 57 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 58. Hyperliens Signaler la prise de focus Critère Accessiweb 2.1 No 10.7 [Bronze] Source : http://www.lesintegristes.net/2009/09/13/hover-vs-active/ 58 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 59. Hyperliens Prévoir tous les états Signaler le focus améliore la navigation : http://romy.tetue.net/678 59 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 60. Utilisabilité des formulaires 60 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 61. Utilisabilité des formulaires Comment utiliser ce… formulaire ? Source : http://plumka.com/html/fr/index.asp 61 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 62. Utilisabilité des formulaires 62 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 63. Utilisabilité des formulaires 63 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 64. Utilisabilité des formulaires Source : http://www.smashingmagazine.com 64 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 65. Utilisabilité des formulaires ? Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre- avis.html 65 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 66. Utilisabilité des formulaires Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre- avis.html 66 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 67. Utilisabilité des formulaires CAPTCHA accessible Critères Accessiweb 2.1 No 1.4 et 1.5 [Bronze] Bonnes pratiques Opquast V2 No 87 et 154 [Niveau 2 et 3] Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre- avis.html 67 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 68. Utilisabilité des formulaires Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre- avis.html 68 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 69. Utilisabilité des formulaires Les champs rouges sont obligatoires (2007) : http://www.blog- accessibilite.com/blog/2007/01/10/155-boursorama-les-champs-rouges- sont-obligatoires 69 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 70. Utilisabilité des formulaires Les champs rouges sont obligatoires (2007) : http://www.blog- accessibilite.com/blog/2007/01/10/155-boursorama-les-champs-rouges- sont-obligatoires 70 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 71. Utilisabilité des formulaires Signaler les champs obligatoires de manière pertinente Critère Accessiweb 2.1 No 11.10 [Bronze] 71 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 72. Utilisabilité des formulaires 72 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 73. Utilisabilité des formulaires ? 73 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 74. Utilisabilité des formulaires 74 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 75. Utilisabilité des formulaires Source : http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee 75 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 76. Utilisabilité des formulaires Signaler les erreurs de manière pertinente Source : http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee 76 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 77. Utilisabilité des formulaires Prévoir tous les cas 77 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
- 78. Merci ! Merci à Didier Lebouc, à Delphine Malassigne, et à Jonathan Pansiot, Hugues Moreno et Morgane Mounier d’Alter Way. Romy Duhem-Verdière http://romy.tetue.net @tetue Voir en ligne : http://romy.tetue.net/930 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012