Liens explicite (Critère 6.1) - Accueil

[julieSalha]

@Afin de rendre les liens de la page d'accueil explicites, voici les corrections à apporter :

• [x] Lien de retour à l'accueil (placé dans le header) :

Remplacer et compléter l'attribut title par un attribut aria-label de la manière suivante : aria-label="demarches-simplifiees.fr - Aller à la page d’accueil". Correction à appliquer en affichage mobile et desktop.

Ceci afin de reprendre le contenu visible et de préciser la fonction du lien.

L'attribut aria-label est mieux pris en compte par les technologies d'assistance que l'attribut title.

Plus d'informations ici : Compléter les liens et les boutons non explicites avec aria-label ou title

• [x] Penser également à la traduction du passage de texte de l'attribut pour la version anglaise du site.

• [x] Pour l'image-lien beta.gouv.fr placée dans le footer :

Option 1 :

=> intégrer l'image-logo directement dans le code source et non grâce à des propriétés CSS (balise <img>) pour ne pas que le contenu disparaisse lorsque les styles CSS sont désactivés. => lui ajouter le texte alternatif "Beta.gouv.fr" (texte visible dans l'image) grâce à l'attribut alt="Beta.gouv.fr". => supprimer l'attribut aria-label="Beta.gouv.fr" sur la balise <a> => l'attribut title de la balise <a> doit contenir à minima l'intitulé du lien. Ici : "Beta.gouv.fr". <a title="Beta.gouv.fr [...]">[...]</a>

Option 2 :

Supprimer l'attribut title du lien. L'attribut aria-label est mieux pris en compte par les technologies d'assistance.

• [x] Pour le lien "la direction interministérielle du numérique (DINUM)" placé dans le footer, ajouter l'attribut title="la direction interministérielle du numérique (DINUM) - Nouvel onglet" (cf Documentation DSFR - Liens)

• [x] Pour tous les liens s'ouvrant dans un nouvel onglet, le préciser grâce à l'attribut title de la même manière que le lien de la DINUM (title="intitulé du lien - Nouvel onglet"). Sur cette page :

1. "Aide"
2. "Accéder à l’aide en ligne"
3. "Le code source"
4. "legifrance.gouv.fr"
5. "gouvernement.fr"
6. "service-public.fr"
7. "data.gouv.fr"
8. "licence etalab-2.0"
9. Comment trouver ma démarche ?
10. Accéder à l’aide en ligne
11. Un problème avec le site ?

[colinux]

Est-ce que tu confirmes qu'on peut définir l'aria-label comme tu l'indiques, tout en conservant tel quel l'attribut title ? (pertinent pour les navigateurs graphiques, avec l'affichage d'un tooltip)

Corollaire: pour le lien/image beta.gouv, les 2 options impliquent de supprimer le title, et donc de perdre une information importante pour les navigateurs graphiques. D'ailleurs le DSFR précise qu'il le faut bien, dans le cadre de l'option 1 (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pied-de-page , exemple "avec logo opérateur")

[julieSalha]

Pour l'image-lien beta.gouv.fr placée dans le footer (Option 1) :

• L'attribut aria-label n'est pas nécessaire, l'intitulé du lien est défini par le texte alternatif de l'image
• Il est possible d'ajouter un attribut title sur la balise <a> du lien afin d'ajouter une information graphique au survol de la souris. Dans ce cas, il faut à minima qu’il contienne l’info du lien, ici le texte alternatif de l'image.

[colinux]

OK donc pour ce lien beta.gouv on est bon :) merci

[julieSalha]

@colinux J'ai ajouté un lien externe du menu Aide placé dans le header : "Un problème avec le site ?"

[julieSalha]

C'est OK en PROD. Bravo :)

[julieSalha]

@colinux Idéalement, pour tous les liens externes, l'image "nouvel onglet" devrait être intégrée dans le code source avec un texte alternatif "nouvel onglet". Actuellement, elles sont affichées grâce à des propriétés CSS ce qui entraîne qu'elles disparaissent lorsque les styles sont désactivées. Le DSFR ne le permet pas actuellement.

De plus, d'après le W3C, il vaut mieux ne pas ouvrir de nouvelles fenêtres et onglets car ils peuvent être déroutants pour les gens, en particulier les personnes qui ont du mal à percevoir le contenu visuel.