image floue

Accessibilité du portail du Compte Personnel d’Activité

La Caisse des Dépôts a apporté un soin particulier pour rendre le présent site accessible, quels que soient les techniques, périphériques, navigateurs utilisés et pour tout utilisateur, en particulier les personnes en situation de handicap.

Ergonomie, facilité de navigation et d’accès à l’information

Vous pouvez sauter de lien hypertexte en lien hypertexte en utilisant les touches de tabulations de votre ordinateur. 

Taille du texte

Pour un meilleur confort de lecture, vous pouvez agrandir ou réduire la taille du texte sur chaque page de ce site.

Comment faire ?

Si vous disposez d’une souris à molette, appuyez sur la touche Ctrl (sous Windows) et activez simultanément la molette de votre souris, dans un sens ou dans l’autre.

Sinon, appuyez simultanément sur la touche Ctrl et sur la touche + du pavé numérique pour agrandir le texte, ou sur la touche Ctrl et sur la touche - du pavé numérique pour le réduire. 

Optimisation

Le portail du compte personnel d’activité est optimisé pour :

  • Microsoft Internet Explorer 11 et supérieur
  • Google Chrome 43 et supérieur
  • Mozilla Firefox 37 et supérieur
  • Apple Safari 8 et supérieur
  • Android 6 et supérieur
  • Safari Mobile 7 et supérieur

Configuration de votre ordinateur

 

1.1.1 Règle et version

Date de génération

14/11/2016

Version du RGAA

3.0

1.1.2 Technologie utilisée

Ci-dessous la liste des technologies utilisées sur le site :

  • HTML 5,
  • Javascript,
  • CSS.

1.1.3 Agents utilisateurs et technologies d'assistance utilisées pour vérifier l’accessibilité des contenus

Ci-dessous la liste des technologies utilisées pour conduire la vérification de conformité :

1.1.4 Page du site ayant fait l’objet de la vérification de conformité

L'échantillon évalué comporte les pages suivantes :

  • La page d’accueil ;
  • Une page témoignage ;
  • La page de contact

1.1.5 Résultats des tests

Analyse globale

L’analyse concerne 3 pages au total. Elle met en évidence une conformité globale de 71 %.

Dans le détail, 154 tests ont été effectués dont 51 tests sont conformes, 24 tests donnent un résultat non conforme. 79 critères sont non-applicables.

Résultats par niveau de priorité

 

Niveau

Nombre de critères

Validés

Non validés

Non Applicables

Conformité

Niveau A

128

39

20

69

66%

Niveau AA

26

20

4

2

83%

Total A+AA (niveau de référence)

154

51

24

79

71%

Niveau AAA

33

9

0

24

100%

Total A+AA+AAA

187

68

24

95

74%

 

1.1.6 Résultats détaillés des non conformités

La page d’accueil
 

Table 2. Résultat de non conformité détaillé pour la La page d’accueil

Thématique/Numéro

Résumé

Niveau

Non conformité

Images

Image 1.2

Critère 1.2 [A] Pour chaque image de décoration ayant une alternative textuelle, cette alternative est-elle vide ?

A

Les images ci-dessus sont des images de décoration. Par conséquent, leurs alternatives doivent être vides. En effet, l’information est présente à proximité de celles-ci. Pour éviter la redondance d’information l’alt doit rester vide.

Image 1.3

Critère 1.3 [A] Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?

A

Les images ci-dessus sont entourées par la balise <a>. Si l’alternative de ces images est vide, alors l’intitulé du lien est vide. Les images doivent avoir un alt correspondant à la destination du lien.

Couleurs

Couleur 3.1

Critère 3.1 [A] Dans chaque page Web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

A

Le menu de navigation doit indiquer visuellement la page en cours autrement que par

la couleur. Il faudrait un signe graphique pour indiquer cet état. Ceci peut-être un soulignement, une bordure, une forme distincte. De plus on demandera la présence d’un attribut title reprenant l’intitulé du lien et la mention page active.

Couleur 3.3

Critère 3.3 [AA] Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?

AA

L’image ci-dessus présente deux cas de figure :

Un contraste insuffisant qui ne rend l’information accessible que pour certains utilisateurs. L’information est ici : une nouvelle fonctionnalité est en cours de réalisation par CPA. Il faudrait que le texte soit visible, la pastille « à venir » permettant de bien discriminer l’élément par rapport aux autres éléments de la liste. Le second cas de figure géré par le cadre des WCAG (omission pour le moment dans le RGAA) concerne les éléments qui ont un contraste insuffisant pour indiquer que l’élément est inactif : https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audiocontrast-contrast... paragraphe incidental.

En d’autres termes : soit l’élément conserve le pictogramme et doit avoir un contraste suffisant, soit il perd son pictogramme et conserve un contraste insuffisant.

Liens

Lien 6.2

Critère 6.2 [A] Pour chaque lien ayant un titre de lien, celui-ci est-il pertinent ?

A

Les liens ont des attributs title inutiles qu’il faudrait par conséquent supprimer

Lien 6.5

Critère 6.5 [A] Dans chaque page Web, chaque lien, à l’exception des ancres, a-t-il un intitulé ?

A

Comme vu précédemment, (critères 1.3) les images-liens suivantes n’ont pas d’intitulé.

Éléments obligatoires

Elements obligatoire 8.2

Critère 8.2 [A] Pour chaque page Web, le code source est-il valide selon le type de document spécifié (hors cas particuliers) ?

A

Le bouton de menu a un élément <div> (block) enfant de <button>.

Utiliser à la place les éléments <span> (inline) dans le code : <span class="hamburger"> <span class="menui top-menu"></span> <span class="menui mid-menu"></span> <span class="menui bottom-menu"></span> </span>

Ajouter la propriété display:block en CSS.

Elements obligatoire 8.3

Critère 8.3 [A] Dans chaque page Web, la langue par défaut est-elle présente ?

A

La langue du document n’est pas indiquée. Veuillez indiquer la langue par défaut dans la balise <html> comme ceci : <!DOCTYPE html> <html lang="fr" >

Elements obligatoire 8.9

Critère 8.9 [A] Dans chaque page Web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?

A

L’élément ci-dessus est entouré d’un <a> désactivé par un javascript. L’élément doit être remplacé par un <span>. L'élément <a> « pollue » la liste de liens par les technologies d’assistance et va perturber l’expérience utilisateur (lien inopérant).

Présentation de l’information

Présentation de l’information 10.2

Critère 10.2 [A] Dans chaque page Web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?

A

Dans l’image ci-dessus, l’information proposée disparaît lors de la désactivation des css.

En effet, l’image est dans la CSS et l’information

Présentation de l’information 10.4

Critère 10.4 [AA] Dans chaque page Web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200%, au moins ?

AA

L’image ci-dessus est zoomée à 200%. Afin d’éviter que le texte ne soit difficilement lisible pour les utilisateurs, on ajoutera la propriété css : word-wrap : break-word sur #block-menu-menu-parcours .slider-panel--title a b.

Attention : ce critère interdit les déclarations de police avec une unité fixe comme le px. Les déclarations de taille de police doivent utiliser une taille relative : em, rem, %, vh etc.

Les tailles de polices ne doivent plus avoir de taille fixe. En mode mobile ou tablettes (via les media queries) un certains nombres d’éléments qui ont pu être corrigés préalablement retrouvent une taille de police fixe en css. Il faudrait contrôler et corriger les CSS.

Présentation de l’information 10.7

Critère 10.7 [A] Dans chaque page Web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?

A

Le bouton de menu dans firefox devrait avoir un outline visible. Pour corriger ce problème, ajouter la propriété suivante : button:-moz-focusring{outline:1px dotted black;}.

Formulaire

Formulaire 11.1

Critère 11.1 [A] Chaque champ de formulaire a-t-il une étiquette ?

A

L’élément de formulaire ci-dessus n’a pas de <label>.L’attribut placeholder n’a pas vocation a remplacer le label. Pour corriger, il faut ajouter un <label> explicite comme « rechercher dans le site ».

L’élément <label> devra avoir un attribut for correspondant à l’atribut id du champ <input> correspondant.

Cet élément <label> devra être visuellement accolé à son champ <input> correspondant.

Formulaire 11.14

Critère 11.14 [A] Dans chaque page Web, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?

A

Le menu de navigation doit indiquer visuellement la page en cours autrement que par la forme, taille ou position. Le lien de la page en cours doit être discriminer des autres liens par une autre couleur. La couleur devra être suffisamment contrastée.

Navigation

Navigation 12.4

Critère 12.4 [AA] La page "plan du site" est-elle pertinente ?

AA

Le plan du site doit permettre de comprendre la structure et, a minima, d’accéder à

l’ensemble des rubriques et des fonctionnalités du site.

La correction consiste ici à ajouter les rubriques et sous-rubriques manquantes du site.

Navigation 12.10

Critère 12.10 [A] Dans chaque page Web, les groupes de liens importants (menu, barre de  navigation…) et la zone de contenu sont-ils identifiés ?

A

Les éléments suivants doivent être correctement identifiés :

• La zone d’en-tête de la page possède un rôle ARIA banner ;

• Le menu de navigation principal possède un rôle ARIA navigation ;

• La zone de contenu principal possède un rôle ARIA main ;

• La zone de pied de page possède un rôle ARIA contentinfo ;

• Le moteur de recherche sur le site possède un rôle ARIA search ;

• Les rôles ARIA banner, main, contentinfo et search sont uniques dans la page ;

• Le rôle ARIA navigation est réservé aux zones de navigations principales et secondaires.

Navigation 12.13

Critère 12.13 [A] Dans chaque page Web, l’ordre de tabulation est-il cohérent ?

A

Le bouton Accéder à mon compte est premier dans l’arbre DOM mais il est visuellement mis après les liens tags du carrousel. La correction à effectuer est le déplacement du bouton Accéder à mon compte dans le code html de la page.

Consultation

Consultation 13.2

Critère 13.2 [A] Dans chaque page Web, pour chaque ouverture de nouvelle fenêtre, l’utilisateur est-il averti ?

A

Chaque fois qu’un lien ou qu’un bouton déclenche l’ouverture d’une nouvelle fenêtre dans le navigateur, l’utilisateur doit être prévenu par l’ajout d’une mention du type « (nouvelle fenêtre) ». L’alternative de l’image devra avoir l’alternative ouverture dans une nouvelle fenêtre.

Afin d’éviter les erreurs possibles lors de la rédaction de contenu, un script en javascript pourrait cibler les attributs target blank et ajouter dans la balise aria-label="intitulé du lien + ouverture dans une nouvelle fenêtre."

 

La page de témoignage
 

Table 3. Résultat de non conformité détaillé pour la La page de témoignage

Thématique/Numéro

Résumé

Niveau

Non conformité

Structuration

Structuration 9.1

Critère 9.1 [A] Dans chaque page Web, l’information est-elle structurée par l’utilisation appropriée de titres ?

A

La structure des titres doit être à la fois logique et exhaustive.

C’est-à-dire :

• Qu’il ne doit pas y avoir de « sauts » ni d’incohérences dans la structure des titres (passage brutal d’un <h1> à un <h3> sans <h2> intermédiaire, par exemple).

• Que tous les éléments qui ont valeur de titres doivent être balisés comme tels. Ici on notera que la hiérarchie n’est pas respectée

La page contact
 

Table 4. Résultat de non conformité détaillé pour la La page contact

Thématique/Numéro

Résumé

Niveau

Non conformité

Présentation de l’information 9.1

Critère 9.1 [A] Dans chaque page Web, l’information est-elle structurée par l’utilisation appropriée de titres ?

A

Le bouton « protection des données personnelles » est un titre, il devrait être entouré par les éléments de balise <h2>

Formulaire

Formulaire 11.4

Critère 11.4 [A] Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés ?

A

Les éléments labels ne sont pas suffisamment accolés à leurs champs respectifs. Dans la CSS, il faut mettre la valeur de la propriété padding-right à 0. Le champ « clé » n’a pas de label visible.

Formulaire 11.9

Critère 11.9 [A] Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent ?

A

Les boutons de formulaire doivent avoir un intitulé explicite. La fonction du bouton doit être compréhensible à la lecture du seul intitulé et cela en dehors de tout contexte. Ainsi les boutons formulaires : Ok, Valider, Confirmer, Envoyer sont à proscrire. Afin de ne pas dégrader le design du site, vous pouvez rendre le bouton plus explicite via l’attribut aria-label.

Formulaire 11.10

Critère 11.10 [A] Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?

A

Les attributs placeholder ne sont pas suffisamment robustes pour aider les utilisateurs à saisir correctement leurs données. Par exemple ceux-ci disparaissent pendant la saisie.

La technique indiquant le caractère obligatoire d’un champ n’est pas suffisamment robuste.

Formulaire 11.11

Critère 11.11 [AA] Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?

AA

L’indication des erreurs n’est pas suffisamment précise. Ainsi, pour les numéros de sécurité sociale il faut indiquer un exemple de saisie attendue comme vu précédemment.

L’intitulé : « Le champ Numéro de sécurité sociale (clé) est requis » n’est pas suffisant. Il faut indiquer le type de format attendu.