De la bonne utilisation des technologies
Par Laurentj le jeudi, septembre 15 2005, 22:05 - Technologies Web - Lien permanent
Tristan demande ce qu'on peut penser de SVG et de Canvas
quid de l'accessibilité, de la sémantique, de la validation ?
J'en pense que Canvas et SVG n'ont absolument pas la même finalité, même si il est aisé de les confondre puisqu'ils peuvent produire un résultat visuel identique.
Un contenu SVG est un document, et canvas est un outil. SVG possède un contenu. Canvas n'a qu'une apparence, résultant de l'execution d'un script. SVG peut donc être lu, comme tout document. Son utilisation et intégration est donc parfaitement adapté dans un contexte site web.
Canvas est par contre déstiné aux applications web. C'est à dire que son utilisation est tout indiquée dans un "truc" qu'on utilise, et non pas qu'on "lit". Aussi je pense que canvas n'a strictement rien à faire dans (X)HTML car sa présence dans un document est totalement inadéquate. Il n'a aucune valeur semantique, et n'est absolument pas accessible.
Je pense qu'on fait de plus en plus fausse route. On vampirise le HTML pour réaliser des applications web. Certes, on le fait depuis longtemps faute de mieux, mais de nouvelles technologies émergent. Il serait peut être temps alors d'arreter d'utiliser HTML pour tout et n'importe quoi, et de l'utiliser uniquement ce pourquoi il a été conçu : le document. Il serait peut être temps d'utiliser autre chose pour les applis web, comme le XUL, pour avoir de vraies interfaces utilisateurs.
Parce que franchement, les interfaces à la google mail et yahoo mail, c'est super pour l'utilisateur "normal", mais il faut voir pour les autres le cauchemar, que ce soit coté accessibilité ou développement. En effet les développeurs s'arrachent les cheveux à mettre des balises, des images, des feuilles de styles dans tous les sens, sans compter les nombreux scripts pour faire que l'interface utilisateur ressemble à une interface utilisateur classique comme on trouve dans n'importe quel logiciel, que le fonctionnement d'un onglet ressemble à un vrai onglet, qu'une liste arborescente ressemble à une liste arborescente comme dans l'explorateur. Alors qu'avec un langage de type XUL, ça se fait avec quelques balises. Le développeur n'a qu'à se concentrer sur les traitements déclenchées par l'interface et non se concentrer sur le fonctionnement intrinsec de son interface.
Accessibilité ? Les interfaces utilisateurs HTML utilisant des scripts de partout pour faire des onglets, des trees etc ne sont pas accessibles. Les développeurs web font-ils ce qu'il faut pour intégrer les mécanismes d'accessibilité inhérents à l'usage d'une interface utilisateur ? Assurément pas. Ils ne peuvent pas vraiment. Au mieux, ils font ce qu'il connaisse en accessibilité d'un document, en HTML. Mais malheureusement, un document n'est pas une interface utilisateur. La problèmatique est tout autre. Je vais prendre un exemple simple : le bouton.
Imaginons par exemple qu'il n'y ait pas de bouton en HTML. Le développeur décide alors d'utiliser un span pour réaliser un bouton. Il va donc falloir d'abord conçevoir l'habillage pour que ça ressemble à un bouton. Premier problème : il sera forcément en totale opposition avec les recommendations de tels ou tels environnements graphique. Si il fait un bouton type "windows", celui-ci ne sera pas cohérent dans un environnement KDE, ou GNOME, ou MAC OS X. Et vice versa. Ce genre de problèmatique fait parti de l'aspect accessibilité.
Le développeur va devoir ensuite réaliser le comportement du bouton : gérer les clics, le focus, l'activation, la désactivation et tout autre action sur son faux bouton (si il a du temps..). C'est un boulot monstrueux par rapport à ce qu'on fait quand on réalise un logiciel classique. Dans n'importe quel langage, déclarer un bouton dans une interface de logiciel, c'est 3 lignes de code à tout casser. En XUL, une balise. En HTML/javascript : 150 lignes de code. Pour arriver à un résultat pas forcément à la hauteur. Et le lecteur vocal d'écran, la plage braille et tout autre dispositif non visuel, y compris le clavier (la fameuse touche tab pour passer le focus d'un element à un autre), lui ne verra qu'un span. Pas un bouton. Et par conséquent, sera certainement ignoré parmis les actions possibles sur "l'écran" (à moins de mettre des attributs title, alt ou que sais-je, mais ce n'est franchement pas ce qu'il y a de mieux). Canvas, c'est pire, parce qu'il n'a aucun contenu. Avec du SVG, il y a du contenu. Un système de lecteur vocal peut dire, là il y a un cercle, là un rectangle, par ce que c'est écrit dans le document. Au niveau du canvas, c'est le blanc complet.
Je vous laisse imaginer le cauchemar pour rendre accessible un faux onglet, une fausse liste arborescente en HTML, un menu déroulant etc, bien plus compliqué qu'un bouton. Certes, il existe certainement des scripts et bouts de code tout fait, qui accélèrent le développement, mais je doute fortement qu'ils aient les qualités requises en matière d'accessibilité. Sans compter les conséquences au niveau téléchargement.
En passant, les fameux widgets DashBoard sous MacOs X, réalisés en HTML, et utilisant canvas, doivent être une horreur coté accessibilité à cause des raisons que je viens d'évoquer. (quelqu'un pour confirmer ?)
Il n'y a en principe pas ce problème d'accessibilité avec un langage comme XUL, car ce n'est pas le développeur qui construit le bouton, mais le système. Le navigateur demande à l'environnement graphique de lui créer un bouton lorsqu'il voit qu'il faut créer un bouton (c'est ce qu'il fait pour un <input type="button"/> en html, mais bien sûr, pas pour d'autres élements "simulés" en html). De ce fait, l'élement a donc nativement toutes les propriétés et comportements que l'utilisateur attend. Et que n'importe quel système d'accéssibilité attend. Le lecteur vocal écran est informé que ceci ou cela est un bouton ou une liste arborescente, ou un menu déroulant. Il est informé de toutes les caractéristiques intrinsec du widget. Il sait quoi faire. La réaction va donc être tout à fait adaptée. L'utilisateur aura le bon "stimulis" qui lui fera prendre conscience de la nature de l'objet qui a le focus. Les raccourcis claviers dont a l'habitude l'utilisateur dans son environnement graphique fonctionneront (alt+lettre pour ouvrir la barre de menu par exemple). Etc.
Pour en revenir au canvas, tout comme le html n'est pas adapté pour réaliser une interface utilisateur, canvas n'est pas adapté aux documents du web (en particulier HTML) pour reproduire un dessin accessible. Le SVG, si.
Il faut utiliser les technologies adaptées aux besoins. Alors certes, à cause du manque d'un langage XUL-like standardisé, on va continuer à mélanger les deux genres. Quand on sait qu'il a fallu 5 à 7 ans pour avoir une implémentation de CSS2 plus ou moins bonne dans tous les navigateurs, j'ai bien peur qu'il faille attendre tout autant (sinon plus, voire jamais?) pour un XUL like standard adopté par tout le monde.
On peut noter l'initiative du whatwg, qui est en train de mettre au point une évolution du HTML, avec des formulaires plus complet et plus riche, des balises documentaires plus nombreuses. Mais pas vraiment grand chose pour faire facilement une interface utilisateur sérieuse, ce qui réserve ce HTML aux documents, et donc avec quelques incohérences dans leurs spécifications (toujours en cours de rédaction), comme cette balise canvas qu'ils proposent, qui, pour moi, n'a pas sa place dans un document. J'éspère qu'ils n'iront pas trop loin et que cela n'aboutira pas à un mélange de sémantique documentaire et de sémantique interface utilisateur. Car alors j'ai bien peur que cela ajoute des incohérences et surtout, fasse surgir des mauvaises utilisations.
Commentaires
L'article est bien plus complet que toutes les bêtises que j'aurais pu dire. Merci. Tu penses quoi de l'association XUL, XForms. (XForms Links)
intrinsèques.
Sinon, à mon avis, sans mettre aucunement en doute ta plaidoirie, ce qui fait qu'un Google utilise le HTML et 150 lignes de code, c'est tout simplement le fait que ça fonctionne mal partout, plutôt que de fonctionner bien dans un seul navigateur. Avec XUL, ça les oblige à redévelopper une version par navigateur (XUL pour Mozilla, XAML pour IE7, HTML pour IE6, Safari, Opera, Konqueror)...
Pour ma part j'ai du mal à déterminer ce que serait un dessin accessible.
Ben oui si on fait une interface en xul sur une application web comme yahoo mail ou gmail, ou passe le fameux choix que cherche à rétablir la fondation mozilla ? On risque de voir venir le diabolique "optimisé pour firefox".
Et puis je pense que dire que du html n'est que pour du document c'est réducteur. Le lien hypertexte n'est il pas lui meme par son comportement un composant pour application ? Et les éléments de formulaire ? C'est pas fait que pour être regardé/lu/admiré.
Cet article est celui que jaurai rêvé d'écrire ;-)
Je suis moi aussi très perplexe quand à <canvas> qui me fait penser, peut etre à tort, au retour de l'iframe. Et se court-cicuitage du W3c me donne des frissons.
Quant à l'utilisation du XHTML pour décrire autre chose que des documents, je suis complètement d'accord. Même si le web à commencé comme une collection de document, ce n'est plus les cas aujourd'hui.
On peut distinguer trois web :
- le Web collection de documents : basé sur le XHTML.
- le Web plate-forme applicative : qui a besoin d'un XUL-like.
- le Web sémantique : basé sur le RDF/XML.
A chaque Web sa technlogie, même si le XML uniformise le tout (et mérite ainsi son statut de "langage du Web".
Il semble que le W3C ne croie pas en la conception du XUL et préfere une solution plus transversale, mais ce débat m'échappe un peu.
Au passage, qu'en est-il de la standardisation de XUL ? Toujours au point mort ? Ou est-ce que le projet avance ?
Dans le billet La nouvelle bataille du web s'annonce : XUL vs XAML il y a près de 2 ans tu disais :
Alors, qu'en est-il aujourd'hui ? Windows Vista et son XAML s'approchent, et je ne vois toujours pas grand chose venir, à part un XUL Runner qui me semble encore bien loin d'être opérationnel. L'avenir appartient-il définitivement à XAML ?
Après réflexion, je ne vois pas vraiment la différence avec une image, une animation ou une vidéo (tout ce que regroupe la balise "object" en gros). La valeur sémantique accessible, c'est à l'auteur de la donner en fournissant un contenu alternatif correct aux utilisateurs ne pouvant pas profiter de la représentation qu'il a imaginée.
J'ai l'impression que selon ton billet, un document ne peut être que du texte. Or ce n'est pas vrai, on aura toujours des illustrations, des schémas, ... L'exemple selon lequel SVG serait plus accessible "tel quel" ne vaut que dans des cas vraiment très basiques (un cercle rouge), et certainement pas dans les cas d'utilisation réelle (un renard à la queue enflammée entourant la Terre, de dos et dans le sens des aiguilles d'une montre), où une représentation alternative sera toujours nécessaire pour rester accessible.
Benoit : je ne suis pas d'accord avec toi. Une image, une animation, une vidéo, c'est une information. Canvas n'est pas une information. C'est un outil, puisqu'il est déstiné à générer un graphique, une image, suite aux actions de l'utilisateur. Si le contenu (qui n'est pas accessible) change tout le temps, l'éventuelle "title" que tu indiques ne sera que trés peu explicite.
Tu remarqueras que pour une animation ou une vidéo, il n'y a pas de balises spécifiques. Juste "object". Qui peut offrir une certaine accessiblité selon la qualité du plugin en la matière. Puisque ce dernier repose sur les ressources de l'environnement graphique du système et donc éventuellement de ses fonctionnalités d'accessibilité.
Pour ton exemple du SVG, je suis presque d'accord. Mais admet que toute la description de l'image est présente. Et on peut trés bien imaginer un dispositif, une tablette, affichant en relief des formes en fonction des instructions SVG ;-)
C'est bien pour ça que je déplore l'absence d'un standard de ce coté là.
Je préfère utiliser le Flash plutôt que le XUL. Certes, il a des inconvénients, mais il a aussi des avantages qui compensent ses défauts face au XUL (portabilité par exemple).
Quand le XUL tournera partout aussi bien que le flash, pourquoi pas. En attendant, je ne vois pas l'intérêt de cette technologie.
C'est pour troller que tu dis ça ? ou parce que tu n'as pas compris ce qu'étais XUL (et mes propos) ? Comparer XUL avec flash, c'est comme comparer un fromage avec un steak, ça n'a pas de sens, ce sont deux choses totalement différentes.
Parce que d'autres ont parfaitement compris ce qu'était XUL. En tout les cas, aujourd'hui, pour des applis intranet, XUL prend tous son sens..
Avec XUL tu fais des applications et avec Flash aussi. Je ne vois donc pas en quoi ce n’est pas comparable ou pourquoi on ne peut pas le faire. Certes flash servait au départ à faire des animations, mais aujourd'hui il permet de faire d'autres choses, comme des applications. Et si je me permets de dire ce que j'ai dis, c'est justement que j'ai compris ce qu'étais le XUL (comme flash d'ailleurs, mais est-ce ton cas ? je ne suis pas sûr vu ta réponse).
Ah et sinon, pas la peine de dire que c'est pour "troller" ou autr. C'est peut être à la mode ces expressions, mais on peut quand même s'en passer quand on discute. Enfin bref, ça sert vraiment à rien de discuter et maintenant je le sais.
Flash ne permet pas de générer les éléments natifs d'une application comme Laurent le disait pour le DHTML dans son excellent article. Tout ce que Flash va te permettre de faire, c'est un simulacre d'application.
Comme quoi par exemple ?
Ah? Première nouvelle. :))) Qu'est-ce qui te fait dire cela?
Nicolas : je te demande si c'est vraiment pour troller, parce que tu débarques au milieu d'une discussion parlant des standards, d'accessibilité, et de XUL like, en disant, moi j'utilise flash, alors que flash est à l'opposé des standards, n'est pas accessible pour deux sous, et n'a pas grand chose avec XUL. Bref, tu parles d'une chose sujette à polémique en sachant (pertinament, si tu suis mon blog et autres blogs sur les standards) que Flash n'est pas trop le truc de ceux qui cherche à améliorer le web **pour tout le monde**. Ton intervention est ce qu'on appelle un troll (une intervention dont le but est de polémiquer inutillement).
Maintenant, peut être n'es tu pas au courant que flash n'est pas un standard, n'est pas accessible pour deux sous (même si il parait que ça s'arrange petit à petit), dans ce cas, tu trolles involontairement, je ne t'en tiendrais donc pas rigueur.
Pour répondre à ta question, il me semble que flash génére lui même ses boutons, et autres widgets, et ne fais absolument pas appel à l'environnement graphique pour qu'il le fasse à sa place. Les boutons et autres widgets en flash ne sont donc pas natifs à l'environnement de l'utilisateur, et par conséquent, inaccessible à autre chose que des clics de souris, en tout cas pas à des outils comme des lecteurs vocaux ou autre système d'accessibilité. Maintenant, peut être je me trompe et que dans la dernière version de flash, ça le fait, mais je doute. (pour le savoir, mets un bouton non stylé dans ton flash, et regarde la tête qu'il a sous macos, windows, kde, gnome etc... si il a la même tête : c'est du pure flash)
Alors là, bravo ! Tres bon papier, qui arrive pile poil sur un des sujets sur lesquels je reflechis en ce moment. Ca fait plaisir de lire ça. Il faut que je digère tout ça...
Première erreur.
Ensuite, tu dis
On voit donc que tu sais qu'il y a autre chose que XUL. Tu dis que le HTML & cie ce n’est pas génial pour faire l'interface de "vraies" applications. Je suis d'accord. Ensuite je dis simplement que si je devais réellement faire une application, j’opterais pour flash car au moins ça fonctionne partout (si le plugin) est installé, et que le jour où avec le XUL ça serait pareil, ça serait bien mieux. Où est le troll ?
C’est ici que ça se gâte. Je parle du flash pour les applications, pas pour faire des sites web en entier, merci de ne pas me prendre pour un con.
Enfin bref, c’est un dialogue de sourd vu que tu es apparemment contre toutes les technologies non standard (anti MS (suffit de lire ton blog et tes réactions) et anti Flash, par exemple). Donc fin de discussion, et un blog en moins à lire.
canvas est plus bas niveau qu'SVG, tout simplement. C'est comme écrire directement sur un buffer vidéo. Alors que SVG, c'est un document. Si tu modifies le document via DOM, l'affichage en est altéré. Avec canvas, il faut soit tout reécrire soit effacer la partie qui a bougé et la remettre dans sa nouvelle position. De même on peut appliquer des pourcentages avec SVG, alors qu'avec canvas on ne travaille sur les pixels.
Canvas permet si je ne m'abuse de dessiner dedans. A la manière d'un
Graphics(ou plutotGraphics2D) en Java. La, ou on pourrait mettre un peu plus de monde d'accord, ce serait en permettant comme on le fait pour HTML avec DOM, d'obtenir un arbre DOM SVG du contenu du Canvas, à la manière d'unSVGGraphics. De cette manière, Canvas, deviendrait un cheval de Troie pour SVG et XBL...C'est beau de réver !!
Je me permet de rebondir sur ce paragraphe douteux. Les widgets dashboard ne sont pas specialement faits pour être accessibles dans le sens où leur but n'est pas de s'afficher dans un browser web mais plutôt sur le bureau de l'utilisateur. Le cadre est donc très restreint. Les widgets sont des applications, pas des documents. Ainsi l'emploi de HTML + ECMAScript + Canvas est essentiellement un moyen plus qu'une fin. Il n'y a donc aucun intérêt à ce que les widgets emploient un balisage respectant une sémantique, ce qui compte c'est de fournir un moyen simple (et familier pour un large public) pour développer des widgets. En ce sens, Dashboard a fait un choix plutôt judicieux. On peut légitimement constater que la technologie de base est détournée de son but originel (des documents), mais dans ce cas cessons de faire des applications web avec du HTML comme socle technique (ça va dans le sens de ton billet) :-)
Plus de précisions techniques sur les widgets Dashboard : http://developer.apple.com/macosx/dashboard.html
JPz : l'accessibilité n'est pas restreint au domaine du web. Peut être ne le sais-tu pas, mais les environnements graphiques modernes comportent des moyens d'accessibilités (voir les panneaux de configs de ton environnement), des API pour les systèmes d'accessibilité (pour les lecteur vocaux d'écran par ex etc..). Pour qu'un logiciel soit accessible, il faut donc qu'il utilise le maximum des moyens mis à disposition par l'environnement. Entre autre, il doit afficher son interface en faisant appel au système, de sorte que ce soit des boutons, des menus déroulants générés par le système qui soient affichés, ceux-ci étant nativement accessibles.
Or, les widgets DashBoard ne sont rien d'autres (à ma connaissance) que des fichiers HTML, et ils sont affichés par le moteur du navigateur Safari contrairement à ce que tu dis. Si le HTML de ces widgets a été conçu avec les rêgles d'accessibilité du web, Safari va alors utiliser au maximum les éléments de l'environnement de mac os X, donc le widget sera accessible. Si par contre le widget fait appel à des canvas, à des "faux" boutons, "faux" menus comme j'ai décris dans mon billet, je doute qu'il soit accessible dans MacOsX.
Au niveau accessibilité, le fait de "mal" coder un widget est encore pire que de mal coder une page html classique affiché dans safari, du fait que ces widgets sont incorporés dans le bureau de l'utilisateur, et peuvent donc géner l'utilisation du bureau.
Mon paragraphe n'a donc rien de douteux. N'ayant ni MacOsX, ni d'outils d'accessibilité spécifiques (lecteur vocal par ex), je ne peux vérifier. Mais la lecture du lien que tu m'as donné et d'autres connaissances, me confortent dans l'idée que la plupart de ces widgets ne sont pas accessibles.. Surtout quand sur le site d'apple ils montrent des exemples de création d'un bouton en utilisant des DIV...
Au fait, les widgets étant censés être des applications, je pense qu'ils font vraiment fausse route en ayant proposé l'utilisation de html pour l'interface. Ils auraient utilisés un XUL like, je pense que le développement de ces widgets aurait été encore plus simple, puisque moins besoin de scripts. Arguer le fait d'avoir choisi HTML parce que tout le monde connait, est une bêtise à mon avis, puisqu'en fait, pas du tout adapté..
C'est d'autant plus regrettable que David Hyatt, ancien mozillien et développeur de Safari, a implementé en grande partie XUL dans Safari (mais pas de nouvelle depuis longtemps.. rejeté par apple ?). Quel gâchi.
Merci de prendre les gens pour des cons ;-)
J'ai dis le contraire quelque part ? C'est le moteur WebCore qui fait le rendu dans un environnement légèrement différent au niveau EcmaScript (cf le lien que j'ai donné).
Effectivement il n'est pas accessible au sens propre, mais en même temps les widgets sont des petites applications conçues dans un but purement visuel. Elle n'intègrent pas tous les mécanismes OS X d'accessibilité, contrairement à des applications purement Cocoa. Si tu veux un truc accessible, tu fais une application normale.
Non. Mal coder une page HTML classique implique mal la coder pour tous les navigateurs. Un widget n'est pas fait pour être lu par un browser quelconque (par exemple un browser qui fait de la lecture pour un handicapé visuel). C'est donc moins grave que si je publie une page générée par Word.
Moi je l'ai trouvé moyennement pragmatique et objectif.
Pour des choses plus complexes tu peux incorporer des modules en Objective-C. Après chacun son point de vue, mais perso je trouvé l'idée bonne.
Pour revenir à ton article, je trouve que l'on emploie bien trop souvent le terme sémantique à tort et à travers. Sémantique de quoi ? Le web sémantique (RDF, OWL) c'est un beau concept, encore faut-il savoir de quoi il s'agit. Quand les gens expliquent que RSS est du web sémantique, il y a de quoi sourire ... Ensuite la "sémantique" de HTML est pour le moins limitée. Si j'analyse un document, j'aurai au mieux des informations du type "listes, header, paragraphe, image, lien". C'est pour le moins limité. Pour obtenir la "sémantique" du document, il faut faire du text mining derrière. Bref HTML pour des documents, c'est loin d'être la panacée si on y réfléchi un peu ... HTML est fait pour décrire des pages (et donc sa "sémantique" s'arrête là). Pour vraiment stocker des documents, DocBook me parait être un effort avec une "sémantique" plus riche.
Mes 2 cents Australiens.
Je ne te prend pas pour un con. Mais quand tu dis , je comprend que:
alors que si, ça s'affiche dans un browser web (sans les menus et autres toolbars)
J'ai mal compris, ou tu t'es mal exprimé..
Je ne suis pas du tout d'accord avec toi. En quoi un widget qui, par exemple, affiche la météo du coin, est purement visuel ? Il y a tout de même de l'information là-dedans. Pourquoi ne devrait-elle pas être accessible ? Beaucoup d'exemple de widget que j'ai vu ne sont pas purement visuel.
De ce que j'en sais, un lecteur pour handicapé visuel n'est pas restreint à l'affichage d'une page web. Je pense aux lecteurs vocaux d'écran, qui permettent à l'utilisateur de naviguer dans son interface, et eventuellement de lire une page web.
mouai... On a vu plus simple pour faire des trucs plus complexes que ce que permet HTML ;-) Enfin tout dépend de ce que tu entend par "plus complexe".
Je suis d'accord. C'est pour cela que je dis que l'utiliser pour décrire une interface graphique, ça l'est encore moins.