Accessibilité et utilisabilité: discrète Javascript

Mardi, Mars 27, 2007

Permettre aux utilisateurs d'interagir avec une page Web produite ces dernières années une augmentation significative de l'utilisation du client-scripts côté: Javascript code peut répondre en temps réel et de gérer une variété d'informations. Le Web2.0 est l'ultime expression de cette capacité d'interaction, dans lequel l'utilisateur final - l'utilisateur, participe activement à la construction et toutes les 'évolution du site Web, qui interagissent avec elle et en aidant vous-même. Est mentionné User-Generated Content (UGC ou - user-generated content) qui voit le "navigateur" certainement pas passif!

Pour parvenir à cette interaction, alors de permettre à l'utilisateur final d'ajouter sa contribution, ont élaboré une série de techniques qui ont changé l'apparence et le comportement de pages Web (statiques jusqu'à présent, et maintenant similaires aux applications traditionnelles de Desktop) ces dernières années. Modifiez le contenu d'une page, envoyer des fichiers, d'accorder leur vote à une vidéo ou un document, enregistrer ou modifier vos données, sont quelques-unes des opérations demandées dans de nombreux services (2.0 beta) sur le Web

La demande croissante d'outils clients (Prototype, Dojo Toolkit, jQuery, ASP.NET, Ajax, ...) et serveur (Ruby on Rails, bibliothèques PHP, JSP et ASP, ...) pour le développement du Web 2.0 a conduit à l'émergence de nombreuses outils de développement, des bibliothèques ou d'une philosophie simple d'un nouveau développement sur le Web;

Ces techniques et ces instruments ont été utilisés dans presque toutes les combinaisons possibles, grâce à leur fonctionnalité modulaire et la capacité de résoudre certaines tâches à des moments précis. Certains ont choisi, par conséquent, des solutions entièrement en Flash d'Adobe, qui a utilisé des solutions hybrides (Adobe Flash + Javascript), qui, à partir de bibliothèques génériques comme Prototype, a atteint ses propres cadres. La majorité de ces instruments est également open source (ou libre) et cela a certainement contribué à la propagation d'énormes très rapidement.

Le prix que vous payez, cependant, pour obtenir cette nouvelle interaction a été une perte nette de l'accessibilité (et souvent la facilité d'utilisation) de la Paradoxalement Web, l'élargissement des possibilités d'interaction a limité le nombre des usagers qui, pour diverses raisons, ne peuvent pas accéder à ces nouvelles technologies! Il y avait donc un'incremento le Digital Divide, souvent exclusivement due à l'abus de certaines développement technique ou tout simplement ne pas tenir compte de certains objectif final.

Lorsque vous développez un site Web, ou simplement une page Web, n'oubliez pas de «l'utilisateur final, qui peut consulter notre site avec des périphériques (navigateur ou agent d'utilisateur) autres que celles que nous attendons, par-dessus tout, avec des caractéristiques et d'autres paramètres que ceux que nous avons pris pour acquis (résolution d'écran, nombre de couleurs, JavaScript désactivé, le manque d'Applet ou ActiveX Plugin, etc ...). Il s'ensuit que, en plus de la simple compatibilité (fonctionnelle et visuelle) entre autre navigateur doit prêter attention aux caractéristiques qu'ils possèdent. L'argument, bien sûr, est complexe et articulée.

Il est juste de forcer un utilisateur à avoir JavaScript disponible et autorisé à naviguer sur notre site Web?

Je pense qu'il ya deux réponses possibles à cette question, le premier mai est non, pas bien, surtout si ce que nous voulons atteindre peuvent être structurés de manière à permettre à la fois un accès avancé est un accès de base. Toutefois, et c'est la deuxième réponse, il ya évidemment des cas limites où l'obligation de disposer d'une technologie particulière est indépendante de la capacité - et volonté - analyste programmeur!

Aussi - controversée - qui sommes-nous (les développeurs) de déterminer et de contraindre ceux qui devraient avoir quoi?

Si le projet que nous voulons atteindre, c'est qu'ils peuvent être utilisés par n'importe quel agent utilisateur, moyennant quelques précautions, le temps de développement et de la complexité croissante du code (HTML, JavaScript et Server Scripting) augmente. C'est un choix productifs, personnellement, pour dicter les règles du démarrage. Toutefois, la compatibilité formelle n'est pas une opération qui doit être planifiée dès le départ, nous pouvons en effet aborder la question à un moment plus tard, lorsque notre site Web (ou de notre service) est déjà en ligne.

Normalement, nous utilisons deux techniques, ou deux approches, pour bâtir un Internet vraiment accessible:

  • Dégradation élégante
  • Amélioration progressive

Dégradation élégante

Cette technique, également utilisée dans d'autres domaines que le web design, est supposé se concentrer maintenant dans la mise en œuvre d'un site Web très évolué, en utilisant des techniques et des technologies sans se soucier des problèmes de compatibilité à tous, et l'accessibilité. Facilité d'utilisation, cependant, c'est - bien sûr - le premier ingrédient de la définition. La deuxième étape consiste à intégrer toutes les fonctionnalités de soutenir les navigateurs et les utilisateurs qui ne sont - en fait - pour les marges.

Elle utilisera ensuite nos tableaux pour formater la mise en page, pas exacerber l'utilisation de CSS et de flotter, de manière à respecter le schéma du site, même sur les navigateurs plus anciens. Javascript apparaît où vous utiliserez le NOSCRIPT Tag de fournir un accès alternatif. Utilisez le ALT TITLE Tag ALT TITLE où les plus riches, etc ...

Graceful dégradation a cependant des limites. Ne pas prendre sérieusement en considération les différents types d'agents utilisateurs (ou les utilisateurs) dès le début, peut avoir des mauvaises (parfois laid) conséquences au lendemain. Pas toujours, en fait, vous pouvez ajouter ces Artefiz et outils peuvent fournir un contenu véritable alternative aux différents utilisateurs. L'expérience de l'analyste développeur web / designer, en l'occurrence, joue un rôle clé. Toutefois, un site Web évolue au fil du temps, elle s'améliore, ajoute des fonctionnalités qui mai pas être résolus par d'autres moyens, le cas ne pas forcer l'utilisation d'une technique particulière: la vision d'une vidéo (en Flash, QuickTime ou autre) est difficile -- sinon impossible - à réaliser en HTML standard?

Amélioration progressive

Cette approche est probablement ce qui personalmentre préférez. Il est l'exact opposé de Graceful Degradation. Pour ceux qui apprécient l'utilisation des feuilles de style est une technique déjà connue: à partir de la structure de base, le balisage simple, et que vous ajoutez toutes les fonctionnalités avancées. En vertu de la mise en page, puis CSS est l'approche utilisée pour le «remplacement d'image ou de la substitution par feuille de style de texte avec une image (il existe d'autres techniques qui exploitent même Ajax ou même Flash).

D'un grand intérêt dans ce type d'approche, est de répandre la soi-disant Javascript discret: JavaScript qui n'est pas intrusive. Cette technique peut améliorer la fonctionnalité d'un site Web en exploitant la capacité de manipuler le code JavaScript DOM. En plaçant dans une JavaScripts les meilleurs délais sur la page que vous pouvez faire pour rendre transparent pour les navigateurs qui prennent en charge JavaScript (ou avez désactivé Javascript), mais travaillant pour d'autres.

Les caractéristiques d'un discret JavaScript sont:

  • Des améliorations ou modifications - Non mis en oeuvre - les caractéristiques déjà
  • Transparence dans les agents utilisateurs qui ne supportent pas ou désactiver JavaScript

Le point 1 est essentielle pour l'accessibilité, de la même manière "utilisé dans le remplacement d'image CSS. Un exemple est un composant logiciel enfichable, ce qui améliore la visibilité d'un lien. Snap est un exemple classique d'un discret JavaScript: JavaScript est désactivé si le lien est toujours présent et son fonctionnement, cependant, que si JavaScript est activé la fonctionnalité de prévisualisation est ajoutée. Aussi, si vous ne pouvez pas accéder JavaScript aucun message n'est affiché: Point 2 - Non-intrusif.

Un autre exemple de Javascript discret et bien fait de Lightbox JS, qui améliore le diaporama d'images. A partir d'une série de liens (Tag <A>) avec l'attribut rel est capable d'afficher correctement les images liées dans une très catchy!

Cette technique est extrêmement polyvalent et permet une véritable approche progressive d'amélioration - et, sans exagération, un vrai web2.0 approche.

Dans ce scénario, l'utilisation du prototype de la bibliothèque est l'accès facile aux DOM HTML permet de remplacer et d'ajouter des fonctionnalités pour les éléments d'une page en les rendant plus polyvalent.

Les deux techniques, par conséquent, permettent de réaliser la fin des sites Web vraiment accessible. Inversement nécessitent une attention et des travaux supplémentaires à la fin, est récompensée par une plus grande quantité de visiteurs! J'adopte personnellement la technique de l'Amélioration progressive, pour une purement subjective et d'habitude. Choisir entre les deux techniques peuvent être indifférents à l'expérience, ainsi que le type de projet que vous devez développer, joue certainement un rôle clé.

Comme un exemple vaut mille mots, je propose que, avant mosrtare quelques extraits de code simple véritablement éclairé.

Related Post

Cet article était utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Chargement ...

4 commentaires à "Accessibilité et utilisabilité: Javascript discrète"

  1. getAvatar 1.0
    06 apr, 2007 L'accessibilité et la «Facilité d'utilisation:: K4 [U]:::

    [...] Accessibilité et utilisabilité: Javascript discrète ... [...]

  2. getAvatar 1.0
    09 dic 2007 upnews.it:

    Undolog | Blog Archive | Accessibilité et utilisabilité: Javascript discrète ...

    Permettre aux utilisateurs d'interagir avec une page Web produite ces dernières années une augmentation significative de l'utilisation du client-scripts côté: Javascript code peut répondre en temps réel et de gérer une variété d'informations. Le Web2.0 ...

  3. getAvatar 1.0
    23 juin 2008 Texte de remplacement Techniques en HTML / CSS | Undolog.com:

    [...] Page Web est de remplacer le fonctionnement en utilisant les feuilles de style (voir amélioration progressive de l'accessibilité et l'utilisabilité: discrète Javascript). Cette technique permet de rendre accessibles les contenus du site indépendamment de [...]

  4. getAvatar 1.0
    09 ottobre 2008 Amélioration progressive: améliorer l'expérience utilisateur pour les navigateurs modernes - Francesco Gavello Webdesign Portfolio:

    [...] Accessibilité et utilisabilité: discrète Javascript. Excellent undolog.com article qui parle de javascript discrète aborde les deux questions avec un aperçu de [...]

Laissez un commentaire

TAG PERMISSIONS XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE:
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL