Blog Webatou, le Web accessible à tous

Aller au contenu | Aller au menu | Aller à la recherche

Décideurs

Pourquoi créer des sites conformes aux standards du Web et accessibles à tous : sujets de réflexion pour les décideurs

Fil des billets - Fil des commentaires

dimanche 10 juin 2007

Les frames, ça vous dit ?

Je ne suis pas la première à crier haro sur les frames, pas la dernière non plus...

Il faut bien le constater, alors que les défauts de cette technologie sont souvent montrés du doigt et qu'il existe aujourd'hui des solutions de remplacement efficaces et robustes, les frames sont encore utilisées pour de nouveaux sites créés par des professionnels. Pourquoi ?

La situation

La technique des frames (ou cadres) a été utilisée pour la première fois par Netscape Navigator 2.0 en 1996 [1] et proposée au W3C qui l'a introduit dans les spécifications HTML 4 deux ans plus tard :

HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled though or replaced by navigating in the second frame.

Outre le gain de bande passante, en divisant la page en partie(s) fixe(s) et en partie(s) scrollable(s), en partie(s) qui ne se recharge(nt) pas, les frames facilitaient la maintenance d'un site (plus besoin de modifier le menu sur toutes les pages, par exemple). Mais la facilité n'était qu'apparente, bien des webmasters se sont cassés les dents... je me souviens d'un site où les frames s'emboîtaient les unes dans les autres chaque fois que je cliquais sur un lien...

Aujourd'hui l'utilisation des feuilles de style (notamment la propriété overflow) et des technologies serveur (avec un langage de programmation comme php) permet de retrouver ces avantages, sans utiliser de frames.

Les principaux reproches

Ces différents points sont expliqués dans un article publié par Denis Boudreau sur OpenWeb : Pour en finir avec les cadres

  • Dénaturation radicale du document Web
  • Impossibilité d'ajouter aux favoris
  • Indexation déficiente
  • Imprécision de l'impression
  • Aucune séparation entre structure et contenu
  • Economie de fichiers illusoire
  • Utilisabilité conceptuelle bafouée
  • Programmation compensatoire
  • Une technologie en perte de vitesse

Le point de vue des experts

Les spécifications du W3C

Il est tout à fait possible d'utiliser des frames et d'avoir un code valide, il suffit de choisir le bon doctype

Les directives WCAG

Selon la Web Accessibility Initiative, les frames peuvent être utilisées à condition de respecter un certain nombre de directives (version en français) mais ne sont pas recommandées [2]

In the following sections, we discuss how to make frames more accessible. We also provide an alternative to frames that uses HTML 4.0 and CSS and addresses many of the limitations of today's frame implementations.

AccessiWeb

L'utilisation des cadres figure bien-sûr parmi les critères Accessiweb. Dans ce tableau de correspondance AccessiWeb - WCAG 1.0, vous remarquerez la présence d'un critère (2.9) absent des directives WCAG

Y a-t-il un maximum de trois cadres dans la page ?

Les raisons de ce choix, que je trouve très pertinent :

  • Pour naviguer dans un site utilisant des frames l'utilisateur d'un lecteur d'écran dispose d'une liste des cadres. Si les directives sont respectées, il aura suffisamment de points de repère pour se déplacer dans le site sans trop de difficulté. Mais plus le nombre de cadres et leur imbrication augmente, plus l'arborescence devient complexe, plus la navigation devient laborieuse.
  • Plus le nombre de cadres augmente, plus l'espace dévolu au cadre principal se réduit. Les mal-voyants ou les personnes ayant des difficulté de lecture peineront à se repérer dans la page, à utiliser les ascenceurs, ou encore à agrandir la taille du texte.

Le RGAA

Les auteurs du référentiel ont retenu :

Mais rien (dans la version actuelle, soumise à vos commentaires) ne fait allusion au nombre de cadres... à proposer ?

Des exemples de problèmes d'accessibilité

Le site officiel d'une ville canadienne

<frame src="actu-navig.htm" name="NAV" noresize marginwidth="0" marginheight="0" scrolling="NO">

noresize et scrolling="NO", un choix trop fréquent... le menu de ce site étant plutôt long, j'ai dû afficher la fenêtre en taille maximum pour le voir dans son entièreté. Que font ceux qui ne disposent que d'une plus petite résolution ?

<noframes>
<body bgcolor="#FFFFFF"><font face="Verdana" size="3" color="#000066">
<b>Attention...</b><br>Pour afficher ce site, il vous faut un Navigateur capable d'utiliser les cadres...</font>
</body>
</noframes>

C'est tout simplement une fin de non recevoir pour un certain nombre de visiteurs !

Un site du Gouvernement français

Capture d'écran de Lynx, frames sans nom significatif

Ici il n'y a que 4 frames (capture d'écran du site vu avec Lynx), mais le nombre est parfois nettement plus élevé encore et peut dépasser la dizaine ! Que font les utilisateurs d'un navigateur texte, d'une synthèse vocale ou d'une tablette braille ? J'ai apprécié la réponse non dénuée d'humour d'une formatrice AccessiWeb, non-voyante, dans ce cas, je navigue à l'aveugle.

De plus je suis arrivée sur ce site sur un lien profond via une recherche (j'avoue, c'est un peu de la triche... on ne doit pas souvent y arriver en cherchant <frameset) et quand j'ai cliqué sur le lien qui aurait dû me conduire à la page d'accueil, j'ai eu droit à une page avec ce message

Not Found
The requested object does not exist on this server. The link you followed is either outdated, inaccurate, or the server has been instructed not to let you have it. Please inform the site administrator of the referring page.

Utiliser les frames, oui ou non ?

Sans aller comme certains jusqu'à affirmer que les frames c'est le mal, je répondrais non à ma question.

Mais... je cite Laurent Denis dans une discussion que je vous invite à lire (sur le forum Alsacréations) :

Il n'est pas question de proscrire quoi que ce soit, et surtout pas des technologies valides prenant en compte les nécessités de l'accessibilité. Mais de servir des éléments normalisés à bon escient.

Un iframe (ou un frameset) respectant les règles WCAG pourra être accessible là où diverses astuces de contournement des cadres ne le seront pas.

Inversement, un frameset ou un iframe lui-même utilisé comme contournement (l'iframe si "pratique" pour masquer un bug d'élément fenêtré, par exemple), ou de manière aberrante (je pense à un grand site d'e-commerce ne comportant pas moins de 12 frames) posera évidemment des problèmes d'accessibilité.

Les webmasters amateurs, désireux avant tout de communiquer et partager des informations, utilisent généralement un éditeur WYSIWYG parce qu'ils ne souhaitent pas se lancer dans l'apprentissage de toute forme de programmation. C'est un choix que je comprends très bien. Ils pourraient encore être tentés par l'utilisation des Frames. Mais même avec un éditeur WYSIWYG, la mise en oeuvre de cette technique demande un minimum d'apprentissage, sous peine de résultats désastreux. Pour eux, l'utilisation d'un CMS (SPIP, Plume, Pluxml...) est une solution intéressante.

Pour les sites réalisés par des professionnels, ma position est beaucoup plus tranchée. J'attends encore les exemples qui me convaincront que l'utilisation d'un frameset est le meilleur choix (une exception peut-être pour un iframe qui contient un bout de code sur lequel le webmaster n'a pas la maîtrise).

Alors si vraiment vous restez un inconditionnel des frames, s'il vous plaît, respectez au moins les directives d'accessibilité, y compris le critère ajouté par AccessiWeb ! La multiplication des cadres, en réduisant les zones de contenu, rendra impossible l'accès aux informations ou aux services proposés pour certains visiteurs (en fonction de leur type de handicap), rendra la consultation du site inconfortable pour tous (au même titre que les espaces de contenu ridiculement réduits sur beaucoup de sites en flash, que les champs de saisie minuscules où il est impossible de lire et encore moins de relire ce qu'on écrit... [3])

Notes

[1] pour les curieux, une page présentant ce navigateur retrouvée sur web.archive.org

[2] A lire, le chapitre consacré aux frames de Building Accessible Websites, le livre de Joe Clark

[3] si, comme moi, vous râlez souvent contre les champs de saisie minuscules sur certains blogs, forums... installez l'extension Resizeable Form Fields, c'est magique, un pur bonheur !

Trackbacks

1. Le mardi juin 2007 à 15:27, de taggle.org

Les frames, ça vous dit ?

Il faut bien le constater, alors que les défauts de cette technologie sont souvent montrés du doigt et qu'il existe aujourd'hui des solutions de remplacement efficaces et robustes, les frames sont encore utilisées pour de nouveaux sites créés par des...

Commentaires

1. Le mardi juin 2007 à 16:44, par Neovov

En plus frame, frameset et noframes seront (probablement) supprimés de HTML5.

Très bon article Monique ;-) !

2. Le mercredi juin 2007 à 09:29, par Benja

Bonjour Monique,
Ton article est intéressant et je suis tout à fait d'accord avec toi. J'avais déjà lu un article en 2003 allant dans le même sens sur openweb:
openweb.eu.org/articles/f...

3. Le jeudi juin 2007 à 01:47, par Laurent

Très belle compilation !!!! mais disons que le sujet est clos depuis longtemps ;-) Par contre l'Iframe est par contre encore beaucoup utilisée.

4. Le jeudi juin 2007 à 22:11, par Monique

Bonjour,

@Laurent : au vu de questions posées sur les forums, au vu des nombreux sites que je visite quotidiennement, non, le sujet n'est pas clos pour tout le monde. Les frames sont encore utilisées, et toujours aussi mal :(

Amicalement,
Monique

5. Le dimanche juin 2007 à 13:05, par Saternius

Ah les frames... la plus belle abbération du web :)
Je me demande encore comment certains peuvent encore faire des sites pro avec ce truc complètement obsolète. Et niveau référencement, c'est un vrai massacre. Vivement HTML 5 que cela soit enterré pour de bon :)

6. Le jeudi juin 2007 à 21:07, par jux

Tout le monde est d'accord : les frames c'est pas bien.
Mais comment les remplacer efficacement ? oui, car personnellement je rencontre des cas où j'aurais besoin d'appliquer ce principe : nécessité de ne pas faire appel à une technologie serveur pour des soucis de performances, et malgré tout offrir un contenu relativement dynamique. Dans ce cas que préconisez vous, sachant que l'utilisation de l'Ajax ne répond pas à toutes les problématiques d'accessibilité ?
Connaissez-vous la technologie ESI ? elle est fourni par Akamai et permet d'inclure des bloc de contenus au sein de pages HTML.. c'est ce que j'utilise actuellement. Le problème : c'est propriétaire et très couteux.
.. bref.. d'autres idées ?

lundi 30 octobre 2006

Deux nouveaux sites accessibles

Vous êtes décideurs, vous devrez établir le cahier des charges d'un site pour votre entreprise ou votre association, choisir un prestataire et passer commande mais vous n'êtes pas encore convaincu qu'un site peut à la fois plaire à vos futurs visiteurs, répondre à vos objectifs et être accessible... voilà deux nouveaux exemples intéressants.

Atteindre ce résultat ne tient pas du hasard, l'intervention d'un expert en accessibilité est indispensable (que ce soit en interne dans votre équipe ou en externe via un consultant) dès l'établissement du cahier des charges et au cours des différentes phases de création du site. La qualité d'un site dépend d'un grand nombre de critères et aucun ne doit être négligé, ce qui est encore trop souvent le cas pour la conformité et l'accessibilité, à tort quand on en voit les principaux bénéfices :

  • des pages plus légères donc un gain de bande passante pour vous et un affichage plus rapide pour vos visiteurs
  • un code plus clair donc un gain de temps avec une maintenance plus simple et plus efficace
  • les informations, les services proposés ou les produits en vente accessibles indépendamment des logiciels ou supports utilisés, donc pas de perte d'audience ou de clients potentiels
  • le contenu bien structuré donc la navigation dans la page plus aisée et le référencement naturel facilité
  • Acheter des sites Web conformes aux normes

Je vous présente donc deux nouveaux sites aux objectifs très différents, avec une analyse [1] rapide donc forcément incomplète. On y trouve une réelle volonté de qualité et d'accessibilité, et c'est à encourager même si tout n'est pas encore parfait.

Comfm

C'est la nouvelle version du portail grand public dédié aux médias audiovisuels et à leurs contenus proposé par la société Radios.fr et mise en ligne aujourd'hui.

Page d'accueil du site Comfm

Dans le communiqué de presse, on peut lire

Enfin, le nouveau site a voulu privilégier l’accessibilité pour tous, en prenant en compte certains handicaps (notamment pour les personnes mal voyantes utilisant la synthèse vocale) et respecte donc les normes W3 du web (World Wide Web Consortium : standards de construction des sites internet) et WAI (Web Accessibility Initiative).

Bon

  • la présentation visuelle est claire et dégagée, avec un choix de couleurs toniques
  • le contenu est correctement structuré avec titres et sous-titres (balises h1, h2, h3), des listes
  • dans les formulaires, un clic sur l'intitulé d'un champ place automatiquement le curseur dans ce champ (utilisation de label for)
  • la navigation au clavier est possible, y compris pour les formulaires avec liste déroulante
  • la navigation semble possible avec le JavaScript désactivé (je n'ai pas tout vérifié)
  • la page est utilisable en mode petit écran (testé avec Firefox), à l'exception des formulaires avec menu déroulant

A revoir

  • des images servant de support à des liens sont dans une feuille de style (donc sans contenu alternatif possible), il n'y a pas d'intitulé de lien visible quand les images sont désactivées dans un navigateur graphique (le lien est cependant fait sur un texte positionné hors écran, mais lisible en mode texte ou avec une synthèse vocale)
  • il y a quelques intitulés de liens non significatifs tels que cliquez ici
  • certains contrastes de couleurs texte/fond sont insuffisants pour un bon confort de lecture et peuvent être un obstacle pour les daltoniens
  • il y a perte d'informations dès le second clic d'agrandissement des caractères
  • pas de plan du site ni de page indiquant la politique d'accessibilité

Ministère de l'Education nationale

C'est la nouvelle version du site internet officiel du ministère de l'Éducation nationale, de l'Enseignement supérieur et de la Recherche (France) mise en ligne le 1er septembre 2006.

Page d'accueil du site du Ministère de l'Education nationale

Dans un interview de Sonia Rémy et Olivier Colas (respectivement responsable du pôle web du ministère de l’Education nationale et responsable adjoint), on peut lire

Un soin tout particulier est pris pour rendre le site internet du ministère le plus accessible possible. Les pages sont progressivement mises en conformité avec les recommandations du référentiel commun des critères d’accessibilité des services Internet de l’administration française proposé par la D.G.M.E. ainsi que les recommandations de l’association BrailleNet.
La prise en compte de l’ensemble de ces critères nécessaires à la mise en ligne de sites et services intranet et internet de l’administration française permet de rendre accessible le site à tous les citoyens, avec un confort d’utilisation et de navigation optimisé.

L'accent est mis aussi sur l'importance de la sensibilisation auprès des éditeurs, des rédacteurs, des graphistes, et de tous les personnels du ministère, de même que sur la qualité de l’outil de gestion de contenus qui doit permettre de respecter les normes le plus facilement possible.

Bon

  • la présentation visuelle est dégagée
  • le contenu est structuré avec titres et sous-titres (balises h1, h2, h3), des listes
  • dans les formulaires, un clic sur l'intitulé d'un champ place automatiquement le curseur dans ce champ (utilisation de label for)
  • les intitulés de lien sont significatifs
  • la navigation au clavier est possible
  • l'accès aux informations est possible avec le JavaScript désactivé
  • il n'y a pas de perte d'informations au second clic d'agrandissement du texte, et à peine au troisième
  • il y a un plan du site

A revoir

  • des images servant de titre n'ont pas de contenu alternatif (attribut alt vide)
  • des images animées peuvent gêner la lecture
  • la page sur la politique d'accessibilité ne donne pas d'informations pratiques pour les utilisateurs qui en auraient besoin, son accès devrait être possible par un lien en haut de page et non en fin de menu

Notes

[1] j'apprécie vraiment Firefox 2 mais j'ai dû réinstaller la 1.5 (multiples versions de Firefox) pour retrouver mes outils de tests qui ne sont pas encore compatibles avec la version 2

Commentaires

1. Le lundi octobre 2006 à 17:40, par Raphael

Tant mieux !

Par contre, malgré leurs communiqués de presse, aucun des deux sites ne passe le Validateur W3C. Pourquoi l'annoncer sur les toits alors qu'il est si simple de vérifier que ce n'est pas vrai (pas de beaucoup, il est vrai, mais quand-même).
Bon ok, la validation ne fait pas tout, loin de là. Mais elle est une étape minimale qui me semble indispensable.

2. Le lundi octobre 2006 à 19:37, par Monique

Bonjour,

Je suis bien d'accord avec toi Raphaël. C'est évidemment une des premières choses que j'ai constatées, même si je ne l'ai pas écrit.
J'avoue avoir toujours du mal à comprendre pourquoi un tel effort n'est pas poussé jusqu'au bout.

Amicalement,
Monique

3. Le mardi octobre 2006 à 08:57, par Steven

Bonjour à tous, je suis une des personnes qui a travaillé sur le projet Comfm...

> J'avoue avoir toujours du mal à comprendre pourquoi un tel effort n'est pas poussé jusqu'au bout.

Car il y a plusieurs prestataires et que malheureusement les standards ne sont pas aujourd'hui utilisés par tout le monde et qu'il est difficile de faire changer les choses. Il y a aussi des deadlines à respecter et il est important de sortir le site même si celui ci n'est pas totalement finit.

4. Le mardi octobre 2006 à 09:04, par Pascale

Je note dans leur interview :

Le site présente un accès plus rapide à toute l’information sur l’éducation en France et en Europe,

Amusant lorsqu'on regarde le poids de la page et son impact sur le chargement : 164 ko au total ce qui donne un temps de chargement d'une minute en bas débit ! Mais bien évidemment, ce n'est pas de cette rapidité là dont ils parlent...

Entre ça, la non validation, le flash... y'a encore du boulot.

5. Le mardi octobre 2006 à 09:06, par Pascale

ouinnnn, et pourquoi les BBcodes ne fonctionnent pas ? :-\

6. Le mardi octobre 2006 à 11:08, par Monique

Bonjour,

Merci de ton intervention, Steven :-)

Autour d'un site il y a les décideurs (responsables du site, pas nécessairement connaisseurs, ce qui est normal), le ou les prestataires (qui devraient être connaisseurs, avec parfois des contraintes qui brisent leur volonté) et enfin les utilisateurs (simples utilisateurs, professionnels du métier ou amateurs passionnés, connaisseurs ou pas).

Forcément les points de vue sont différents et il est très intéressant d'avoir plusieurs sons de cloche ! Si tôt ce billet en ligne, j'ai envoyé un message aux responsables des deux sites, les invitant à intervenir ici s'ils le souhaitent.

Je suis cependant persuadée que même imparfaites, les réalisations prenant en compte l'accessibilité et la qualité d'un site sont à faire connaître, à encourager. A force de tourner entre passionnés, on finirait par croire que le discours sur les standards et l'accessibilité est bien connu... c'est faux.

@Pascale, effectivement, il y a un problème avec les BBCodes... je vais voir si je peux y faire quelque chose.

Amicalement,
Monique

7. Le samedi novembre 2006 à 17:15, par Raphael

@Steven > pas de soucis par rapport à tes arguments.
C'est effectivement l'éternel argument du client qui est toujours roi et qu'on ne peut pas faire tout ce qu'on voudrait.
Sauf que, sauf que... pourquoi annoncer dans une conférence de presse qu'un site est conforme aux normes W3C si ce n'est pas vrai (et facilement vérifiable) ?
Là je ne comprends plus.
A moins que le terme de "W3C" ne devienne un argument marketing dans les conférences de presse, un mot qu'il faut prononcer pour donner du sérieux au projet ?

8. Le mardi novembre 2006 à 16:05, par Thus

Pour avoir longuement travaillé sur le nouveau site du ministère, je peux assurer que l'accessibilité est constamment en tête de ses webmestres et qu'ils font leur possible pour y tendre au maximum.
Je préfère voir de la bonne volonté en la matière plutôt qu'une équipe qui avance à reculons et sous la pression d'organismes rigides.

- page 1 de 3