Elysee Accueil Audit

07/04/2010 - Audit d’accessibilité (niveau RGAA - WCAG 2.0 AA) de la page : http://www.elysee.fr/president/accueil.1.
html
Contact presse :
Alain Gravelet
Expert indépendant en accessibilité du web
33 bis, bd Bourdon
75004 Paris
01 48 06 85 97
06 45 27 26 73
agt@gravelet-multimedia.com
www.gravelet-multimedia.com
A Paris, le 07/04/2010
Audit d’accessibilité de la page : http://www.elysee.fr/president/accueil.1.html
A propos de l’auteur de l’audit

Alain Gravelet est expert indépendant en accessibilité du web.
Formé au multimédia en 1997 (cédérom, bornes interactives…), il s’orientera rapidement vers la conception de sites Internet.
Sa collaboration avec le monde associatif paramédical le pousse à s’intéresser très tôt à l’accessibilité des sites Internet. Dès lors, il
intègre ces notions dans la création de tous les sites qui lui sont commandés, favorisant ainsi leur compréhension par le plus grand
nombre et leur référencement.
Après quelques années d’expérience dans ce domaine, il devient consultant pour divers agences web de toutes tailles.
Il travaille au sein d’un groupe de travailleurs indépendants, tous spécialistes dans un domaine précis de l’Internet.
Alain Gravelet est l’auteur du « Manuel d’accessibilité du web » édité aux Editions Poonaï.
Ce manuel s’adresse à tous les intervenants de la chaine de production d’un site Internet : dirigeant d’entreprise ou d’administration, chef
de projet, ergonome, graphiste, rédacteur, intégrateur HTML…
Il est disponible uniquement en ligne au format PDF : http://www.editions-poonai.com/Manuel-accessibilite-web.php
1
07/04/2010 - Audit d’accessibilité (niveau RGAA - WCAG 2.0 AA) de la page : http://www.elysee.fr/president/accueil.1.html
Conclusion de l’audit :
La page d’accueil du site elysee.fr n’est pas accessible aux personnes handicapées et ne respecte pas de nombreux points primordiaux.
Le site Internet de l’Elysée déclare dans sa page sur l’accessibilité :

« Un soin tout particulier a été pris pour rendre le site internet de la Présidence de la République accessible au plus grand nombre et plus
particulièrement aux personnes ayant un handicap visuel.
Les pages les plus récentes du site respectent les normes de codage de l'organisme W3C. L'ensemble des pages contenant des textes
officiels sont également compatibles. »
Définition de l’accessibilité :
La définition de l’accessibilité du Web de Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web est la suivante :
« Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur
langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou
mentales ».
La définition de l’accessibilité ne se réduit pas à la notion de handicap. Nullement besoin d’être handicapé pour se retrouver bloqué devant
un site nécessitant la dernière version de tel ou tel navigateur, l’utilisation de telle ou telle technologie spécifique, ou du Plugin X ou Y...
Un site est accessible lorsqu’il est possible pour n’importe quelle personne d’y accéder de façon équivalente, quels que soient :
 les navigateurs utilisés (Internet Explorer, Firefox, Safari...) ;
 les plateformes d’accès (c’est à dire les systèmes d’exploitations : Windows, Mac OS ou encore Linux...) ;
 les périphériques d’affichages (un écran plat 17 pouces, un ordinateur portable, un téléphone mobile relié au web...) ;
 "les aides techniques" utilisées (une loupe d’écran, une plage braille ou une synthèse vocale...).
Ce sont ces aides techniques qui vont permettre aux personnes souffrant d’un handicap (déficience sensorielle, motrice, intellectuelle ou
cognitive) de compenser celui-ci afin d’avoir accès à l’information présente sur le site.
Le handicap (tous niveaux confondus) touche en France près de 12 millions d’individus, dont environ 1,7 millions de déficients visuels et
aveugles.
Les normes d’accessibilité aident aussi les nouveaux publics de l’Internet à trouver facilement l’information qu’ils cherchent. On pense
notamment aux personnes âgées, peu habituées à utiliser un ordinateur ou à naviguer sur le web.
2
Cadre légal :
La loi sur l’égalité des chances pour les personnes handicapées votée le 3 février 2005 par le Parlement, impose aux sites Internet de
l’Administration en ligne (services de communication publique de l’État, des collectivités territoriales et des établissements publics qui en
dépendent) de devenir accessibles aux personnes handicapées.
Les sites Internet publics ont trois ans pour se mettre en conformité avec les standards internationaux dans le domaine de l’accessibilité.
Le décret n°2009-546 d'application et l’arrêté au journal officiel publié le 29 octobre 2009, oblige les administrations françaises à se
référer au Référentiel Général d’Accessibilité des Administrations (RGAA, version 2.2 en date du 23/10/09) pour attester de la conformité
de leurs services en ligne aux WCAG 2.0 (Web Content Accessibility Guidelines 2.0), selon les niveaux A et AA.
Les responsables des sites devront se tenir au courant des mises à jour de ce document, et les intégrer au fur et à mesure.
Mise en perspective avec le facteur temps :

Les sites ont 3 ans pour se mettre en conformité avec la loi.
Un site ne peut se déclarer accessible qu’à partir du moment où il l’est au moins en grande partie. Il est en effet convenu que certaines
parties du site (les archives, les vidéos…) peuvent prendre plus de temps que les parties visités tous les jours pour être mises en
conformité.
Quand un site se déclare accessible, la majorité des pages courantes doivent être accessibles. Il convient alors de tester les pages
suivantes :
 accueil ;
 accueil de second niveau (sur les sites très denses) ;
 accessibilité/aide ;
 plan ;
 recherche avancée ;
 résultats de recherche ;
 formulaire de contact ;
 page avec tableau de données ;
 page avec une carte interactive ;
 page multimédia (Flash, vidéo, son...) ;
 page avec des scripts ;
 page avec téléchargement ;
 10 pages représentatives prises au hasard.
3
Nous avons choisi de tester la page la plus importante du site, celle qui doit être la première à être accessible :
la page d’accueil.
Audit d’accessibilité (niveau RGAA - WCAG 2.0 AA) de la page : http://www.elysee.fr/president/accueil.1.html
Seuls les points de contrôles rendus obligatoires par le RGAA (soit le niveau double A) ont été vérifiés, et pour des raisons
de lisibilité, seuls les points dont le contrôle est négatif sont présentés dans le tableau ci-dessous.
Les textes en italiques donnent, dans un langage courant, une explication du problème d’accessibilité.
Test (échoué) Intitulé du test Référence Niveau Commentaire

WCAG 2.0
[Couleurs] 3 Présence d'un moyen de transmission de 1.3.1 A Les liens de la colonne « Les actualités » ne
l'information autre qu'une mise en 1.4.1 Obligatoire sont identifiés que par la couleur.
couleur réalisée par des styles CSS.
Le focus des liens (à l’exception du plan de bas
de page et du pied de page) n’est identifié que
Une personne qui ne voit pas les par un changement de couleur.
couleurs, ou certaines couleurs
(daltoniens), ne verra pas certaines
informations.
[Couleurs] 4 Présence d'un moyen de transmission de 1.4.1 A Le focus des liens image (uniquement ceux de
l'information autre qu'une utilisation de la Obligatoire la colonne de droite) n’est identifié que par un
couleur dans les éléments non textuels. changement de couleur.
Une personne qui ne voit pas les

couleurs, ou certaines couleurs
(daltoniens), ne verra pas certaines
informations.
[Couleurs] 7 Valeur du rapport de contraste du texte 1.4.3 AA Le texte « Publié le » dans la colonne « Les
contenu dans un segment de texte. Obligatoire actualités » n’a pas un contraste suffisant.
(minimum).
Dans les formulaires, le contraste entre
l’intitulé des boutons et le fond n’est pas
4
Une personne qui ne voit pas les suffisant.

couleurs, certaines couleurs, ou qui ne
distingue pas les contrastes, ne verra pas Le texte en rouge dans l’encart
certaines informations. « Médiathèque » n’a pas un contraste suffisant.
[Formulaires] 1 Possibilité d'identifier les erreurs de 3.3.1 A En mode JavaScript désactivé, il est possible
saisie. Obligatoire de s’inscrire à la newsletter tout en omettant
l’arobase.
Si les champs de formulaire ne sont pas
bien vérifiés, une personne pourrait
croire avoir répondu, alors que ce n’est
pas le cas.
[Formulaires] 2 Présence d'information préalable sur le 3.3.2 A Dans le formulaire d’inscription à la newsletter,
caractère obligatoire de certains champs Obligatoire il faudrait préciser qu’il faut entrer un adresse
de saisie et du type/format de saisie courriel valide.
attendue si nécessaire.
Pour éviter la ressaisie des formulaires, il

est important de préciser quels champs
sont obligatoires.
[Formulaires] 13 Présence d'informations ou de 3.3.3 AA En mode normal, le message qui apparait

suggestions facilitant la correction des Obligatoire devrait être plus précis : préciser qu’il manque
erreurs de saisie. l’arobase ou un nom de domaine valide.
Certaines personnes malvoyantes,

personnes âgées n’ayant pas l’habitude
du net…) ne comprendront pas un
message d’erreur imprécis.
[Images] 2 Pertinence de l'alternative textuelle aux 1.1.1 A L’alternative de l’image qui invite à « en savoir
images liens. Obligatoire plus (sur cette actualité) » (grand bandeau
graphique animé en haut de page) devrait
Les personnes aveugles, ou utilisant un préciser de quelle actualité il s’agit.
terminal qui n’affiche pas les images, ont
5
besoin que l’alternative reprenne L’alternative de l’image qui invite à visiter le

précisément le sens de l’image, et si c’est site du porte parole du gouvernement devrait
un lien, la cible de celui-ci. préciser que l’on sort du site de l’Elysée, et que
le lien s’ouvre dans une nouvelle fenêtre.
L’alternative de l’image qui invite à visiter le

site du gouvernement devrait préciser que le
lien s’ouvre dans une nouvelle fenêtre.
L’alternative des images qui invitent à visiter

les sites Facebook, Twitter, Fliskr et
Dailymotion, devraient préciser que les liens
s’ouvrent dans une nouvelle fenêtre.
L’une des occurrences de l’image « Voir tous

les déplacements du Président en France» (qui
n’apparaissent qu’en mode JavaScript
désactivé) envoi vers la page « International ».
[Images] 3 Pertinence de l'alternative textuelle aux 1.1.1 A En mode sans JavaScript ou sans CSS, le
zones cliquables ou aux boutons Obligatoire bouton image « Fermer » renvoie en haut de
graphiques. page, et ne ferme rien.
Les personnes aveugles, ou utilisant un

terminal qui n’affiche pas les images, ont
besoin que l’alternative reprenne
précisément le sens de l’image, et si c’est
un lien, la cible de celui-ci.
[Multimédia] 24 Absence d'éléments affichant des 2.2.1 A Le boutons « Animations : désactiver/activer »

mouvements déclenchés 2.2.2 Obligatoire ne fonctionne pas, on ne peut dont pas stopper
automatiquement ne pouvant pas être l’animation du haut de page.
arrêtés.
Les animations peuvent perturber

l’attention et la lecture de certains
internautes, il convient de pouvoir les
6
stopper manuellement.
[Navigation] 4 Présence d'un avertissement préalable à 2.4.4 A L’alternative de l’image qui invite à visiter le
l'ouverture de nouvelle fenêtre lors de 3.2.5 Obligatoire site du porte parole du gouvernement devrait
l'utilisation de code javascript. préciser que l’on sort du site de l’Elysée, et que
le lien s’ouvre dans une nouvelle fenêtre.
Une personne aveugle ne saura pas si un
lien à ouvert une nouvelle fenêtre, et ne L’alternative de l’image qui invite à visiter le
pourra pas revenir en arrière. C’est site du gouvernement devrait préciser que le
pourquoi il faut le préciser, soit dans lien s’ouvre dans une nouvelle fenêtre.
l’intitulé du lien, soit dans le Title.
L’alternative des images qui invitent à visiter
les sites Facebook, Twitter, Fliskr et
Dailymotion, devraient préciser que les liens
s’ouvrent dans une nouvelle fenêtre.
[Navigation] 13 Possibilité d'identifier la destination ou 2.4.4 A L’image bouton « Les actualité » devrait avoir
l'action des liens et des boutons. Obligatoire in « Title » qui indique que l’on ne quitte pas la
page, mais que l’on ouvre un sous-menu.
Les personnes aveugles utilisent une
synthèse vocale pour utiliser leur Même chose pour les images-boutons
ordinateur et naviguer sur le web. Elles suivantes : « Les dossiers » et la
utilisent celle-ci le plus souvent de façon « Présidence »
séquentielle, par exemple en décidant de
commencer la lecture d’une page par L’attribut « Title » d’un lien (l’info-bulle qui
tous les liens qu’elle comporte. Si ceux-ci apparait au passage de la souris ou au focus)
ne sont pas explicites, il faut ajouter un ne doit être utilisé que lorsqu’il est
Title qui précise la destination du lien indispensable.
pour qu’il soit compréhensible hors Dans le cas du lien « Discours » il n’est pas
contexte. nécessaire d’ajouter un « Title » du type
« Accéder au menu discours ».
Si l’intitulé du lien est explicite hors
contexte, il ne faut pas mettre de Title Même chose pour 188 autres liens.
supplémentaire.
Le « Title » (« En savoir plus sur cette
actualité ») du lien « En savoir plus » (dans
7
Dans les images-lien on met l’information l’animation de haut de page) n’est pas
dans le Alt. suffisant, il devrait préciser de quelle actualité
il s’agit.
Les boutons dont les intitulés sont les chiffres

de 1 à 8 (dans l’animation de haut de page)
devraient avoir un « Title » indiquant que l’on
ne quitte pas la page, mais que l’on change
d’actualité, et préciser de quelle actualité il
s’agit .
Quand une image est aussi un lien, l’attribut

« Alt » reprend le contenu de l’image et la cible
du lien, mais il ne doit pas y avoir d’attribut
« Title ».
Exemple l’image avec l’alternative
« Conférence de presse conjointe de Nicolas
Sarkozy et Barack Obama à la Maison
Blanche ».
Même chose pour 6 autres images-liens.
Les liens « Regarder la vidéo » devraient avoir

un « Title » plus explicite. « Regarder la vidéo
8423 » n’est pas pertinent lorsque l’on navigue
à l’aveugle. Le bon « Title » serait « Regarder
la vidéo sur la visite officielle aux Etats-Unis ».
[Navigation] 16 Absence de liens sans intitulé. 1.1.1 A Les boutons dont les intitulés sont les chiffres
2.4.4 Obligatoire de 1 à 8 (dans l’animation de haut de page)
Les personnes aveugles utilisent une 2.4.9 devraient avoir un « Title » indiquant que l’on
synthèse vocale pour utiliser leur ne quitte pas la page, mais que l’on change
ordinateur et naviguer sur le web. Elles d’actualité, et préciser de quelle actualité il
utilisent celle-ci le plus souvent de façon s’agit.
séquentielle, par exemple en décidant de
commencer la lecture d’une page par
tous les liens qu’elle comporte. Si ceux-ci
8
ne sont pas explicites, il faut ajouter un

Title qui précise la destination du lien
pour qu’il soit compréhensible hors
contexte.
[Présentation] 6 Possibilité de remplacer les éléments non 1.3.1 A Le images-boutons du menu principal devraient
textuels par une mise en forme effectuée 1.4.5 Obligatoire être du texte sélectionnable mis en forme par
grâce aux styles CSS. les CSS.
Il est possible d’agrandir manuellement

le texte sélectionnable, mais pas les
images. Dans la mesure du possible il ne
faut pas utiliser d’image pour mettre en
forme du texte (à l’exception des logos,
publicités…).
[Présentation] 11 Absence de suppression de l'effet visuel 1.41 AA La visualisation du focus disparait sur les liens
au focus des éléments. 2.4.8 Obligatoire de type image dans Internet Explorer 8 et
Firefox 3.
Certaines personnes navigue uniquement
avec le clavier, par exemple quelqu’un Il est conseillé de renforcer la visibilité du focus
qui tremble trop pour utiliser la souris. Il (en plus de celle du survol par la souris).
est donc très important de pouvoir suivre
visuellement la position du focus dans la Les très nombreux éléments cachés en haut de
page, sinon l’internaute sera rapidement page gênent considérablement la navigation au
perdu dans sa navigation. clavier.
[Présentation] 18 Restitution correcte dans les lecteurs 2.4.4 A Les propriétés CSS « display: none; » et
d'écran des éléments masqués. Obligatoire « visibility: hidden; » sont utilisées.
Certains éléments à destination des

personnes aveugles, peuvent gêner la
charte graphique. Dans ce cas on les
rend invisibles à l’écran. En fonction de la
technique utilisée, le fait de les rendre
invisibles peut aussi empêcher une
synthèse vocale de les lire.
9
[Structure] 2 Pertinence du contenu des titres de 1.3.1 A Les menus ne doivent donc pas être une suite
hiérarchie. 2.4.6 Obligatoire de <H3>.
Pour une bonne compréhension, la Le <H2>Accueil</H2> ne peut pas être le sous

lecture d'un titre de hiérarchie doit titre de <H1>Accueil</H1>.
permettre d'identifier les informations
qu'il coiffe. L’agenda du Président est mal structuré. On
Un titre est donc suivi d’un sous-titre ou passe d’un <H3>L’agenda du Président</H3>
de texte, mais pas directement d’un à <H4>matin<H4>. Entre les deux on trouve
autre titre de même niveau. en paragraphe le jour et la date.
Par ailleurs un titre (quelque soit son Même chose pour tout l’agenda.
niveau de hiérarchie) annonce
obligatoirement le contenu qui suit.
[Structure] 3 Absence d'interruption dans la hiérarchie 1.3.1 A Le document commence par un <H3>.
de titres. Obligatoire Le <H1> est en fin de code.
Il ne doit pas y avoir de trou dans la

hiérarchie de titres. A l'exception de h1,
le premier titre hiérarchique précédant
l'élément hn dans l'ordre du code source
doit être de niveau hn, hn-1 ou hn+x (x
est forcément inférieur ou égal à 4).
[Structure] 4 Présence d'une hiérarchie de titres 1.3.1 A La hiérarchie des titres n’est pas complète (voir
complète. 2.4.1 Obligatoire ci-dessus).
2.4.10
Voir ci-dessus.
[Structure] 5 Absence de simulation visuelle de liste 1.3.1 A De nombreux items (notamment dans les
non ordonnée. Obligatoire sous-menus) sont présentés comme des listes,
sans pour autant en reprendre le code HTML.
Les listes ont un sens précis. Donner une
apparence de liste à une suite d’items Par ailleurs on trouve des listes HTML à un seul
sans utiliser le code HTML approprié, item.
10
enlèvera cette information aux personnes

qui ne voient pas l’écran.
Quelques points d’ergonomie.
AccesKey La version 1.0 des WCAG acceptait l’utilisation des « AccessKey ». Il s’agit de raccourcis claviers qui permettent de
naviguer plus rapidement dans une page ou dans un site. La nouvelle version ne les recommande pas, notamment à
cause des problèmes de conflits avec les raccourcis des navigateurs et des aides techniques. Dans tous les cas il était
recommandé de ne les utiliser qu’avec parcimonie, pour les liens primordiaux, et en ne prenant que des chiffres.
Dans la page d’accueil de ce site il y en a de nombreux avec une définition vide, on trouve des chiffres et des lettres,
et certains sont utilisés plusieurs fois pour pointer vers des pages différentes.
Exemple :
<a accesskey='3' title='Avenir de la fonction publique' href='/president/les-dossiers/etat/institutions/reforme-de-l-
etat/table-ronde-fonction-publique-a-laon/avenir-de-la-fonction-publique.7977.html'>Avenir de la fonction
publique</a>
Et
<a accesskey='3' title='menu 11 : Etat/Institutions' href='/president/les-dossiers/etat/institutions/la-modernisation-
des-institutions.55.html'>Etat/Institutions</a>
Nombre de liens Il y a, au jour de l’audit, 363 liens dans cette page. Certains d’entre eux apparaissent jusqu’à 8 fois. En terme
d’ergonomie et d’utilisabilité, cela peut poser des gros problèmes, notamment pour les personnes qui ont un modem
à connexion lente, et pour les personnes qui naviguent avec une synthèse vocale. Certains aveugles commencent par
écouter soit la liste des titres, soit la liste des liens.
Menus cachés Le jeu des menus cachés (en haut de page), la superposition des menus en JavaScript, et l’absence de focus bien
visibles, rendent une partie de la navigation au clavier extrêmement difficile dans Internet Explorer (versions 6, 7, et
8) et impossible dans Firefox 3.
Poids de la page Le poids de la page est estimé à 1,5 Mo. C’est extrêmement lourd pour un internaute disposant d’un modem
classique : environ 8 minutes de temps de chargement estimé avec un modem 28 Kb.
11

Elysee Accueil Audit

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Elysee Accueil Audit

Transféré par

Droits d'auteur :

Formats disponibles

07/04/2010 - Audit d’accessibilité (niveau RGAA - WCAG 2.0 AA) de la page : http://www.elysee.fr/president/accueil.1.

Audit d’accessibilité de la page : http://www.elysee.fr/president/accueil.1.html

A propos de l’auteur de l’audit

Le site Internet de l’Elysée déclare dans sa page sur l’accessibilité :

Mise en perspective avec le facteur temps :

Audit d’accessibilité (niveau RGAA - WCAG 2.0 AA) de la page : http://www.elysee.fr/president/accueil.1.html

Test (échoué) Intitulé du test Référence Niveau Commentaire

Une personne qui ne voit pas les

Une personne qui ne voit pas les suffisant.

Pour éviter la ressaisie des formulaires, il

[Formulaires] 13 Présence d'informations ou de 3.3.3 AA En mode normal, le message qui apparait

Certaines personnes malvoyantes,

besoin que l’alternative reprenne L’alternative de l’image qui invite à visiter le

L’alternative de l’image qui invite à visiter le

L’alternative des images qui invitent à visiter

L’une des occurrences de l’image « Voir tous

Les personnes aveugles, ou utilisant un

[Multimédia] 24 Absence d'éléments affichant des 2.2.1 A Le boutons « Animations : désactiver/activer »

Les animations peuvent perturber

Les boutons dont les intitulés sont les chiffres

Quand une image est aussi un lien, l’attribut

Même chose pour 6 autres images-liens.

Les liens « Regarder la vidéo » devraient avoir

ne sont pas explicites, il faut ajouter un

Il est possible d’agrandir manuellement

Certains éléments à destination des

Pour une bonne compréhension, la Le <H2>Accueil</H2> ne peut pas être le sous

Il ne doit pas y avoir de trou dans la

enlèvera cette information aux personnes

Quelques points d’ergonomie.

Vous aimerez peut-être aussi