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.1 : Chaque cadre et chaque cadre en ligne a-t-il un attribut title ?

revenir en haut de la page

Carte d'identité du critère 2.1 [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.

Bénéfices pour les utilisateurs

• 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.
  Mais, dans la mesure où le nombre de cadre sur une page est restreint, ils peuvent constituer des points de repère utiles à la navigation s'ils sont nommés distinctement les uns des autres.
  En l'absence de l'attribut title et de son contenu, les lecteurs d'écran restituent à l'utilisateur un nom par défaut à tous les cadres présents sur la page, généralement "sans_nom" ou "untitled".
  Un titre explicite pour chaque cadre permettra aux utilisateurs nommés ci-dessus de se faire une idée de ce que contient chaque cadre lorsqu'ils se déplacent d'un cadre à l'autre ou lorsqu'ils affichent la liste des cadres présents dans la page.

Valeur ajoutée pour le site

• Bénéfice 1 :
  L'adjonction de l'attribut title à chaque cadre d'une page facilite la maintenance des pages lorsque la gestion du site est confiée à une autre personne que son concepteur.
  
  
• 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
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 2.1.a [Bronze] : Chaque cadre (balise frame) a-t-il un attribut title ?
   • Test 2.1.b [Bronze] : Chaque cadre en ligne (balise iframe) a-t-il un attribut title ?
   
   
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.1.a [Bronze] et le test 2.1.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 chaque cadre (balise frame) et chaque cadre en ligne (balise iframe) a un attribut title.
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.1.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 chaque cadre a un attribut title.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 2.1.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 chaque cadre en ligne a un attribut title.
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é ?

L'implémentation de ce critère concerne le développeur.

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" />
<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>

Dans cet exemple, bien que les cadres aient des noms explicites, on pourrait apporter des informations supplémentaires quant à leurs interrelations, grâce à l'attribut title.

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

Il n'y a pas d'illustration pour cette fiche.

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.1, 2 mars 2009) | Conditions d'utilisation | Contact
Copyright © 2009 Association BrailleNet. Tous droits Réservés.