# 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 ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### 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

- Bénéfice 1 :
  Si les cadres peuvent constituer, pour les personnes aveugles, un bon moyen de repérage dans le site, en particulier s'ils sont correctement nommés, il faut cependant éviter d'en multiplier le nombre et leur imbrication. En effet, la navigation à travers les cadres comprenant eux-mêmes des cadres peut s'avérer fastidieuse pour un utilisateur aveugle. Il doit alors se déplacer comme dans une arborescence de dossiers et se souvenir du niveau sur lequel il se trouve, remonter au premier niveau pour accéder aux autres cadres etc...
- Bénéfice 2 :
  Les personnes mal-voyantes qui se servent de l'écran et les personnes ayant des difficultés de lecture seront perturbées par un trop grand nombre de cadres dans une page Web. Elles auront des difficultés pour suivre le texte, pour agrandir le cadre souhaité ainsi que pour repérer un endroit précis dans la page.
- Bénéfice 3 :
  Un trop grand nombre de cadres réduit considérablement la taille de l'écran occupant l'espace de la page principale. Donc, en évitant d’utiliser plus de trois cadres dans une page, cela permet à celle-ci d’avoir un format plus grand, ce qui en rendra la lecture plus aisée. D’autre part, cela permettra aussi d’éviter le risque d’une mauvaise imbrication des cadres, ce qui engendre une difficulté de navigation importante pour les utilisateur de petits écrans, par exemple.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  L'URL est une adresse permettant d'accéder à n'importe quel document se trouvant sur le Web. Un document contenu dans un ensemble de cadres perd sa propre identité, il est affilié à l’adresse de sa page mère, de sorte que plusieurs pages en viennent à être regroupées sous une seule adresse. De ce fait, plus les cadres sont nombreux, plus il est difficile d’accéder directement à un document spécifique. Ce qui nuit beaucoup d’une part à la possibilité de mettre une page précise dans les favoris. D’autre part, aux moteurs de recherche pour effectuer le référencement d’un site, ce dernier devient fastidieux voire inefficace.
- Bénéfice 2 :
  Pour les créateurs de sites qui souhaitent que les internautes puissent imprimer leurs pages, cette fonction sera plus difficile à mettre en œuvre car un navigateur interprète souvent la commande d'impression de façon erronée, en fonction du cadre sur lequel se trouve le focus au moment de son lancement. Dans ce cas, il va de soi qu’un trop grand nombre de cadres complique davantage la tâche d’impression d’une page.

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` :

- L'attribut `rows` permet de faire des zones horizontales.
- L'attribut `cols` permet de faire des zones verticales.

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` :

- src=url pour indiquer le fichier à placer dans le cadre.
- name=nom_du_cadre permet de nommer un cadre afin qu'il puisse devenir la cible d'un lien (on utilisera alors l'attribut `target` pour y accéder).

#### 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

- Fiche 2.1 : Y a-t-il un attribut NAME ?
- Fiche 2.2 : Les noms donnés aux cadres sont-ils pertinents ?
- Fiche 2.5 : Y a-t-il un attribut TITLE ?
- Fiche 2.6 : L'attribut TITLE est-il pertinent ?
- Fiche 2.7 : L'attribut LONGDESC est-il présent pour expliquer l'interaction entre les cadres ?
- Fiche 2.8 : L'attribut LONGDESC est-il pertinent ?
- Fiche 2.10 : Lorsqu'il y a des cadres, le défilement ("scrolling" en anglais) est-il automatique ?
- Fiche 8.1 : La balise DOCTYPE est-elle présente au début du code source de la page ?

#### Autres ressources

- html Techniques (section 10) : Frames
- Un article de Denis Boudreau sur le site openweb : pour en finir avec les cadres
- Accès pour tous : Fiche technique sur les frames

revenir au sommaire de la fiche

revenir en haut de la page

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