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

Problème de sémantique HTML dans le composant Header #216

Open
humchaop opened this issue Jan 10, 2024 · 12 comments
Open

Problème de sémantique HTML dans le composant Header #216

humchaop opened this issue Jan 10, 2024 · 12 comments

Comments

@humchaop
Copy link

Il y a une erreur de sémantique dans le composant Header.
Le texte du logo "Intitulé officiel" est dans une balise <p> inclus dans une balise <a>.
Les balises <p> n'étant pas autorisées dans les balises <a>, nous avons une anomalie d'accessibilité.

Il faudrait supprimer la balise <p> ou la remplacer par un <span>.

Exemple de code :
Composant header simple
Composant Header simple

Composant Header simple avec nom du service
Composant Header simple avec nom du service

@garronej
Copy link
Collaborator

Pourrais tu regarder si c'est le cas dans le template officiel?
https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete

Si c'est le cas, il faudrais traitée cette issue upstream avant

@humchaop
Copy link
Author

C'est bien le cas. Quelle est la marche à suivre dans ce cas ?

@garronej
Copy link
Collaborator

Rejoindre le slack du DSFR et reporter le problème sur le canal #aide_dev.
Je vais le faire.

@garronej
Copy link
Collaborator

image

J'implémenterais ce qu'ils suggère

@enguerranws
Copy link
Collaborator

Ah, je n'avais pas vu la discussion et ai répondu sur l'issue du footer : #217 (comment)

@enguerranws
Copy link
Collaborator

Pour suivre plus simplement la discussion, je copie mon retour ici :

Inclure des balises block dans un élément était une erreur de validation en HTML / XHTML 4 et moins, ce n'est plus le cas en HTML5.
Ça ne pose (à ma connaissance), pas de souci d'accessibilité également : l'arbre d'accessibilité me semble clean (cf. screenshot), l'élément est bien accessible au clavier et la lecteur de texte fonctionne bien également.
Capture d’écran 2024-01-15 à 15 27 35
@humchaop Je reste à dispo si tu constates un impact négatif, pour éventuellement faire remonter ça à l'équipe du DSFR (ici, nous ne faisons que suivre l'implem HTML / CSS qu'ils mettent en place).

@garronej
Copy link
Collaborator

@humchaop

image

@humchaop
Copy link
Author

J'ai crée le ticket suite à un audit sur l'un des sites que l'on développe. Je vais voir avec l'auditeur ce qu'il en est.

@enguerranws
Copy link
Collaborator

@humchaop aussi, n'hésite pas à partager l'url de ton projet (si tu peux).

@humchaop
Copy link
Author

@enguerranws je ne peux pas ce sont des projets internes du MEAE

@enguerranws
Copy link
Collaborator

@humchaop des nouvelles au sujet de cette demande ?

@enguerranws
Copy link
Collaborator

@humchaop s'il n'y a pas de nouvelles, je propose de clore le ticket.

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

No branches or pull requests

3 participants