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.4 : Pour chaque jeu de cadres et chaque cadre en ligne ayant une alternative, cette alternative est-elle pertinente ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les jeux de cadre et cadres en ligne doivent avoir une alternative pertinente.

Bénéfices pour les utilisateurs

• Le contenu de l'alternative doit permettre aux utilisateurs accédant à la page à l'aide d'un navigateur textuel de retrouver les liens principaux du site. Ils doivent ainsi pouvoir accéder aux rubriques et fonctionnalités essentielles du site.
  Parmi elles citons la page d'aide, le plan du site, le menu principal, le moteur de recherche et tous les liens qui font l'intérêt du site.

Valeur ajoutée pour le site

• La présence des liens importants de la page dans la balise noframes permet aux moteurs de recherche d’accéder au contenu des cadres, car ils ignorent, pour la plupart, les balises frameset ou frame ou iframe.
  
  Remarque : une pratique relativement répandue consiste à inclure dans la balise noframes un catalogue de mots-clés destinés à "amadouer" les moteurs de recherche. Ceci constitue un détournement de balise déconseillé par le W3C.

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 frameset
   • la balise iframe
   (Note : le contenu de l'alternative pour un cadre en ligne (balise iframe) est implémenté avant la balise fermante </iframe>).
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 2.4.a [Bronze] : Pour chaque jeu de cadres (balise frameset), le contenu de la balise noframes propose-t-il une liste de liens permettant d'accèder directement au contenu de chaque cadre ?
   • Test 2.4.b [Bronze] : Pour chaque cadre en ligne (balise iframe), le contenu de l'alternative propose-t-il un lien permettant d'accéder directement au contenu de la balise iframe ?
   
   
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.4.a [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 présent sur la page, sont indiqués le contenu de l'attribut name, celui de l'attribut title, celui de l'attribut longdesc, le fichier source correspondant ainsi que la présence de la balise noframes.
  4. Vérifier que pour chaque jeu de cadres (balise frameset) qui a une balise noframes, le contenu de celle-ci propose une liste de liens permettant d'accéder directement au contenu de chaque cadre (balise frame.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 2.4.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 iframe.
  4. Vérifier que pour chaque balise iframe qui a une alternative entre <iframe> et </iframe>, le contenu de celle-ci propose un lien permettant d'accéder directement au contenu de la balise iframe.
  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.4.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 frameset (ctrl + f), vérifier que pour chaque jeu de cadres ayant une balise noframes, le contenu de cette balise propose une liste de liens permettant d'accèder directement au contenu de chaque cadre.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 2.4.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 une alternative, le contenu de l'alternative propose un lien permettant d'accéder directement au contenu de la balise iframe (implémenté avant la balise fermante iframe>).
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 s'assurer du respect de ce critère.

Implémentation

Syntaxe générale de la balise noframes avec la balise frameset de premier niveau :

<frameset [...]>
<frame [...] />
<frameset [...]>
<frame [...] />
<frame [...] />
</frameset>
<noframes>
<body>
<!-- Liste des liens contenus dans le menu (menu.html)-->
<!-- Liens importants et/ou de navigations dans contenu.html -->
</body>
</noframes>
</frameset>

Elle contient les liens importants existant dans chacun des cadres de la page qui vont permettre à l'utilisateur de trouver le contenu de la page, par exemple, le lien vers le plan du site, les liens du menu...

Remarque 1 : Eviter de construire un site alternatif dans cette balise car très vite se pose le problème de la mise à jour. La balise noframes ne doit pas contenir non plus des instructions qui expliquent à l'utilisateur comment télécharger un navigateur qui supporte les cadres.
Remarque 2 : dans de nombreux cas, la balise noframes donne des informations non appropriées ou incomplètes. Par exemple, elle contient uniquement une liste de mots clés pour le référencement ou une phrase sans grande utilité, voire incompréhensible pour un non-technicien, du type "votre navigateur ne supporte pas les frames". Ceci est à éviter sous peine de décourager l'internaute.

Syntaxe générale avec la balise iframe. L'alternative propose un lien permettant d'accéder directement au contenu de la balise iframe :

<iframe [...]><a href="...">Le dernier cours en Bourse de l'action xx</a></iframe>

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>
<noframes>
<body>
votre navigateur ne supporte pas les frames<br />
<!-- téléchargement, achat en ligne, courses en ligne, commander par Internet -->
</body>
</noframes>
</frameset>

Dans cet exemple, l'utilisateur dont le navigateur ne prend pas en charge les cadres n'a aucun moyen d'accéder au contenu du site. D'ailleurs, la phrase : "votre navigateur ne supporte pas les cadres" enfonce douleureusement le clou. De plus, il y a détournement de la balise qui comporte une série de mots destinés, selon toute probabilité, à paraître en bonne place dans les moteurs de recherche, ce qui n'est pas son rôle.

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, tous les utilisateurs auront accès au site, même si leur navigateur ne prend pas en charge les cadres ou s'ils préfèrent ne pas naviguer à l'aide des cadres. Les utilisateurs disposent des liens principaux du site. Pour être tout à fait utile, il faudrait y ajouter également le lien vers le plan du site et les pages d'aide.

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

• html techniques for WCAG 1.0 (section 10.3) : Writing for browsers that do not support FRAME
• WebAIM : Creating accessible frames

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.