Repasse globale accessibilité

[johangirod]

Note

Meta issue pour suivre les avancées sur la repasse accessibilité.

/

Navigation au clavier

• impossible de se déconnecter
• (à vérifier) pas de focus trap sur la modale de feedback pour les agents
• pas de lien rapide pour aller au contenu

Hiérarchie de l’information

• « Page récemment consultée » devrait être un h2
• « Rechercher une entreprise » devrait être un h2
• « Retrouvez nous sur les réseaux sociaux » devrait être un h2
• Ajouter un h2 en aria-hidden « Noud contacter » pour le bouton de contact
• « Vérifier les informations légales publique... » ne devrait pas être un h*

Alternatives aux images

• Ajouter un aria hidden sur le svg du logo
• du bouton dites-nous tout
• du symbole « user » à côté de espace agent
• ainsi que le « i » du warning tout en haut de page

Structure des pages

• Le footer devrait avoir des titres h*
• Retrouvez nous sur les réseaux sociaux devrait être dans le footer
• Les liens du footer devraient avoir des aria-label (pour les nouvelles fenetre)
• Ajouter un title sur le lien de la home
• Déplacer le warning en haut de page dans un aside

Autre

• Le lien « Insee » dans la bannière en haut n'est pas souligné
• Le bouton de déconnexion n'est pas un bouton (il est focusable pourtant)
• Ajouter des aria-live dans le formulaire « dites nous tout » pour les agents
• Vérifier que la barre de chargement est accessible

/rechercher

Titre des pages

• le titre n'est pas mis à jour avec la recherche courante

Navigation au clavier

• Focus trap dans le header à enlever
• Les boutons de filtre ne sont pas focusable
• Il manque des focus trap dans les dialog des filtres

Formulaires

• Zone géographique : label pas relié à l'input
• Zone géographique : devrait être un combobox avec une listbox dont les options sont groupées
• Label manquant partout
• Structure : le type / les labels devraient être des radio button
• Financer : les sliders doivent implémenter le pattern slider

Hiérarchie de l’information

• Rechercher une entreprise devrait être h1

Alternatives aux images

• La croix pour réinitialiser le filtre n'a pas de texte
• Tous les svg des filtres devrait avoir un aria-hidden

Structure des pages

• Le tutoriel devrait être relié aux filtre avec l'attribut described-by
• Les boutons des filtres devrait être des bouton (et non des labels) avec des description et un attribut aria-expanded (cf disclosure pattern)
• Les dialog des filtre devrait avoir l'attribut modal
• Les liens de résultat devrait être uniquement sur le titre et avoir un aria-label "voir la page"
• Les liens des établissements devraient avoir un aria label
• Uitliser une balise search au lieu de form pour la recherche dans le header (sur toutes les pages avec recherche)
• Utiliser les bons aria role pour le bloc de pagination
• Les résultat de recherche devraient être une liste

Contrastes des couleurs

• Première page et page précédente dans le bloc de pagination n'ont pas le contraste suffisant

Autre

• Les liens des établissement devrait être souligné

/entreprise/

Navigation au clavier

• A la fin d'une section, le focus remonte au début pour aller aux liens vers les source (comportement inattendu)

Alternative aux médias

• Ajouter des aria hidden pour les picto des réseaux sociaux en haut à droite
• Ajouter des aria-hidden pour les «i» des contenu avec tooltip
• Ajouter un aria-hidden pour le cadenas

Hiérarchie de l’information

• Les titre des tabs ne doivent pas être des h2 mais des ul / li
• Un titre h2 navigation devrait être présent en aria-only
• Les liens au milieu de page devraient être préfixé par un h2 avec aria-only. Par ailleurs, les texte en gras à cet endroit devraient être des h3
• Réflechir si le contenu principal ne devrait pas être à l'intérieur des onglets, et taggué comme tel avec une balise main. (et que le lien jump to main contenu redirige dessus)

Alternatives aux images

• Ajoute un aria-label au chargement de la TVA / EORI

Structure des pages

• Utilise un aria-current pour les liens de navigation (tab)
• Dans les sections, les liens vers les sources doivent être une liste
• Les section doivent être des section, avec footer et header
• Les liens dans les micro section « général », « justificatif d'existence ... » doivent être des listes
• Les premier td des two colum table devrait être des th avec le scope row
• Vérifier que les aria-label de tous les liens sont bons
• Ajouter des aria-label aux tables d'établissement
• Mettre le « réservé aux agents publics » en aside

/justificatif/

Hiérarchie de l’information

• Ajouter un h3 aria-hidden pour accéder directement aux document à télécharger dans la section inscription au RNE
• Dans la section établissement, séparer le siège social des autres établissement en activité plutôt que d'ajouter le texte « siège social » à la fin de l'adresse (pas visible pour les lecteurs d'écran)

Structure des pages

• Vérifier que les aria-label de tous les liens sont bons

/dirigeants

Structure des pages

• Les warning / info devraient être en aside
• Vérifier que les aria-label de tous les liens sont bons
• Séparer date de naissance dans une nouvelle colonne du tableau ?

/documents/

Navigation au clavier

• Le bouton « voir tous les 175 document » et « voir moins » devrait être focusable en premier, de tel sorte à pouvoir facilement activer / désactiver
• Les éléments cachés ne devrait pas être navigables dans la liste

Alternatives aux images

• Ajouter des alt sur les symboles des liens vers la conformité
• Ajouter un aria-hiden sur le symbole téléchargement

Structure des pages

• Ajouter un thead en aria-only pour le préciser l'intitulé des colonnes du tableau
• La conformité sociale doit être sous forme de liste

/donnees-financieres/

Navigation au clavier

• Perte du focus lorsqu'on selectionne / deselectionne une valeur à afficher dans le graphe

Alternatives aux images

• Ajouter un titre / description pour le graphe (via figcaption ? )
• Mettre un aria-hidden sur le graphe

Structure des pages

• Ajouter des aria-label sur les liens
• Changer le titre de colonne de table « Annonce » par « Lien de l'annonce » ou « lien » pour uniformiser.
• Déplacer bilan consolidé dans une colonne à part pour faciliter la navigation
• Ajouter un form group et utiliser des label pour pour le chiffre d'affaire / résultat net

Contrastes des couleurs

• Le bleu clair du losange devant résultat net n'est pas assez contrasté

Autre

• La couleur ne doit pas être la seule manière de différencier les deux lignes du graphe (avoir des symboles différents pour les points ? / des lignes avec des pattern différent (dashed)
• La tooltip de « bilan consolidé » et « indicateurs » ne donne pas d'infos.

/annonces/

Structure des pages

• Ajouter des aria-label sur les liens

/labels-certificats/

Hiérarchie de l’information

• Ajouter un sous-titre pour le tableau écart de représentation F/H dans Egapro

Alternatives aux images

• Ajouter un aria-hidden sur les logos RGE

Structure des pages

• Ajouter des aria-label sur les liens
• Utiliser l'attribut « row group» et « colspan» pour le texte « détails » dans la table Egapro
• RGE : Utiliser une liste pour la ligne « travaille avec »
• OPQIBI Ne pas mettre le détail du label dans un tooltip (bcp trop long et casse le style). Utiliser plutôt un champs du tableau ou un lien vers une doc en ligne ?
• Utiliser une liste pour la partie détails dans le bloc organisme de formation (ou mieux, utiliser les colonnes du tableau)
• Utiliser des scope="row" pour les titre de ligne des tableaux dans Egapro

Autre

• Vérifier que les tooltips sont accessible (warning sur FF si tabindex alors que pas de lien / élément interactif)
• Bug : Supprimer le 0 à la fin du bloc certificat OPQIBI
• Bug : certains certificats probatoires de OPQIBI sont dupliqués
• Bug : Qualifelec n'a pas l'air de fonctionner

/divers/

Structure des pages

• Aria-label sur les liens vers les établissement et sur les liens vers CDTN

/lp/agent-public

Structure des pages

• Ajouter un role liste à la soupe de logo (ou ul / li)

Autre

• Enlever le symbole lien externe sur le lien vers les CGU

/administration

Alternative aux médias

• Supprimer alt sur le logo

Hiérarchie de l’information

• Role list pour les administrations
• Ajouter un strong ou h3 pour données transmises

Structure des pages

• Aria-label sur les liens

/faq

Autre

• Section « comment modifier les informations d'une entreprise » : ajouter du contexte au lien dans un aria label

/faq/* et /definition/*

Structure des pages

• Ajouter un aria-current au breadcrumb

Autre

• Ajouter des aria label aux liens dans la section « sur le même sujet »
• Ajouter des aria label à tous les liens depuis le markdown (cf https://github.com/remarkjs/remark-directive)

/definitions

/formulaire/supprimer-donnees-personnelles

Alternatives aux images

• Le symbole de validation dans l'Alert « demande prise en compte » doit avoir un aria-hiden

Structure des pages

• Le lien pour se déconnecter de france connect doit avoir pour label / aria-label « Me déconnecter de france connect »

/a-propos/comment-ca-marche

Structure des pages

• Ajouter les aria-label sur les liens

/a-propos/stats

Alternatives aux images

• Utiliser une version accessible de la page avec des tableaux à la place des charts (cf mon-entreprise)

Structure des pages

• Ajouter les aria-label sur les liens

/a-propos/budget

Structure des pages

• Utiliser un blocquote pour la citation du manifeste de beta
• Utiliser scope="row" pour les titres des postes de dépense dans le tableau
• aria-label sur liens

/a-propos/equipe

Structure des pages

• Aria-label pour les liens

/faq/parcours

Navigation au clavier

• Cf radio-groupe pattern

Formulaires

• Utiliser le radio-group pattern
• Vérifier si avoir des liens indifférencié des options dans un radio groupe n'est pas un anti-pattern (et dans ce cas, modifier pour avoir un gros CTA en bas vers la page concernée)

Structure des pages

• Ajout d'un aria-live sur les section qui s'affichent de manière intéractives
• Les liens dans « quelle informations souhaitez-vous modifier ? » doivent avoir un aria-label, et doivent être dans une liste

Autre

• Bug : lorsque l'on selectionne « modifier l'information de mon-entreprise », la section choix de la question disparait
• De même lorsqu'on clique sur « je ne trouve pas la réponse à ma question »
• Bug : sauvegarder l'état dans le state history pour que cliquer sur précédent après un clic sur un lien retourne à la page avec les questions prérempls
• Vérifier si les liens ne doivent pas être obligatoirement identifés comme tel (soulignement, etc.)

/partager

Alternative aux médias

• Se renseigner sur l'a11y des iframes

Hiérarchie de l’information

• Table des matière devrait utiliser le composant summary (avoir le type nav, etc...)

Alternatives aux images

• Ajouter un alt sur le symbole du QR code à la fin de la phrase « Cliquez en haut à droite de la page, sur le petit logo »

Structure des pages

• Ajouter des arias-label sur les liens

/donnees/sources

Hiérarchie de l’information

• Tous les titres sont des h2

Alternatives aux images

• Ajouter un aria-hidden sur le symbole mail sur le lien « contacter »

Structure des pages

• Ajouter des arias-label sur les liens
• Le sommaire devrait être un nav (et si possible utiliser le composant DSFR)
• La liste des donnée à l'intérieur d'une section doit être une liste (ul)
• La liste des administrations devrait être une liste (se poser la question de la pertinence de l'organisation par administration)

/donnees/api-entreprises

Structure des pages

• Aria-label pour les liens
• Ajout d'un scope row sur la première colonne du tableau

/donnees/api

Navigation au clavier

• Le pattern tooltip pour l'historique de disponibilité n'est peut-être pas le bon. Demander sur mattermost lequel utiliser
• Auto-refresh : est-ce une mauvaise pratique pour l'a11y (ya moyen que le current focus soit perdu). Dans ce cas on peut imaginer l'activer / désactiver via un bouton en haut de page

Hiérarchie de l’information

• On a un enchainement h2 > h3 > h2 > h3, au lieu de h2>h3>h4>h5
• Comme pour /données/sources, on se pose la question si le regroupement par administration est une bonne idée

Alternatives aux images

• Ajouter un alt sur les petites pastilles du sommaire
• Utiliser une forme différente (une croix par exemple) pour les api down

Structure des pages

• Le sommaire devrait être un nav (et si possible utiliser le composant DSFR)
• La section statistique moyenne : utiliser une liste, ou un tableau
• Aria-label pour les liens

Autre

• La tooltip devrait englober le texte « historique de disponibilité »

/vie-privee

Hiérarchie de l’information

• Après le texte « L’Annuaire des Entreprises traite des données à caractère personnel en se basant sur : » ne pas utiliser de liste (liste à 1 élément interndites)

Autre

• Aria-label pour lien + symbole lien externe (en bas)
• Lien vers les garantie dans le tableau des sous-traitants cliquables

/mentions-legales

/departements/**

Titre des pages

• Titre verbeux ? Mettre le département en premier ?

Structure des pages

• Utiliser une liste pour les listes
• Utiliser le pattern pagination pour la pagination
• Vérifier les aria-label des liens
• Vérifier le footer (qui a été changé)

Autre

• Bug « département inconnu » : à supprimer ?

/accessibilite

Autre

• Mettre à jour la Déclaration
• Vérifier si le schéma pluri-annuel actualisé est en PDF a11y ou si il existe une version web
• Aria label sur adresse mail ?

/historique-des-modifications

Formulaires

• aria-live sur les filtre
• legend plus explicite sur les filtres (filtrer par public concerncé)

Alternatives aux images

• Petit cadenas espace agent public

Structure des pages

• Historique sous forme de "ul/li"
• aria-label sur les liens

Autre

• Symbole lien externe

[johangirod]

Separated in #1141 #1142 #1143 #1144 #1145 #1146 #1147 #1149 #1150 #1151 #1152 #1153 #1154 #1155 #1156 #1157 #1158 #1159 #1160