Attributs des iframes

[CIMEOS]

Bonjour,

Contexte

Suite à plusieurs audits d'accessibilité réalisés, j'ai remarqué une erreur qui revient souvent au niveau des cadres de vidéos (<iframes>).

Les services dans lesquels j'ai pu apercevoir ce problème sont principalement les vidéos (youtube, vimeo et dailymotion) mais il se peut que ca soit plus général que ça.

Problème

Il semblerait que les attributs width et height ne sont pas cohérents sur ce type de balise HTML et posent des soucis d'accessibilité.
Ci joint le critère correspondant : https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.2

Solution idéale

Le mieux pour l'accessibilité serait de ne jamais les afficher mais il se peut qu'il y ait des soucis d'affichage ou de rétro compatibilité selon les sites j'imagine.

Solution proposée si problèmes de rétro compatibilité

Ne pas les afficher du tout dans la balise lorsqu'ils ne sont pas renseignés dans la configuration (car j'ai remarqué que lorsqu'on ne configure par les valeurs width et height dans les paramètres la balise générée contient quand même les attributs).

Cela permet de les afficher pour les personnes qui en auraient besoin, et pour les personnes qui ne voudraient pas les avoir pour des questions d'accessibilité (ou autre), il y aurait une solution "simple".

Merci d'avance !

[lucmuller]

De mémoire, les attribut width et height ne sont autorisés que sur les balises pour les iframes (et pour tous les types de placeholder TAC qui acceptent des attributs width et height il faudrait utiliser les attributs data-width et data-height.

Et pour chacun des services correspondant s'assurer qu'il utilisent la méthode getAttribute (ou je ne sais plus laquelle) interne à TAC qui gère le fallback de de l'attribut vers data-attribut cela assurerai la rétrocompatibilité avec les placeholder qui resteraient mal saisis.

Et ajuster la documentation des services en correspondance évidemment.

[nicozerr]

Bonjour,

Comme l'indique le RGAA dans son glossaire, les attributs width, height et frameborder ne sont pas autorisés sur les balises <iframe> et <div>. Ils peuvent être aisément remplacés par les propriétés CSS width, height et border.

Dans mes audits d'accessibilité, j'indique "non conforme" lorsque ces attributs sont implémentés sur les iframe. Mes équipes de développement parviennent à les retirer en JS via des services custom de Youtube et Vimeo.

Selon moi, TAC devrait :

• injecter les propriétés CSS width et height via un attribut style sur les balises <iframe>, définies par les attributs data-width et data-height sur la balise <div> du placeholder TAC ;
• ne pas utiliser l'attribut frameborder sur les balises <iframe>, et ajouter une propriété CSS border:0 sur les balises <iframe> dans son CSS.

Cela pourrait être assez chronophage de le faire sur tous les services gérés par TAC, et mettre à mal la rétrocompatibilité.

@AmauriC qu'en penses-tu ?

[lucmuller]

• ne pas utiliser l'attribut frameborder sur les balises <iframe>, et ajouter une propriété CSS border:0 sur les balises <iframe> dans son CSS.

Ceci est me semble assez simple a faire et pourrait être réalisé dans un premier temps. Je vais voir si je trouve quelques minutes. pour le mettre en place.

[AmauriC]

Merci pour vos retours.

Une solution pourrait être d'ajouter une fonction tarteaucitronAddFrame(url, title, width, height) pour remplacer dans le fichier services tous les return "<iframe...

J'ai regardé rapidement et il ne semble pas y avoir besoin de plus de paramètres.

Si c'est ok je peux m'en occuper rapidement.

[nicozerr]

Si tu veux appliquer une fonction commune à tous les services qui génèrent une iframe, tu vas avoir besoin de plus de paramètres selon chaque service : frameborder, scrolling, allowtransparency, webkitallowfullscreen, mozallowfullscreen, allowfullscreen.

J'ai un peu de mal à comprendre le fonctionnement de ta fonction. Comment permettra-t-elle de ne pas avoir l'attribut frameborder par exemple ?

[AmauriC]

Quelque chose comme ça:

"tarteaucitronAddFrame": function (serviceId, url, title, width, height, attr) {
   return '<iframe class="tarteaucitronFrame_' + serviceId + '" src="' + url + '" title="' + title + '" style="width:' + width + ';height:' + height + ';border:0;" ' + attr + '></iframe>';
}

C'est surtout que quitte à reprendre toutes les frames du fichier services, autant prévoir le coup pour que ce soit plus simple à la prochaine modification.

Mais possible que je parte dans la mauvaise direction.

[nicozerr]

Ma foi ça me semble bien.
Juste prévoir que si data-width et data-height n'existent pas, qu'on ne se retrouve pas avec style="width:; height:;". Pareil avec title.
À voir aussi comment sera géré l'argument attr.

Si tu peux implémenter ça sur une branche à part, histoire de pouvoir tester avant le merge sur master ;)