retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Cadres > Fiche 2.9

Fiche 2.9 : Y a-t-il un maximum de trois cadres dans la page ?

Carte d'identité

  • Critère AccessiWeb : 2.9
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 13.4

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

revenir en haut de la page

Comment évaluer

Par le code source

  1. Ouvrir le code source de la page établissant la structure des cadres. Cette structure est définie entre les balises FRAMESET et /FRAMESET.
  2. Vérifier le nombre d'éléments FRAME qui se trouvent entre ces balises.

Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

Evaluer avec la barre AccessiWeb (version 1.0) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "2. Cadres" de la Barre AccessiWeb, activer le critère 2.9.
  3. Les informations sur tous les cadres de la page s'affichent dans une nouvelle fenêtre: pour chaque cadre présent sur la page, sont indiqués le contenu de l'attribut name, celui de l'attribut longdesc, celui de l'attribut title et le fichier source correspondant.
  4. Vérifier que le nombre d'éléments FRAME (cadre) est inférieur ou égal à 3.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Méthode 1 :
  1. Sélectionner le menu "Infos Doc", puis l'option "Lister les cadres [Nouvelle fenêtre]". Chaque cadre, identifié par son nom et par l'adresse de sa page sera affiché.
  2. Vérifier le nombre d'éléments FRAME.

Méthode 2 :
  1. Sélectionner le menu "Structure", puis l'option "Nom / titre du cadre [Nouvelle fenêtre]". La liste de chaque cadre, leur fichier source, leur nom et le contenu de l'attribut title s'il est présent, seront affichés.
  2. Vérifier le nombre d'éléments FRAME.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :
  1. Activer l'option "Voir Source" du menu "Voir Source".
  2. Une nouvelle fenêtre apparaît et affiche le code source.
  3. Vérifier qu'il y a un maximum de 3 éléments FRAME dans la page.

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
  1. Au chargement de la page, Jaws indique le nombre de cadres lorsqu’il y en a. La liste des cadres d’une page peut également être affichée en appuyant sur les touches Insert+F9. Il est enfin possible de se déplacer d’un cadre à l’autre en appuyant sur la touche virgule ou H du clavier (selon les versions de Jaws).
    Note : Si la page comporte des iframes, ou cadres en ligne, il faut veiller à ce que l’affichage de ceux-ci soit activé dans le configurateur, options HTML, onglet "titres et cadres" case "ignorer cadres en ligne" non cochée.
    Note : Jaws affiche les cadres dans l'ordre où ils sont déclarés dans le FRAMESET. Ainsi, si des cadres X et Y sont imbriqués dans un cadre Z, Jaws lira "début du cadre Z", le contenu des cadres X et Y, et fin du cadre Z.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

Ce critère concerne aussi bien le développeur que le graphiste. La diminution du nombre de cadres dans une page conduit le développeur à envisager une autre approche pour coder la mise en page et le graphiste à adapter cette nouvelle façon au résultat visuel qu'il veut obtenir.

Implémentation

Cette technique permet de subdiviser une page html en zones bien distinctes, de ce fait, le contenu de chaque zone peut être modifié et affiché indépendamment d’un cadre à l’autre.

Tout d’abord, il est nécessaire de déclarer que le site possède des cadres dans la balise DOCTYPE.

L’élément FRAMESET permet de définir le nombre de cadres et la position de ceux-ci dans une page Web. Deux attributs sont utilisés pour leurs positionnements, ce sont les attributs rows et cols :

Pour définir le contenu de chacune des zones, on utilise l’élément FRAME avec les attributs src et name, ce dernier peut être associé à l'attribut target :

Exemple de mauvaise pratique

L'extrait de code ci-dessous ne définit pas moins de 9 cadres avec, de surcroît, plusieurs niveaux d'imbrication.

<frameset rows="1*,449,1*" border="0" frameborder="0" framespacing="0">
<frameset cols="1*,750,1*" border="0" frameborder="0" framespacing="0" />
<frame src="tools/rien-1.html" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
<frame src="tools/haut-1.html" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
<frame src="tools/rien-1.html" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
</frameset>
<frameset cols="1*,750,1*" border="0" frameborder="0" framespacing="0">
<frame src="tools/rien-1.html" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
<frame src="index_u1l2.htm" name=ecran noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
<frame src="tools/centre_droite-1.html" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
</frameset>
<frameset cols="1*,750,1*" border="0" frameborder=0 framespacing=0>
<frame src="tools/rien-1.html" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
<frame src="tools/bas-1.html" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
<frame src="tools/bas_droite-1.html" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />
</frameset>
</frameset>

Exemple de bonne pratique

Lors de la création d'un jeu de cadres, il faut s'interroger sur la réelle utilité d'un cadre et se demander s'il n'est pas possible d'en fusionner plusieurs en un seul. Il est fréquent, par exemple, de rencontrer des constructions de pages où un cadre est définit pour le seul logo du site.

L'extrait de code suivant définit un jeu de 2 cadres.

<frameset cols="33%,*" title="frameset du site exemple">
<frame name="menu" src="menu.htm" title="Colonne de gauche recevant le menu de navigation." />
<frame name="contenu" src="index.htm" title="Partie principale de la page." />
</frameset>


Une alternative à un trop grand nombre de cadres

Un webmestre qui souhaite garder une présentation de ses pages à l’aide de cadres devra implémenter des cadres nommés par exemple : menu, contenu et navigation. Pour respecter ce critère, s'il veut faire d'autres divisions dans ses pages, il lui faudra utiliser une autre structure qui permet d’obtenir le même résultat visuel mais sans les inconvénients d'un trop grand nombre de cadres.

Les blocs avec une mise en page en «css» sont une bonne alternative à la présentation par cadres.

Exemple de code pour une alternative aux cadres

En html :
<div id="essai">
Le contenu textuel ou graphique
</div>
La css :
#essai
[Les parramètres de présentation du bloc dimension, couleur, police etc…]

Conclusion sur la mise en oeuvre

Nous avons à notre disposition en "css" plusieurs éléments tels que DIV, ul, span, P, etc... qui permettent de faire des blocs. Ceci offre la possibilité de diviser une page Internet en respectant son accessibilité. Ainsi, cette implémentation permet d'éviter l'utilisation d'une présentation qui implique un trop grand nombre de cadres.

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 2.8 Fiche suivante : fiche 2.10

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact