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.2 : Pour chaque cadre et chaque cadre en ligne ayant un attribut title, le contenu de cet attribut est-il pertinent ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les cadres et cadres en ligne doivent avoir un titre pertinent.

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 pour les internautes qui prennent connaissance du contenu du site cadre après cadre (à la différence des personnes qui ont une vue d'ensemble du site). Cela concerne notamment les personnes aveugles, qui n'ont pas une vue globale de l'écran, celles qui utilisent un navigateur textuel ou celles qui naviguent sur des petits écrans.
  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 de navigation", "Contenu principal".
  
  
• Bénéfice 2 :
  Certains navigateurs textuels comme Lynx ou certaines interfaces sur petits écrans, sur une page comportant des cadres, obligent à une navigation en arborescence. C'est-à-dire que chaque cadre constitue une sorte de lien qu'il faut valider pour en connaître le contenu. Si un cadre comporte des sous-cadres, l'utilisateur doit à nouveau valider chacun d'eux pour savoir ce qu'ils contiennent ; ainsi de suite. Lors d'une navigation cadre par cadre, il est donc important pour l'utilisateur de savoir dans quel cadre il se trouve et la position hiérarchique d'un cadre par rapport à un autre.

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 title, une page avec des cadres ne peut être valide html.
  
  
• Bénéfice 3 :
  L'attribut title peut être une aide au référencement.

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 (exemple de code source : <frame src="fichier.html" name="nom_du_cadre" title="titre du cadre" />) :
     • balise frame
     • balise iframe
   • Identifier dans un navigateur graphique la fonction de tous les cadres.
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 2.2.a [Bronze] : Pour chaque cadre (balise frame) ayant un attribut title, le contenu de cet attribut est-il pertinent ?
   • Test 2.2.b [Bronze] : Pour chaque cadre en ligne (balise iframe) ayant un attribut title, le contenu de cet attribut est-il pertinent ?
   
   
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.2.a [Bronze] et le Test.2.2.b [Bronze]:

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Cadres" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Noms / Titres des cadres".
3. Pour chaque cadre et chaque cadre en ligne 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.
4. Vérifier que pour chaque cadre (balise frame) et chaque cadre en ligne (balise iframe) qui a un attribut title, le contenu de cet attribut est pertinent.
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.2.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 title, le contenu de cet attribut est pertinent.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 2.2.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 title, le contenu de cet attribut est pertinent.
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 doit réfléchir à des noms explicites à attribuer aux cadres d'une page web.

Implémentation

Syntaxe générale :

<frame src="[...]" name="nom_du_cadre" title="nom_du_cadre : informations supplémentaires sur le cadre" />

<iframe src="[...]" name="nom_du_cadre_en_ligne" title="nom_du_cadre_en_ligne : informations supplémentaires sur le cadre" />

Remarque : attention à ne pas oublier l'attribut title de la balise frameset.

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 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 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="navigation" title="ce cadre contient les liens page d'accueil, téléchargement et catalogue" />
<frameset cols="30%,*" border="7">
<frame src="sommaire.html" marginheight="0" marginwidth="0" noresize scroling="auto" name="sommaire" title="ce cadre est en lettres blanches sur fond bleu" />
<frame src="accueil.html" marginheight="0" marginwidth="0" noresize scroling="auto" name="contenu" title="ce cadre est en lettres noires sur fond blanc" />
</frameset>
</frameset>

Dans cet exemple, le contenu de l'attribut title s'attarde sur une description du cadre ou à reprendre intégralement les liens que contient le cadre. Ceci n'est pas pertinent car ces informations ne renseignent pas l'utilisateur sur la fonction du cadre, ou font double emploi avec le contenu du cadre lui-même.

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" scroling="auto" name="navigation" title="navigation : ce cadre contient la barre de navigation dans le site avec les liens principaux" />
<frameset cols="30%,*" border="7">
<frame src="sommaire.html" marginheight="0" marginwidth="0" scroling="auto" name="sommaire" title="sommaire : ce cadre contient les liens relatifs à une rubrique" />
<frame src="accueil.html" marginheight="0" marginwidth="0" scroling="auto" name="contenu" title="contenu : ici se trouvent les textes, images et formulaires relatifs à un lien du sommaire" />
</frameset>
<noframes>
<body>
<h1>Bienvenue sur notre site</h1>
<h2>rubriques principales</h2>
<a href="[...]">retour à l'accueil</a><br />
<a href="[...]">téléchargement</a><br />
<a href="[...]">catalogue</a>
</body>
</noframes>
</frameset>

Ainsi, l'utilisateur sait d'emblée ce qu'il va trouver dans chacun des cadres.

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.

Jaws lit des titres de cadres peu pertinents (format mp3, 122 ko)

Jaws lit des titres de cadres pertinents (format mp3, 167 ko)

revenir en haut de la page

Références

• Techniques for WCAG 1.0 (section 12.1) : Title each frame to facilitate frame identification and navigation
• WAI Curriculum : 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 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.