Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Politique de confidentialité - intitulé de lien non pertinent #6297

Open
Marie-a11y opened this issue Nov 15, 2024 · 0 comments
Open

Politique de confidentialité - intitulé de lien non pertinent #6297

Marie-a11y opened this issue Nov 15, 2024 · 0 comments
Labels

Comments

@Marie-a11y
Copy link
Collaborator

Description
Lorsqu'un lien à un intitulé visible (texte visible à l'écran) et un nom accessible (intitulé ajouté dans le code source lu par les lecteurs d'écrans), le nom accessible doit absolument reprendre l'intitulé visible.
Les informations des icônes informatives présentent dans un lien image doivent également être présente dans le nom accessible du lien

Reproduction
Etapes à suivre pour reproduire le bug

  1. Aller à https://code.travail.gouv.fr/politique-confidentialite
  2. Inspecter les liens : "L'adresse suivante", "https://us.ovhcloud.com/legal/data-processing-agreement" "Cookies et traceurs : que dit la loi ?" et "Cookies : les outils pour les maîtriser"

Comportement attendu

  • Tous ces liens doivent avoir dans leur nom accessible la mention "- ouvre une nouvelle fenêtre". Au choix :
  • via un attribut title, et dans ce cas la valeur devra prendre le format "[intitulé visible du lien] - ouvre une nouvelle fenêtre"
  • via un texte caché en class="sr-only" où dans ce cas seul la mention "ouvre une nouvelle fenêtre" peut être ajoutée

Pour le lien "l'adresse suivante" :

  • soit l'attribut title est utilisé et le nom accessible doit reprendre l'intitulé visible. Par exemple : <a title="Utiliser l'adresse suivante pour adresser une réclamation (plainte) à la CNIL - ouvre une nouvelle fenêtre" target="_blank" href="https://www.cnil.fr/fr/cnil-direct/question/844">l’adresse suivante</a>
  • soit le nom accessible est ajouté via un texte caché en class="sr-only" ce qui peut donner par exemple : <a target="_blank" href="https://www.cnil.fr/fr/cnil-direct/question/844">l’adresse suivante <span class="sr-only">Adresser une réclamation (plainte) à la CNIL - ouvre une nouvelle fenêtre</span></a>

pour créer une class sr-only, voir cet article : https://kittygiraudel.com/2016/10/13/css-hide-and-seek/

Screenshots
image
image
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant