Attestation de conformité au référentiel RGAA niveau A


URL du site : http://www.le-loir-et-cher.fr
Date de réalisation : 21/03/2014
Version RGAA : RGAA V2.2 du 23/10/2009 (Référentiel Général d'Accessibilité pour les Administrations)
https://references.modernisation.gouv.fr/rgaa-accessibilite
Déclarant : Plan.Net <emilie.sagniez@plan-net.fr>
Technologies utilisées sur le site : Langage : html5, CSS3, php, jquery
CMS : typo3
Agents utilisateurs testés : Chrome 33

1. Résultats du test

1.1. Cadre

Plusieurs iframes sont utilisées sur le site, elles intègrent soit une vidéo provenant du site http://www.youtube.com soit des fonctionnalités de recherche disponibles depuis d’autres plateformes. Des titres ont été ajoutés à chacune d’entre-elles.

Liste des pages contenant des iframes :

 

 

1.2. Couleurs

Contraste vérifiée à l’aide du site http://wave.webaim.org/. Seules des erreurs de niveau AA sont relevées.

1.3. Formulaires

Tous les formulaires du site sont générés à l’aide du même outil, ils possèdent donc tous la même syntaxe. Pour faire nos tests, nous nous sommes basés sur le plus important : le formulaire de contact, ainsi qu’un plus complet :

 

À la validation, les messages d’erreurs expliquent clairement quelle est l’erreur et quel champ elle concerne. Cette distinction est faite visuellement et également dans le flux HTML, les messages d’erreur apparaissant avant chaque champ concerné.
Chaque champ est relié correctement à son label à l’aide de l’association id/for. Le texte des labels est explicite et ne nécessite pas d’attribut title supplémentaire. On a placé chaque association label/champ sur la même ligne pour simplifier la compréhension visuelle.
Les champs sont regroupés par thématique grâce à l’utilisation des balises fieldset, chaque regroupement est expliqué à l’aide de la balise legend.
Nous n’avons pas l’utilité des regroupements d’éléments optgroup à l’intérieur des listes déroulantes.

1.4. Images

Les tests ont été réalisés sur plusieurs pages contenant plusieurs images aussi bien dans la colonne principale que dans la colonne contextuelle, nous avons également placé dans notre test la seule page utilisant une image map :

 

En cas de non accessibilité sur l’image map, l’utilisateur peut utiliser la liste déroulante située en amont qui provoque le même comportement.
Nous avons pris note que toutes les images doivent avoir une description courte et pertinente dans l’attribut alt et que pour une image amenant de l’information, sa description doit être complète dans l’attribut longdesc.

1.5. Multimédia

Les seuls éléments multimédia utilisés sur ce site sont les vidéos YouTube et les liens de téléchargement de documents.
Une vérification a été faite sur les pages suivantes afin de contrôler que chaque vidéo possède une description dans la balise alt ou dans le contenu qui la précède.

Liste des pages de test :

 

Le site ne contient ni de contenus visuels animés ou sonores. Les tests portant sur ces objets ne sont donc pas réalisables (5.3 à 5.6, 5.9 à 5.12).

Le graphisme du site ne subit aucun changement brusque qui pourrait perturber l’internaute, la charte reste identique sur chaque page, aucune action de l’utilisateur (clic, survol…) ne change l’interface. Le contributeur n’a pas accès aux balises interdites (blink, marquett, bgsound). Les tests des points suivants ne sont donc pas reproductibles : 5.13 à 5.15, 5.19 à 5.23, 5.24 à 5.30.

Les seuls éléments objet sont les vidéos YouTube, les aides techniques sont dépendantes de la plateforme ; en revanche le contributeur est sensibilisé au fait de rendre les vidéos dont il est propriétaire accessible (descriptif audio par exemple).

1.6. Navigation

Aucun rafraichissement n’a été mis en place sur le site, aussi bien à l’aide d’une balise méta que dans une fonction javascript.

Les items du menu n’ont pas d’attribut title, leur contenu textuel est suffisant. La navigation au clavier est correcte (tabulation), l’ordre des éléments interactifs est cohérent au flux. Tous les documents proposés au téléchargement sont proposés dans la même langue que celle du site (française), aucune précision n’a donc été prévue.

1.7. Présentation

Aucune information n’est ajoutée grâce à la propriété « content » en CSS3, celle-ci est utilisée dans l’unique but d’ajouter des effets de style au survol. Les images de fond ont un but visuel mais non informatif. Pour espacer les lettres d’un mot, nous utilisons des propriétés css et non l’emploi d’espaces. Les balises listées dans le point 7.8 ne sont pas utilisées (center (style text-align), u et color (n’existe pas dans le RTE).

Le site est cohérent si le style est désactivé.

Les liens sont mis en avant grâce à la couleur bleue, le contraste est bien présent par rapport aux textes qui les entourent. Au survol, ceux-ci se soulignent.

La propriété CSS outline est utilisée uniquement sur des liens ou champs de formulaire possédant un style très marqué : focus sur les éléments de formulaire, liens autour de chaque événement en page d’accueil. Du style sur ces événements permet de détecter leur état standard et hover.

1.8. Scripts

Le javascript est utilisé pour le module de cartographie ou pour des raisons de style, d’animation ou de compatibilité navigateur. Il n’y a donc pas de mise à jour à effectuer à la suite des événements. Le module de cartographie instancie une balise <noscript> pour présenter les POI en cas de désactivation du javascript. Dans les blocs de type carrousel (À la une en page d’accueil), si le javascript est désactivé, l’internaute a tout de même accès aux autres items via le lien « voir tout ».

Les actions déclenchées en javascript à l’aide des événements : onclick, onmousedown, onmouseup, onmouseover et onmouseout ont été traitées afin d’être déclenchées également aux événements claviers : onkeypress, onkeydown, onkeyup, onfocus, onblur.

1.9. Standard

La déclaration de la doctype html5 est valide W3C. La langue de la page est spécifiée dans l’entête.

1.10. Structures

Un titre de niveau 1  est utilisé pour le titre de la page, les titres de niveau 2, 3, 4, 5 et 6 sont utilisés à bon escient afin de décrire le contenu suivant et leur hiérarchie est respectée.
Le sémantisme des informations est renforcé en utilisant les balises html correspondant : ul/li pour les listes non numériques, ol/li pour les listes ordonnées, blockquote pour les citations. Les listes de définitions dd/dt ne sont pas utilisées.  
Les documents proposés en téléchargement ne sont pas tous accessibles nativement et aucune version alternative en html n’est proposée. Les contributeurs du site du conseil général de Loir-et-Cher sont sensibilisés sur ce point afin de rendre le contenu de ces documents un maximum accessible et ainsi ne pas bloquer l’accès à l’information.

1.11. Tableaux

Les tableaux sont utilisés uniquement dans un but de présentation de données tabulaires, ils ne sont pas utilisés à des fins de mise en page. Chaque tableau possède des entêtes définies à l’aide des balises th et chaque cellule est reliée à l’entête correspondant à l’aide de l’association id/headers. Chaque tableau possède également un titre (caption) et un résumé (summary).
Page de test : http://www.le-loir-et-cher.fr/votre-conseil-general/acces-associations/demande-de-subvention/

1.12. Textes

Les textes sont disponibles uniquement en langue française, leur syntaxe est prévue pour simplifier la compréhension.