Vous êtes à : Blog > Jour 26 - Les cadres

Jour 26 - Les cadres

Gérer l’insertion d’iframes dans une page.

Ce que j’ai fait :

Ce que j’ai appris

Il était une fois les <frame>

Au début du web, de nombreux sites employaient la technique des jeux de cadres : des petites parties du site étaient stockées dans des pages Hypertext Markup Language (HTML) et appelées ensuite via des cadres (<frame>) dans un fichier parent global ayant la particularité de posséder un conteneur <frameset> à la place du <body>. Des attributs spécifiques permettaient ensuite de paramétrer l’affichage, un peu à la manière des tableaux en dimensionnant des colonnes et des lignes. Par exemple :

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>A simple frameset document</title>
  </head>
  <frameset cols="10%, 90%">
    <frame src="nav.html" title="Main menu" />
    <frame src="doc.html" title="Documents" />
    <noframes>
      <body>
        <a href="lib.html" title="Library link">Select to
        go to the electronic library</a>
      </body>
    </noframes>
  </frameset>
</html>

L’intérêt de cette technique résidait dans l’optimisation du chargement de la page : une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l’époque comme l’explique le site Mozilla sur sa page Des objets aux « iframe » — autres techniques d’intégration(lien externe).

En terme d’accessibilité, les jeux de cadres rendent la navigation plus complexe pour les internautes utilisant une technologie d’assistance, du fait de l’absence de séparation entre structure et contenu. Des internautes n’ayant aucun problème de vision peuvent appréhender l’agencement de cadres comme une seule et même page car visuellement ils ne forment qu’une seule entité. Mais un lecteur d’écran ne peut interpréter qu’un cadre à la fois et non pas l’ensemble des cadres.

Les jeux de cadres présentent également d’autres inconvénients :

  • ils ne respectent pas le principe fondamental du web, à savoir une adresse unique pour chaque page
  • ils rendent impossible l’ajout aux favoris (du fait qu’il n’y a pas une adresse unique)
  • ils posent des problèmes d’indexation par les moteurs de recherche
  • ils causent des problèmes d’impression

Pour toutes ces raisons, les jeux de cadres (<frameset> et <frame>) ne sont aujourd’hui plus supportés en HTML 5 et ne doivent donc plus être implémentés. Cette recommandation fait même l’objet d’une bonne pratique Opquast : le site n’emploie pas la technique des jeux de cadres(lien externe).

A l’aube des temps modernes : les <iframe>

Les <iframe>, contraction de inline-frame, permettent d’intégrer des contenus tiers dans une page en cours. Il peut s’agir de vidéos, de cartes géographiques, de bandeaux publicitaires… Par exemple :

<iframe title="Carte géographique"
    width="400" height="300"
    src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
</iframe>

Les <iframe> font partie de la spécification HTML 5 et peuvent donc être utilisés dans la conception de sites, sous réserve de respecter certaines règles pour garantir leur accessibilité et leur sécurité.

Pour résumer, l’<iframe> est une boîte placée n’importe où sur la page du navigateur, tandis que le jeux de cadres (<frameset> et <frame>) est un ensemble de boîtes assemblées pour constituer un site.

Les <iframe> peuvent être utilisés tandis que les <frameset> et <frame> sont à proscrire.

Cadres et accessibilité

On retrouve deux critères d’accessibilité relatifs aux cadres au sein des Web Content Accessibility Guidelines (WCAG) et du Référentiel Génral d’Amélioration de l’Accessibilité (RGAA) :

  • Chaque cadre a-t-il un titre de cadre ?
  • Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ?

Le RGAA évoque à la fois les balises <frame> et <iframe> pour parler de cadres, néanmoins pour toutes les raisons précédemment évoquées, nous nous intéresserons uniquement aux éléments <iframe>.

Renseigner un attribut title pertinent

Ajouter sur la balise <iframe> un attribut title permettant de décrire de manière claire et concise son contenu. Par exemple :

<iframe title="La page Wikipédia sur Robert Louis Stevenson" src="https://fr.wikipedia.org/wiki/Robert_Louis_Stevenson"></iframe>

Toutefois il est important de garder en tête que peu de lecteurs d’écran vocalisent l’attribut title.

Masquer les <iframe> techniques

Il existe des <iframe> dont le rôle est purement technique et qui ne sont pas visibles pour les internautes, par exemple une <iframe> qui execute un script pour pouvoir enregistrer les actions de l’utilisateur sur la page.

Dans ses recommandations accessibilité, Orange préconise de dissimuler ces <iframe> techniques aux technologies d’assistance en ajoutant un attribut aria-hidden="true", ainsi qu’un attribut tabindex pour empêcher le focus sur l’<iframe>. Par exemple :

<iframe title="contenu technique" aria-hidden="true" tabindex="-1" src="http://www.site-technique.com/"></iframe>