# Guide AccessiWeb

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

## Fiche 2.2 : Les noms donnés aux cadres sont-ils pertinents ?

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.2
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 12.1

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

- Bénéfice 1 :
  La navigation dans des pages construites à partir de cadres peut se révéler complexe, notamment pour des personnes aveugles, les utilisateurs de navigateurs textuels, ou celles qui naviguent sur des petits écrans, qui prennent connaissance du contenu du site cadre après cadre (à la différence des personnes voyantes qui ont une vue d'ensemble du site).
  Il faut éviter de nommer les cadres avec des données géographiques comme "gauche", "droite", "milieu", ou des noms qui soulignent leur interdépendance tels que "menu" "menu1", "catalogue", "catalogue_panier". Ce type d'appellations ne renseigne pas l'utilisateur sur le rôle ou la fonction des cadres.
  Il est préférable de nommer les cadres avec des noms explicites qui se réfèrent à leur fonction tels que "Menu", "navigation", "contenu".

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Des cadres correctement et explicitement nommés facilitent la maintenance et la gestion du site lorsque celle-ci est prise en charge par des personnes qui ne sont pas les concepteurs.
- Bénéfice 2 :
  Sans l'attribut `name`, une page avec des cadres ne peut être valide HTML.
- Bénéfice 3 :
  l'attribut `name` peut être une aide au référencement.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Vérifier dans le code source la pertinence de l'attribut `name` pour chaque élément `FRAME` présente.

#### 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.2.
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 la pertinence du nom donné à chaque cadre par le contenu de son attribut `name`.

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Cliquer sur l'option "Nom/Titre du cadre [Nouvelle fenêtre]" du menu "Structure".
2. Une nouvelle fenêtre s'affiche. Pour chaque cadre présent sur la page, sont indiqués le contenu de l'attribut `name`, celui de l'attribut `title` et le fichier source correspondant.
3. Vérifier la pertinence du nom donné à chaque cadre par le contenu de son attribut `name`.

##### 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. Pour chaque balise `FRAME`, vérifier la pertinence du nom donné à chaque cadre par le contenu de son attribut `name`.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Le développeur doit réfléchir à des noms explicites à attribuer aux cadres d'une page web.

#### Implémentation

L'attribut `name` est inclus dans la balise `FRAME`.
Syntaxe générale :

<frame name="Menu" src="haut.htm" />

#### Exemple de mauvaise pratique

Soit une page découpée en trois cadres de la façon suivante :

- en haut, sur toute la largeur de la page et d'une hauteur de 5% de la page entière, un cadre qui contiendra le logo de l'organisme, une barre de menu, avec, par exemple, les rubriques "accueil", "téléchargement", "catalogue des produits" etc... Il s'agit d'un cadre de navigation.
- A gauche, un cadre (une bande) d'une largeur de 20% de la largeur totale de la page et contenant le sommaire de la rubrique sélectionnée dans le premier cadre. Par exemple, si on clique sur "catalogue" dans le cadre du haut, un ensemble de sous-rubriques, correspondant aux entrées du catalogue, apparaissent dans le cadre de gauche. Il s'agit du cadre présentant le sommaire.
- A droite, sur l'espace restant disponible, du texte, des éléments graphiques, un formulaire etc.. constituent le contenu de la page.

Un mauvais codage d'une telle présentation serait par exemple :

<frameset rows="5%,95%" border="7">
<frame src="nav.html" marginheight="0" marginwidth="0" noresize scroling="none" name="nav" />
<frameset cols="30%,*" border="7">
<frame src="sommaire.html" marginheight="0" marginwidth="0" noresize scroling="auto" name="cadre_gauche" />
<frame src="accueil.html" marginheight="0" marginwidth="0" noresize scroling="auto" name="cadre_droite" />
</frameset>
</frameset>

Dans ce fragment de code, chaque cadre possède bien un attribut `name`, comme l'exige le critère 2.1. Cependant, les noms qui leur sont associés ne sont pas pertinents. Le premier porte le nom "nav" qui évoque vaguement le mot "navigation" mais pourquoi alors, ne pas l'écrire en entier? Les deux autres cadres sont respectivement nommés "cadre_gauche" et "cadre_droite". Ceci donne leur position sur la page mais pas leur fonction, ce qu'ils contiennent.
Il en résulte que l'utilisateur sera contraint d'étudier le contenu de chaque cadre pour comprendre leur rôle respectif. Il devra ensuite mémoriser ces noms qui ne sont pas en relation avec la fonction du cadre. Ceci se répète sur tous les sites adoptant cette façon de nommer les cadres.

#### Exemple de bonne pratique

La bonne pratique à adopter est la suivante :

<frameset rows="5%,95%" border="7">
<frame src="nav.html" marginheight="0" marginwidth="0" noresize scroling="none" name="navigation" />
<frameset cols="30%,*" border="7">
<frame src="sommaire.html" marginheight="0" marginwidth="0" noresize scroling="auto" name="sommaire" />
<frame src="accueil.html" marginheight="0" marginwidth="0" noresize scroling="auto" name="contenu" />
</frameset>
</frameset>

Ainsi, chaque cadre de la page possède un nom qui le distingue de l'autre et renseigne immédiatement l'utilisateur sur sa fonction ou son contenu. Le repérage et la recherche d'information deviennent beaucoup plus commode.

revenir en haut de la page

### Illustrations

Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez disposer d'un lecteur capable de lire ce type de fichier. Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader. Pour plus d'informations sur le téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à l'évaluation de ce guide.

Jaws lit des noms de cadres inappropriés (format mp3, 59 ko)

Voici ce que lit Jaws :
"Liste de cadres, boîte de dialogue. Zone de liste. Nav. Cadre gauche. Cadre droite."

Jaws lit des noms de cadres pertinents (format mp3, 61 ko)

Voici ce que lit Jaws :
"Liste de cadres, boîte de dialogue. Zone de liste. Navigation, sommaire, contenu".

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 2.1 : Y a-t-il un attribut NAME ?

#### Autres ressources

- Techniques for wcag 1.0 (section 12.1) : Title each frame to facilitate frame identification and navigation
- html specifications : Frames in html documents

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