retour vers le site AccessiWeb

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 ?

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

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

Cadres sans possibilité de défilement

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.

Cadres avec défilement possible

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

revenir en haut de la page


Fiche précédente : fiche 2.9 Fiche suivante : fiche 3.1

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