# Guide AccessiWeb

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

## Fiche 2.10 : Lorsqu'il y a des cadres, le défilement ("scrolling" en anglais) est-il automatique ?

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

revenir en haut de la page

### Comprendre

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

- Bénéfice 1 :
  Lorsque le défilement d'un cadre est automatique ou permis, les utilisateurs souffrant d'une déficience visuelle peuvent modifier aussi bien la résolution de leur écran que la taille de police des caractères. Dans ce cas, même si le texte est tronqué parce qu'il déborde du cadre, les ascenseurs permettent malgré tout de prendre connaissance de la partie masquée. L'utilisateur ne souffre alors d'aucune perte d'informations.
- Bénéfice 2 :
  Bien que de nombreux sites utilisent des cadres dits "invisibles" ou plutôt ayant une taille ne permettant pas de les repérer, cette méthode peut avoir des conséquences fâcheuses lors de l'ouverture d'une autre fenêtre. En effet, si l'utilisateur ne peut se rendre compte qu'il lui manque un morceau de la page (caché dans un cadre de taille nulle sans défilement), il ne comprendra pas que deux pages d'aspect identique ne fonctionnent pas de la même façon.

#### Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Vérifier la présence de scrolling="auto" ou scrolling="yes" pour chaque élément `FRAME`.
2. Vérifier également que la valeur "noresize" n'est pas attribuée aux éléments `FRAME`.

#### 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.10.
3. Le code source de la page s'affiche dans une nouvelle fenêtre.
4. Vérifier la présence de scrolling="auto" ou scrolling="yes" pour chaque élément FRAME (cadre).
5. Vérifier également que la valeur "noresize" n'est pas attribuée aux éléments FRAME (cadre).

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

1. Cliquer sur le menu "Source", puis sur l'option "Voir le code source [Nouvelle fenêtre]" pour afficher le code source de la page définissant les cadres.
2. Vérifier la présence de scrolling=auto" ou scrolling=yes" pour chaque élément `FRAME`.
3. Vérifier également que la valeur "noresize" n'est pas attribuée aux é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 la présence de scrolling="auto" ou scrolling="yes" pour chaque élément `FRAME.`
4. Vérifier également que la valeur "noresize" n'est pas attribuée aux éléments `FRAME.`

##### 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, en concertation avec le graphiste, doit veiller au respect de ce critère.

#### Implémentation

Syntaxe générale :

<frameset [...]>
<frame scrolling="auto" [...] />
</frameset>

Ce qui définit la propriété de défilement du cadre est l'attribut `scrolling` de la balise `FRAmE` dont la valeur doit être "auto".

#### Exemple de mauvaise pratique

Voici un exemple de code qui permet de diviser la page en trois cadres :

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

Dans cet exemple, aucun des cadres n'autorise le défilement du texte qu'il contient, puisque la valeur de scrolling est "none". Si l'utilisateur change de résolution d'écran ou augmente la taille des caractères, le texte contenu dans les cadres sera tronqué sans qu'il soit possible de visualiser l'information manquante. Il est également important de permettre le redimensionnement des cadres afin que l'utilisateur les ajuste à sa convenance. Or, ici, la valeur "noresize" interdit cette opération. Sauf contrainte graphique incontournable, cette valeur est à proscrire.

#### Exemple de bonne pratique

En reprenant l'exemple précédent, il suffit d'atribuer la valeur "auto" à l'attribut `scrolling`

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

A présent, lorsque l'utilisateur modifie sa résolution d'écran ou augmente la taille des caractères, des ascenseurs de défilement apparaîtront automatiquement pour lui permettre de lire la totalité de l'information. De plus, il peut redimensionner chacun des cadres à sa convenance.

revenir en haut de la page

### Illustrations

Cette capture d'écran présente une page avec des cadres pour lesquels le défilement n'est pas autorisé. Dans cet exemple, les cadres n'autorisent pas le défilement du texte si l'utilisateur modifie sa résolution d'écran ou augmente la taille des caractères. Le texte est alors tronqué. Le redimensionnement des cadres n'est également pas autorisé afin que l'utilisateur les ajuste à sa convenance.

Cette capture d'écran présente une page avec des cadres pour lesquels le défilement est autorisé. Dans cet exemple, les cadres autorisent le défilement du texte lorsque l'utilisateur modifie sa résolution d'écran ou augmente la taille des caractères. Des ascenseurs de défilement apparaîssent automatiquement De plus, il peut redimensionner chacun des cadres à sa convenance.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 10.4 : Des valeurs relatives sont-elles utilisées pour dimensionner les tableaux et définir la taille des polices de caractère ?
- Fiche 10.5 : Si des valeurs absolues sont utilisées, le sont-elles sans conséquence sur l'affichage de l'information ?

#### Autres ressources

- Exemple de cadres avec défilement (en anglais)
- html specifications : Frames in HTML documents: the frame element

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