L'accessibilité, au-delà des
contraintes, un atout pour votre
audience
Avantages et limites de l'accessibilité
pour le référencement
2
Armony ALTINIER
Consultante et formatrice en
accessibilité numérique
ACS HORIZONS
@armonyaltinier
3
Quelques définitions
4
Accessibilité
Percevoir - Comprendre -
Naviguer - Interagir - Contribuer
Handicaps : visuels, auditifs, physiques, de parole, cognitifs et neurologiques.
Source : W3C – WAI (en anglais) : http://www.w3.org/WAI/intro/accessibility.php
5
Situation de handicap
Une question de contexte
Déficience  Incapacité  Handicap
6
Audience
« L'audience d'un média définit l'ensemble
des individus exposés, ou leur nombre »
Source : Wikipédia : https://fr.wikipedia.org/wiki/Audience_%28m%C3%A9dia%29
7
Audience : les gens selon l'INSEE
« 1 personne sur 5 déclare
être limitée dans ses activités »
Source : INSEE enquête vie quotidienne et santé (2009) :
http://www.insee.fr/fr/themes/document.asp?ref_id=ip1254#inter1
8
Audience sur le Web : SEO, entre autres...
9
CMS « open source »,
peut toujours être rendu accessible
Logiciel libre, quatre libertés :
1.Utiliser
2.Étudier
3.Modifier
4.Partager
10
Quel impact de l'accessibilité sur
l'audience d'un site ?
11
Bonnes pratiques SEO
et règles d'accessibilité
12
Sources
• Guide d'optimisation pour les moteurs de
recherche et autres ressources Google
• Référentiel AccessiWeb 2.2 basé sur les
WCAG 2 et compatible RGAA
13
Images : renseigner correctement
l'alternative
●Assurez-vous que le texte associé aux at-
tributs alt est descriptif et pertinent.
● Question des images non porteuses d'infor-
mation
●Utilisez du texte plutôt que des éléments
graphiques. […] notre robot d'exploration ne
reconnaît pas les informations contenues
dans les éléments graphiques.
●Placer vos images près d'un texte pertinent.
●Pour que la majorité des internautes
puissent accéder à vos contenus textuels
importants, intégrez-les au format HTML.
Critères 1.1, 1.2, 1.3, 1.5, 1.6, 1.7, 1.8, 1.9
14
Multimédia : Google aveugle et sourd
● Googlebot ne peut pas explorer le contenu
de fichiers vidéo.[...] Envisagez de créer une
transcription de la vidéo à inclure ou
fournissez une description détaillée de
celle-ci dans le code HTML
● Nous vous conseillons de réserver les
technologies rich media (Flash, par
exemple) aux éléments esthétiques de votre
site et d'utiliser le langage HTML pour le
contenu et la navigation.
Critères 4.1, 4.2, 4.15, 4.16, 4.17
15
Liens : soignez vos intitulés !
●Améliorer la qualité des textes d'ancre :
choisissez du texte descriptif, rédiger du
texte concis
●Indiquez un texte alt lorsque vous utilisez
des images comme liens
Critères 6.1, 6.6
16
Scripts : ne pas faire dépendre
l'accès au contenu de scripts
Si certaines fonctionnalités (JavaScript, co-
okies, ID de session, cadres, balises DHTML
ou contenus Flash) vous empêchent d'affi-
cher la totalité de votre site dans un naviga-
teur texte, il est possible que les robots ren-
contrent des difficultés similaires lors de leur
exploration.
Critères 7.1, 7.2, 7.4
17
Éléments obligatoires :
titre de page et code sans erreur
●Assurez-vous que le texte associé aux ba-
lises <title> est descriptif et pertinent.
●Assurez-vous que vos liens fonctionnent
correctement et que le code HTML de vos
pages ne présente pas d'erreurs.
● «  Bien que nous recommandions l'utilisation 
d'un code HTML correct, cela n'a normalement 
aucune incidence sur la façon dont Google ex-
plore et indexe votre site. »
Critères 8.1, 8.2, 8.5, 8.6
18
Structurer vos pages
à l'aide d'en-têtes
●Utiliser de façon appropriée les balises
d'en-tête.
●Évitez de passer d'une taille d'en-tête à une
autre de façon incohérente
Critères 9.1
19
Présentation de l'information
● « L'utilisation du code CSS permet de dis-
tinguer la présentation du contenu et d'obte-
nir un meilleur rendu et un chargement des
pages plus rapide. »
● Pour vérifier le fonctionnement de votre
site, utilisez un navigateur texte tel que Lynx.
Critères 10.1, 10.2
20
Navigation
●Faciliter la navigation sur votre site. Aidez
vos utilisateurs en utilisant des fils d'Ariane
●Ajouter un plan de site
Critères 12.1, 12.4, 12.5, 12.8, 12.9
21
Attention : de nombreux critères
existent encore pour l'accessibilité
et le SEO
22
L'audience au-delà des règles
23
« black hat »: les risques
● Risques pour l'accessibilité
– Perturber la consultation par certains utilisateurs,
notamment ceux utilisant des lecteurs d'écran
● Risques de pénalité en cas de fraude
– Blacklistage
– Sandbox sélective ou générale
– Déclassement
24
Le coût de la non accessibilité
● Perte d'audience
● Contenus non indexés (vidéos par exemple)
25
Accessibilité, quel impact sur le SEO ?
● Pas d'impact négatif sur le SEO loyal
● Pas forcément d'impact positif sur le SEO,
même si de bonnes pratiques se rejoignent
« Concevez vos pages en pensant d'abord aux
internautes et non aux moteurs de recherche. »
Google
26
Accessibilité, quel impact sur
l'audience ?
● Penser à tous ses utilisateurs = penser aux
20 % de personnes limitées dans leurs activités
● Google : aveugle et sourd !
● Tout le monde peut être en situation de
handicap
27
Accessibilité et référencement
● Accessibilité et indexabilité
– Les moteurs de recherche analysent la page comme un
lecteur d'écran
● Accessibilité et positionnement
– Accessibilité nécessaire, mais pas suffisante
– Un site peut être bien positionné et pas accessible
● Accessibilité et référencement, deux domaines à
part entière : des bonnes pratiques convergentes,
mais insuffisantes
28
L'accessibilité, nécessaire
pour votre audience !
Un site pour des gens doit être un site accessible.
Accessibilité : première étape pour améliorer son audience en qualité
29
PLACE AUX QUESTIONS !
30
via Twitter : @armonyaltinier
par e-mail : armony@acs-horizons.fr
31
PLANNING
● Ne loupez pas les prochaines conférences et tables rondes !
– Investir dans un CMS : Comment les entreprises capitalisent-elles sur le
choix d'un même CMS pour plusieurs projets
Amphithéâtre Émile Laffon
– Gamifier votre gestion de contenu : Appliquer des mécanismes de jeu pour
fidéliser votre audience
Salle Potiron
– Les enjeux de fréquentation pour les administrations Publiques
Salle Tilleul
– eZ Publish : Mieux comprendre l'utilisateur pour répondre à ses attentes :
analyse du parcours, statistiques temps réel, segmentation
Salle Olive
– Jahia Wise : Une nouvelle approche du partage documentaire collaboratif
Salle Aubergine
32
Crédits et licence
● Auteure : Armony ALTINIER –
Société ACS Horizons http://acs-horizons.fr
● Licence : Creative Commons BY-SA France 3.0
ou ultérieure :
http://creativecommons.org/licenses/by-sa/3.0/fr/
33
Crédits images
● p.4 Fauteuil roulant par jvangalen - http://www.sxc.hu/photo/850688
● p.5 dessin de Frank Margerin
● p.6 personnages par Julie Tolomelli - http://latolo.didrocks.fr/
● p.6 et 23 dessin à partir de ceux de sampler : http://openclipart.org/user-detail/sampler
● p.7
● p.8 logo Google sur Wikimedia Commons : https://commons.wikimedia.org/wiki/File:Google-Logo.svg
● p.9 clipart taureau par N/A :http://fr.clipartlogo.com/image/gnu-cartoon-cow-bull-logo-buffalo-horns-animal_394516.html
● p.9
● p.12 logo AccessiWeb : http://www.accessiweb.org
● p.13 Clipart maison par Rejon: http://openclipart.org/detail/70/nicus-crash-cchost-file-by-rejon
● p.14 clap cinéma par shuttermonkey : https://openclipart.org/detail/16349/movie-clapperboard-by-shuttermonkey
● p.15 chaîne clipart par Nicubunu : http://openclipart.org/detail/22077/chain-by-nicubunu
● p.16 image java script : http://softsupplier.com/javascript-103372/
● p.18
● p.19 clipart réuinon par Anonymous : http://openclipart.org/detail/25444/presentation-by-anonymous-25444
● p.20 boussole par ernes : https://openclipart.org/detail/50329/bussola---compass-by-ernes
● p.24
● p.26
● p.28 : empreinte de pied par Benji Park : http://openclipart.org/detail/26274/right-footprint-by-anonymous
● p.30 Icon oiseau bleu par Jonah Bron : http://openclipart.org/detail/69631/twitter-icon-by-jonah-bron
● p.30 clipart enveloppe par sheikh_tuhin : http://openclipart.org/detail/19943/mail-by-sheikh_tuhin-19943
● p.32

L'accessibilité, au-delà des contraintes, un atout pour votre audience Avantages et limites de l'accessibilité pour le référencement

  • 1.
    L'accessibilité, au-delà des contraintes,un atout pour votre audience Avantages et limites de l'accessibilité pour le référencement
  • 2.
    2 Armony ALTINIER Consultante etformatrice en accessibilité numérique ACS HORIZONS @armonyaltinier
  • 3.
  • 4.
    4 Accessibilité Percevoir - Comprendre- Naviguer - Interagir - Contribuer Handicaps : visuels, auditifs, physiques, de parole, cognitifs et neurologiques. Source : W3C – WAI (en anglais) : http://www.w3.org/WAI/intro/accessibility.php
  • 5.
    5 Situation de handicap Unequestion de contexte Déficience  Incapacité  Handicap
  • 6.
    6 Audience « L'audience d'unmédia définit l'ensemble des individus exposés, ou leur nombre » Source : Wikipédia : https://fr.wikipedia.org/wiki/Audience_%28m%C3%A9dia%29
  • 7.
    7 Audience : lesgens selon l'INSEE « 1 personne sur 5 déclare être limitée dans ses activités » Source : INSEE enquête vie quotidienne et santé (2009) : http://www.insee.fr/fr/themes/document.asp?ref_id=ip1254#inter1
  • 8.
    8 Audience sur leWeb : SEO, entre autres...
  • 9.
    9 CMS « open source », peut toujoursêtre rendu accessible Logiciel libre, quatre libertés : 1.Utiliser 2.Étudier 3.Modifier 4.Partager
  • 10.
    10 Quel impact del'accessibilité sur l'audience d'un site ?
  • 11.
    11 Bonnes pratiques SEO etrègles d'accessibilité
  • 12.
    12 Sources • Guide d'optimisationpour les moteurs de recherche et autres ressources Google • Référentiel AccessiWeb 2.2 basé sur les WCAG 2 et compatible RGAA
  • 13.
    13 Images : renseignercorrectement l'alternative ●Assurez-vous que le texte associé aux at- tributs alt est descriptif et pertinent. ● Question des images non porteuses d'infor- mation ●Utilisez du texte plutôt que des éléments graphiques. […] notre robot d'exploration ne reconnaît pas les informations contenues dans les éléments graphiques. ●Placer vos images près d'un texte pertinent. ●Pour que la majorité des internautes puissent accéder à vos contenus textuels importants, intégrez-les au format HTML. Critères 1.1, 1.2, 1.3, 1.5, 1.6, 1.7, 1.8, 1.9
  • 14.
    14 Multimédia : Googleaveugle et sourd ● Googlebot ne peut pas explorer le contenu de fichiers vidéo.[...] Envisagez de créer une transcription de la vidéo à inclure ou fournissez une description détaillée de celle-ci dans le code HTML ● Nous vous conseillons de réserver les technologies rich media (Flash, par exemple) aux éléments esthétiques de votre site et d'utiliser le langage HTML pour le contenu et la navigation. Critères 4.1, 4.2, 4.15, 4.16, 4.17
  • 15.
    15 Liens : soignezvos intitulés ! ●Améliorer la qualité des textes d'ancre : choisissez du texte descriptif, rédiger du texte concis ●Indiquez un texte alt lorsque vous utilisez des images comme liens Critères 6.1, 6.6
  • 16.
    16 Scripts : nepas faire dépendre l'accès au contenu de scripts Si certaines fonctionnalités (JavaScript, co- okies, ID de session, cadres, balises DHTML ou contenus Flash) vous empêchent d'affi- cher la totalité de votre site dans un naviga- teur texte, il est possible que les robots ren- contrent des difficultés similaires lors de leur exploration. Critères 7.1, 7.2, 7.4
  • 17.
    17 Éléments obligatoires : titrede page et code sans erreur ●Assurez-vous que le texte associé aux ba- lises <title> est descriptif et pertinent. ●Assurez-vous que vos liens fonctionnent correctement et que le code HTML de vos pages ne présente pas d'erreurs. ● «  Bien que nous recommandions l'utilisation  d'un code HTML correct, cela n'a normalement  aucune incidence sur la façon dont Google ex- plore et indexe votre site. » Critères 8.1, 8.2, 8.5, 8.6
  • 18.
    18 Structurer vos pages àl'aide d'en-têtes ●Utiliser de façon appropriée les balises d'en-tête. ●Évitez de passer d'une taille d'en-tête à une autre de façon incohérente Critères 9.1
  • 19.
    19 Présentation de l'information ●« L'utilisation du code CSS permet de dis- tinguer la présentation du contenu et d'obte- nir un meilleur rendu et un chargement des pages plus rapide. » ● Pour vérifier le fonctionnement de votre site, utilisez un navigateur texte tel que Lynx. Critères 10.1, 10.2
  • 20.
    20 Navigation ●Faciliter la navigationsur votre site. Aidez vos utilisateurs en utilisant des fils d'Ariane ●Ajouter un plan de site Critères 12.1, 12.4, 12.5, 12.8, 12.9
  • 21.
    21 Attention : denombreux critères existent encore pour l'accessibilité et le SEO
  • 22.
  • 23.
    23 « black hat»: les risques ● Risques pour l'accessibilité – Perturber la consultation par certains utilisateurs, notamment ceux utilisant des lecteurs d'écran ● Risques de pénalité en cas de fraude – Blacklistage – Sandbox sélective ou générale – Déclassement
  • 24.
    24 Le coût dela non accessibilité ● Perte d'audience ● Contenus non indexés (vidéos par exemple)
  • 25.
    25 Accessibilité, quel impactsur le SEO ? ● Pas d'impact négatif sur le SEO loyal ● Pas forcément d'impact positif sur le SEO, même si de bonnes pratiques se rejoignent « Concevez vos pages en pensant d'abord aux internautes et non aux moteurs de recherche. » Google
  • 26.
    26 Accessibilité, quel impactsur l'audience ? ● Penser à tous ses utilisateurs = penser aux 20 % de personnes limitées dans leurs activités ● Google : aveugle et sourd ! ● Tout le monde peut être en situation de handicap
  • 27.
    27 Accessibilité et référencement ●Accessibilité et indexabilité – Les moteurs de recherche analysent la page comme un lecteur d'écran ● Accessibilité et positionnement – Accessibilité nécessaire, mais pas suffisante – Un site peut être bien positionné et pas accessible ● Accessibilité et référencement, deux domaines à part entière : des bonnes pratiques convergentes, mais insuffisantes
  • 28.
    28 L'accessibilité, nécessaire pour votreaudience ! Un site pour des gens doit être un site accessible. Accessibilité : première étape pour améliorer son audience en qualité
  • 29.
  • 30.
    30 via Twitter :@armonyaltinier par e-mail : armony@acs-horizons.fr
  • 31.
    31 PLANNING ● Ne loupezpas les prochaines conférences et tables rondes ! – Investir dans un CMS : Comment les entreprises capitalisent-elles sur le choix d'un même CMS pour plusieurs projets Amphithéâtre Émile Laffon – Gamifier votre gestion de contenu : Appliquer des mécanismes de jeu pour fidéliser votre audience Salle Potiron – Les enjeux de fréquentation pour les administrations Publiques Salle Tilleul – eZ Publish : Mieux comprendre l'utilisateur pour répondre à ses attentes : analyse du parcours, statistiques temps réel, segmentation Salle Olive – Jahia Wise : Une nouvelle approche du partage documentaire collaboratif Salle Aubergine
  • 32.
    32 Crédits et licence ●Auteure : Armony ALTINIER – Société ACS Horizons http://acs-horizons.fr ● Licence : Creative Commons BY-SA France 3.0 ou ultérieure : http://creativecommons.org/licenses/by-sa/3.0/fr/
  • 33.
    33 Crédits images ● p.4Fauteuil roulant par jvangalen - http://www.sxc.hu/photo/850688 ● p.5 dessin de Frank Margerin ● p.6 personnages par Julie Tolomelli - http://latolo.didrocks.fr/ ● p.6 et 23 dessin à partir de ceux de sampler : http://openclipart.org/user-detail/sampler ● p.7 ● p.8 logo Google sur Wikimedia Commons : https://commons.wikimedia.org/wiki/File:Google-Logo.svg ● p.9 clipart taureau par N/A :http://fr.clipartlogo.com/image/gnu-cartoon-cow-bull-logo-buffalo-horns-animal_394516.html ● p.9 ● p.12 logo AccessiWeb : http://www.accessiweb.org ● p.13 Clipart maison par Rejon: http://openclipart.org/detail/70/nicus-crash-cchost-file-by-rejon ● p.14 clap cinéma par shuttermonkey : https://openclipart.org/detail/16349/movie-clapperboard-by-shuttermonkey ● p.15 chaîne clipart par Nicubunu : http://openclipart.org/detail/22077/chain-by-nicubunu ● p.16 image java script : http://softsupplier.com/javascript-103372/ ● p.18 ● p.19 clipart réuinon par Anonymous : http://openclipart.org/detail/25444/presentation-by-anonymous-25444 ● p.20 boussole par ernes : https://openclipart.org/detail/50329/bussola---compass-by-ernes ● p.24 ● p.26 ● p.28 : empreinte de pied par Benji Park : http://openclipart.org/detail/26274/right-footprint-by-anonymous ● p.30 Icon oiseau bleu par Jonah Bron : http://openclipart.org/detail/69631/twitter-icon-by-jonah-bron ● p.30 clipart enveloppe par sheikh_tuhin : http://openclipart.org/detail/19943/mail-by-sheikh_tuhin-19943 ● p.32