Petit conseil n'oubliez pas l'élément «noscript»

JavaScript est un langage puissant qui donne vie à des sites Web avec interactivité, jusqu'au moment redouté où JavaScript est désactivé, de manière inédite, dans le navigateur. Dans cette astuce, nous examinerons les solutions de rechange avec le

Pas de JavaScript

Les utilisateurs peuvent désactiver JavaScript pour un certain nombre de raisons. Ils le font peut-être aussi pour faire face aux contraintes de bande passante, pour préserver la batterie de leur téléphone, pour des raisons de confidentialité, afin de ne pas être suivis avec des scripts d'analyse. Quelques personnes installent même des extensions de navigateur telles que NoScript pour empêcher le navigateur d’exécuter JavaScript. Autrement dit, si JavaScript est désactivé, de nombreux sites Web et applications ne fonctionnent pas. sinon complètement, alors partiellement.

Regardons quelques exemples.

Pointe: Pour les besoins de ce tutoriel, je vais utiliser Quick JavaScript Switcher, une extension pratique pour Chrome qui me permet d'activer / désactiver JavaScript en un seul clic..

WordPress.com

Le nouvel éditeur de publication WordPress.com dépend fortement de JavaScript. Comme vous pouvez le voir sur la capture d'écran suivante, il n’affiche que le logo «W» WordPress lorsque JavaScript est désactivé. Assumer la majorité de WordPress utilisateurs pourraient être non-férus de technologie, ils seraient probablement pas au courant de ce qui se passe.

WordPress.com post editor (11 décembre 2015).

Trello

Trello, une application Web de gestion de projet, dépend fortement de JavaScript. Contrairement à WordPress.com, cependant, Trello nous dit gentiment avec un simple avertissement:

Interface Trello (11 décembre 2015)

Facebook

Facebook gère encore mieux cette situation. Il affiche une notification, informe les utilisateurs de ce qui se passe et propose plusieurs actions à l'aide du bouton de déconnexion et d'actualisation, ainsi que la possibilité de recourir à la version optimisée pour les mobiles. Ceux-ci sont tous présentés avec une marque visuelle Facebook bien connue..

Facebook (11 décembre 2015)

New York Times

Certains sites peuvent n'utiliser JavaScript que partiellement, tels que les blogs et les sites d'actualités. Lorsque vous utilisez NewYorkTimes, par exemple, vous trouverez quelques points vides lorsque JavaScript est désactivé. Les icônes de recherche qui accompagnent le Chercher et le Sections les liens disparaissent, comme vu ci-dessous.

C'est une dégradation gracieuse (les utilisateurs peuvent ne pas le remarquer), soulignant qu'il est sage de fournir la meilleure expérience possible lorsque JavaScript est désactivé. 

Utilisation de l'élément «noscript»

Notre solution de repli dépendra en grande partie de la manière dont nous déployons JavaScript sur nos sites Web. noscript l'élément sera utile dans de nombreux cas. Comme son nom l'indique, nous pouvons utiliser noscript rendre le contenu alternatif. Quelque chose dans les balises ne seront rendues que si JavaScript est désactivé.

Pour servir d'exemple, j'ai construit une page de démonstration. Cette démo reproduit l’effet de chargement d’image flou tel qu’il est visible sur Medium. Les images et l’effet de flou sont tous deux transmis par le biais de JavaScript, alors devinez ce qui se passe lorsque nous désactivons JavaScript?

Les images ne seront pas chargées.

Pour afficher ces images, nous pouvons les envelopper dans noscript des éléments, ainsi que l’emballage des déclarations de style, abordant les problèmes de positionnement.

  … 
      
 

Nous pouvons aussi utiliser le noscript élément permettant d'informer les utilisateurs de l'activation de JavaScript - similaire à ce que font Facebook et Trello. De plus, nous pouvons ajouter un lien de référence pour aider nos utilisateurs à sur JavaScript.

Emballer

Fournissant noscript En tant que solution de secours, il est utile de dire aux utilisateurs du site Web que, sans JavaScript, les choses ne fonctionnent pas nécessairement à 100%. Mais n'oublions pas que votre priorité devrait être de vous assurer que le manque de JavaScript (ou de CDN, ou de toute une profusion d'autres dépendances) ne rompt pas l'expérience de l'utilisateur. Merci à Christian Heilmann d’avoir fait passer ce message.