Guide AccessiWeb

Accueil
Mode d'emploi
Structure d'une fiche
Fiches AccessiWeb
- 1) Images
- 2) Cadres
- 3) Couleurs
- 4) Multimédia
- 5) Tableaux
- 6) Liens
- 7) Code exécutable
- 8) Eléments obligatoires
- 9) Structuration de l'information
- 10) Présentation de l'information
- 11) Formulaires
- 12) Navigation
- 13) Consultation
Glossaire
Aide à l'évaluation
Référentiel AccessiWeb
Tables de correspondance
Moteur de recherche
Références
Remerciements
Plan du guide

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

Critère 2.8 : Dans chaque page Web, y a-t-il un maximum de 3 cadres ou cadres en ligne ?

Sommaire de la fiche :

Carte d'identité
Comprendre

Comment évaluer
Comment mettre en oeuvre

Illustrations
Références

revenir en haut de la page

Carte d'identité du critère 2.8 [niveau AccessiWeb : Or]

Test(s) AccessiWeb permettant de vérifier le critère 2.8

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

Test 2.8.a [Or] : Dans chaque page Web, y a-t-il un maximum de 3 cadres (balise frame) ou cadres en ligne (balise iframe) ?

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

Référentiel AccessiWeb 1.0 (19/12/2003) [version utilisée dans le Référentiel Accessibilité ADAE 2004] : 2.9 [Bronze]
WCAG 1.0 (05/05/1999) : pas de correspondance.
UWEM 1.0 (05/07/2006) : pas de correspondance.
WCAG 2.0 (30/04/2008) : pas de correspondance.
mobileOK 1.0 (02/11/2006) : pas de correspondance.
RGAA : pas de correspondance (aucune version datée du RGAA n'est disponible en ligne à la date de publication de ce guide).

revenir en haut de la page

Comprendre

Comprendre le critère

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

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 qui se sert d'un navigateur textuel. Le navigateur textuel affiche les cadres comme dans une arborescence de dossiers et l'internaute doit se souvenir du niveau sur lequel il se trouve, remonter au premier niveau pour accéder aux autres cadres etc... Lorsque l'internaute aveugle utilise un lecteur d'écran avec un navigateur graphique, tous les cadres, (qu'ils soient imbriqués ou non), sont affichés sur la page, mais cet effort de mémoire, pour localiser le cadre dans lequel une nouvelle information aparaît, est grand, si la page contient un trop grand nombre de cadres.
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 large que la taille de l'écran, 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. Cela réduit d’une part la possibilité de mettre une page précise dans les favoris. D’autre part, le référencement d’un site par les moteurs de recherche devient fastidieux voire inefficace.
Bénéfice 2 :
Un trop grand nombre de cadres complique la tâche d'impression d'une page. Il sera plus difficile de mettre en œuvre la fonction d'impression de la page, 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. Si le nombre maximum de cadres est réduit à trois, l'impression de la page sera plus aisée.

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

Sélectionner le(s) élément(s) à tester : ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants :
- la balise frame
- la balise iframe
Appliquer le(s) test(s) suivant(s) :
- Test 2.8.a [Or] : Dans chaque page Web, y a-t-il un maximum de 3 cadres (balise frame) ou cadres en ligne (balise iframe) ?
Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

Pour le test 2.8.a [Or] :

Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "Cadres" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Noms / Titres des cadres".
Pour chaque cadre présent sur la page, sont indiqués le contenu de l'attribut name, celui de l'attribut title, celui de l'attribut longdesc et le fichier source correspondant.
Compter le nombre de cadre (balise frame) et vérifier qu'il y a un maximum de 3 cadres
Compter le nombre de cadre en ligne (balise iframe) et vérifier qu'il y a un maximum de 3 cadres en ligne.
Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

Pour le test 2.8.a [Or] :

Sous Firefox, ouvrir la page à analyser.
Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
Une nouvelle fenêtre apparaît contenant le code source de la page.
En faisant une recherche sur le mot frame (ctrl + f), compter le nombre de cadre (balise frame) et vérifier qu'il y a un maximum de 3 cadres.
En faisant une recherche sur le mot iframe (ctrl + f), compter le nombre de cadre en ligne (balise iframe) et vérifier qu'il y a un maximum de 3 cadres en ligne.
Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

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

Chaque fichier html doit comporter au maximum 3 cadres en ligne :

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

html techniques for WCAG 1.0 (section 10) : Frames
Un article de Denis Boudreau sur le site OpenWeb : pour en finir avec les cadres

revenir au sommaire de la fiche

revenir en haut de la page