Corrections pour améliorer l'accessibilité

[slafayIGN]

• [x] Dans tous les formulaires, il faut commencer par la mention "Sauf mention contraire “(optionnel)” dans le label, tous les champs sont obligatoires" (relevé sur le formulaire de contact mais valable partout)
• [x] Dans le formulaire de contact, préciser le format attendu pour le champ email en rajoutant un hint text "Format attendu : nom@domaine.fr"
• [x] ( ❗ correction react-dsfr) Dans le formulaire de contact, le champ textarea ne doit pas avoir d'attribut type. Une correction de react-dsfr Input est nécessaire https://github.com/codegouvfr/react-dsfr/issues/159
• [x] Pour les champs Nom, Prénom, Email, Organisation, ajouter l'attribut autocomplete avec la valeur adéquate : https://accessibilite.numerique.gouv.fr/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete
• [x] #50
• [x] Supprimer le scroll horizontal sur la page accessibilité (dû au contenu, éviter les chaines insécables de plus de 35 caractères)
• [x] Sur la page d'accueil, les images de décorations qui n'ont pas de alt doivent porter un attribut role
• [x] Les illustrations des articles ne doivent pas avoir une valeur de largeur 100%
• [ ] Les aria-describedby doivent toujours pointer sur des éléments présents dans la page
• [x] Le contenu des accordéons doit être au minimum dans des balises <p> et non directement dans les <div>
• [x] Remplacer les <h4> de la liste de "ce que vous pouvez faire..." par des <h3>
• [x] ( ❗ correction react-dsfr) Dans la liste des actualités, les titres devraient également être des <h2> et non des <h3>. Le composant Card de react-dsfr nécessite une modification https://github.com/codegouvfr/react-dsfr/issues/160
• [x] Dans la liste des questions fréquentes, les titres des accordéons également
• [ ] (❗ une correction sera apportée au DSFR, h2 ou p pour ne pas donner trop de poids SEO à cet élément, ce n'est pas encore tranché) Dans le footer "Nos partenaires" est en <h4> et devrait être en <h2>
• [ ] Dans la liste des actualités, il y a une incohérence entre l'ordre de présentation visuel et l'ordre des éléments dans le code (contenu des cards avant le header)... correction à préciser.
• [x] ( ❗ correction react-dsfr) Dans le pied de page, les liens externes doivent porter l'infobulle "intitulé du lien - ouvre une nouvelle fenêtre" https://github.com/codegouvfr/react-dsfr/issues/153

Pour la conformité DSFR s'ajoute :

• [x] ~En page d'accueil : "Pour aller plus loin" doit avoir l'apparence d'un lien ou d'un tag~ (onglets abandonnés ici le 22/09/2023)
• [x] L'icône de Se connecter doit être la variante "fill"
• [x] La source de toutes les images doit être présente
• [ ] Un fil d'ariane est recommandé
• [x] ( ❗ correction react-dsfr) Les badges en haut des actualités doivent être des tags (car ce ne sont pas des états ou des statuts) https://github.com/codegouvfr/react-dsfr/issues/164

Recommandation pour le contenu des articles :

• fournir toujours une alternative textuelle pertinente pour toutes les images
• s'il y a des notes et des renvois dans un article, ils doivent être fonctionnels et pas juste visuels
• éviter les chaines insécables trop longues (~35 caractères) qui vont créer des scrolls horizontaux sur les petites résolutions

Une ressource plus générale : https://www.accede-web.com/notices/editoriale-modele/

[slafayIGN]

Première salve de modifications : https://github.com/IGNF/cartes.gouv.fr/commit/14fc4955bdb5bb0b8b93738711ea63b12f2793c8

[slafayIGN]

Les 2 points suivants ne sont plus suivis car ils concernent des évolutions du DSFR ou de son implémentation dans react-dsfr :

• la balise de "Nos partenaires" dans le footer
• l'incohérence entre code et présentation visuelle des cards

L'implémentation du fil d'ariane fait l'objet d'un ticket à part : #400

Ce ticket est donc clos.