1. Référencement & utilisabilité : des objectifs différents, des méthodes qui convergent Sébastien Billard, consultant référencement

3. HTML 5 ne sera pas abordé, car non finalisé.

5. Accessibilité web : ensembles des techniques visant à assurer l’accès aux contenus web pour les personnes handicapées.

7. La trouvabilité dans les moteurs participe à une bonne utilisabilité générale du web (efficacité, efficience, satisfaction).

10. « Fournissez un équivalent textuel à chaque élément non textuel (1.1) »

12. L’attribut alt permet d’associer du texte aux images, qui sera pris en compte par les moteurs, aussi bien pour la recherche web que la recherche d’images.

13. L’attribut longdesc permet d’associer à une image une page de description, mais il est ignoré des moteurs. Préférer une légende dans ce cas.L’attribut alt est déterminant pour la visibilité des images

16. Scripts et applets : les balises <noscript>, <noembed>, le contenu alternatif des balises <object> sont bien pris en compte par les moteurs.

17. Frames : le contenu des balises <noframe> est bien pris en compte par les moteurs (mais utiliser les frames pose d’autres problèmes…)

19. « Fournissez des liens textes redondants pour chaque région d’une carte cliquable côté serveur (1.2) » « Fournissez des liens textes redondants pour chaque région d’une carte cliquable côté client (1.5) »

21. Les images maps coté client sont accessibles aux moteurs de recherche, mais les liens n’ont pas d’ancres. Les attributs alt sont nécessaires pour donner de la pertinence aux liens.Les liens href sont suivis et le contenu des attributs alt pris en compte Les moteurs ne cliquent pas…

22. « Utilisez des balises plutôt que des images pour transmettre l’information (3.1) »

24. Exploitez les possibilités typographique des CSS.

25. Utilisez des techniques accessibles de remplacement de textes (sIFR).

26. Commentez les contenus graphiques.Exemples de remplacement dynamique de textes

27. « Créez des documents valides (3.2) »

29. La validité n’est pas liée à la pertinence.

30. La validité n’est pas l’accessibilité.

33. CSS permet toutefois d’alléger les pages et d’accélerer leur chargement, ce qui est favorable à une bonne indexation.

36. Le contenu des balises <h1> à <h6> et des balises <b> et <strong> en particulier se voit reconnaître une importance particulière.

39. Mais les tableaux de mise en page mal utilisés peuvent obscurcir le contenu, pour les moteurs comme pour les visiteurs.

40. L’imbrication (des tables dans des tables dans des tables dans…) est potentiellement la plus destructrice.Linéarisation « Ceci une phrase est » Imbrication

41. « Assurez-vous que les pages restent utilisables quand les scripts, applets etc sont désactivés (6.3) »

43. Sans contenu alternatif, un site Flash est un site vide pour un moteur.

45. « N'utilisez pas des balises pour rediriger les pages automatiquement. Utilisez des redirections coté serveur (7.5) »

49. Les moteurs considèrent les intitulé (ancres) des liens comme un signal. Il est donc important d’y faire figurer des mots-clés.La page Adobe ne contient pas l’expression « click here »…

50. « Fournissez des meta-données pour ajouter de l’information sémantique aux pages et aux sites . (13.2) »

52. Les balises meta ne comptent plus pour le positionnement. Mais le contenu de la balise <meta> description peut être affiché dans les résultats des moteurs.

59. Certains référenceurs pensent que le contenu placé haut dans le code aurait un poids plus fort que le contenu placé plus bas. Mais la question fait débat.

61. Les mots-clés visés doivent apparaître dès les premières phrases : cela est bon pour les utilisateurs comme pour les moteursBalise <title> INFORMATION PRINCIPALE (reprise dans <title>) Titre Principal 5W+2H Chapô DÉVELOPPEMENT DE L'INFORMATION PRINCIPALE Paragraphes Sous-titres INFORMATIONS DE MOINDRE IMPORTANCE Paragraphes Pied de page

62. « Utilisez le langage le plus clair et le plus simple possible adapté au contenu de votre site (14.1) »

64. Un langage clair, explicite permet une meilleure visibilité dans les moteurs.Rachète ? Autorise ? Progiciels ? Logiciels ?

65. Voir comme un robot (ou comme certains utilisateurs)

66. Vérifier l’accessibilité technique : Lynx URL du lien actif Lien actif Ouvrir une URL : "g" Activer des liens : "↓" et "↑" Défiler : "espace" Cliquer : "entrée" Page prec/suiv : "←" et "->" Source : "quot; Aide : "?" Lien Zone de saisie Titre <hn> Texte ordinaire

67. Vérifier l’accessibilité : Web Developer …les cookies… …CSS… On désactive javascript… … et on linéarise le contenu de la page. …on remplace les images par leurs attributs alt…

68. Vérifier l’accessibilité : Web Developer Lien image avec attribut alt Titre <h1> Liste <ul> Titre <h2> Titre <h3> paragraphe <p>

69. Balisage sémantique : Web Developer On active la fonction « Display Element Information » (Ctrl+Maj+F)… …au survol d’un élément la structure HTML apparaît… … et le clic sur un élément affiche en surimpression des informations complémentaires

70. Structure des titres : Headingsmap Un clic sur un titre le met en surbrillance On active le plugin en cliquant sur l’icône <h/> dans la barre de statut… Et la structure des titres apparaît

72. http://www.w3.org/TR/WCAG20/

73. http://www.accessiweb.org/

74. http://www.slideshare.net/sebastienbillard/presentations

76. Membre du groupe Kinnevik (www.kinnevik.se), Quotidien Metro, Milicom, Transcom, Tele2…

77. Une présence pan européenne : Stockholm, Paris et Madrid