Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Cadres > Critère.2.9

Critère.2.9 : Dans chaque page Web, y a-t-il un maximum de 3 cadres ?

Avertissement : cette fiche n'est pas à jour. Elle est utilisée ici pour illustrer la relation entre les commentaires associés aux critères AccessiWeb v1.1 et leurs champs correspondants dans les fiches du Guide AccessiWeb. Toutes les fiches du Guide AccessiWeb seront mises à jour suite à l'étape 2 de l'appel à commentaire.

Sommaire de la fiche :

Carte d'identité
Comprendre

Comment évaluer
Comment mettre en oeuvre

Illustrations
Références

Carte d'identité

Critère AccessiWeb : Critère.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

Comprendre le critère

Toute page Web doit être composée au maximum de 3 cadres.

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

Avertissement : cette fiche n'est pas à jour et en particulier ce paragraphe "Comment évaluer". Toutes les fiches du Guide AccessiWeb seront mises à jour suite à l'étape 2 de l'appel à commentaire.

Par le code source

Ouvrir le code source de la page établissant la structure des cadres. Cette structure est définie entre les balises FRAMESET et /FRAMESET.
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) :

Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "2. Cadres" de la Barre AccessiWeb, activer le critère 2.9.
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.
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 :

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é.
Vérifier le nombre d'éléments FRAME.

Méthode 2 :

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.
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) :

Activer l'option "Voir Source" du menu "Voir Source".
Une nouvelle fenêtre apparaît et affiche le code source.
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) : :

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.

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.

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 Critère.2.10 : Pour chaque cadre, les barres de défilement peuvent-elles apparaître ?

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 en cours de validation, non diffusable en dehors du GTA, 6 février 2008) | Conditions d'utilisation | Contact