Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. 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
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 2.7 : Pour chaque cadre et chaque cadre en ligne, les barres de défilement peuvent-elles apparaître ?

revenir en haut de la page

Carte d'identité du critère 2.7 [niveau AccessiWeb : Bronze]

revenir en haut de la page

Comprendre

Comprendre le critère

Pour tous les cadres et cadres en ligne, les barres de défilement doivent pouvoir apparaître.

Bénéfices pour les utilisateurs

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

Valeur ajoutée pour le site

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

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

1. 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
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 2.7.a [Bronze] : Pour chaque cadre (balise frame) ayant un attribut scrolling, le contenu de cet attribut est-il différent de no ?
   • Test 2.7.b [Bronze] : Pour chaque cadre en ligne (balise iframe) ayant un attribut scrolling, le contenu de cet attribut est-il différent de no ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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.7.a [Bronze] et le test 2.7.b [Bronze] :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir le code source généré"
3. Rechercher dans le code source les balises frame et iframe.
4. Vérifier que pour chaque cadre (balise frame) et chaque cadre en ligne (balise iframe) ayant un attribut scrolling, le contenu de cet attribut est différent de "no".
5. 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.7.a [Bronze] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot frame (ctrl + f), vérifier que pour chaque cadre ayant un attribut scrolling, le contenu de cet attribut est différent de no.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 2.7.b [Bronze]
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
3. Une nouvelle fenêtre apparaît contenant le code source de la page.
4. En faisant une recherche sur le mot iframe (ctrl + f), vérifier que pour chaque cadre en ligne ayant un attribut scrolling, le contenu de cet attribut est différent de no.
5. 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é ?

Le développeur, en concertation avec le graphiste, doit veiller au respect de ce critère.

Implémentation

Syntaxe générale avec la balise frame :

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

Syntaxe générale avec la balise iframe :

<iframe scrolling="auto" [...]></iframe>

Ce qui définit la propriété de défilement du cadre est l'attribut scrolling de la balise frame et de la balise iframe dont la valeur doit être "auto", "yes" mais différente de "no".

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

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

revenir en haut de la page

Références

• 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 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.