J'ai utilisé le Web pour un jour avec JavaScript désactivé
Cet article fait partie d'une série dans laquelle j'essaie d'utiliser le web sous différentes contraintes, représentant une démographie donnée de l'utilisateur. J'espère faire ressortir les difficultés rencontrées par de vraies personnes, qui sont évitables si nous concevons et développons d'une manière qui soit favorable à leurs besoins. Cette semaine, je désactive JavaScript.
Tout d'abord, pour clarifier, il y a une différence entre le support d'une noscript expérience et l'utilisation du tag noscript . Je n'aime généralement pas la balise noscript, car elle fragmente votre page Web en JavaScript et en versions non-JavaScript plutôt que de travailler à partir de la même base de données, ce qui rend les choses malicieuses et oubliées.
Vous avez peut-être beaucoup de contenu utile dans vos tags noscript, mais si j'utilise un navigateur compatible JavaScript, je ne vois rien de tout cela - je vais être coincé en attente de l'expérience JS à télécharger. Quand je me réfère à l'expérience 'noscript', je veux généralement dire l'expérience de l'utilisation de la page Web sans JavaScript plutôt que l'utilisation explicite de la balise.
Donc, qui se soucie des utilisateurs qui ne portent pas t avoir JavaScript? Est-ce que de tels utilisateurs noscript existent encore?
Eh bien, ils existent, bien qu'en petit nombre: environ 0.2% des utilisateurs au Royaume-Uni ont désactivé JavaScript. Mais le nombre d'utilisateurs qui ont explicitement désactivé JavaScript est manquant.
Pensez aux utilisateurs qui ont activé JavaScript mais qui ne bénéficient pas de l'expérience JavaScript, pour un certain nombre de raisons, y compris le blocage d'entreprise ou local. décapage d'éléments JavaScript, erreurs JavaScript existantes dans le navigateur à partir d'add-ons de navigateur et de barres d'outils, d'erreurs réseau, etc. BuzzFeed a récemment révélé que environ 1% des demandes pour leur délai d'attente JavaScript équivalant à 13 millions de demandes échouées par mois.
Pensez aussi aux marchés émergents mondiaux; les pays luttent encore pour construire un réseau d'Internet rapide, avec des populations incapables de se permettre un matériel rapide pour exécuter du JavaScript gourmand en ressources CPU. Ou pensez aux marchés établis, où même un iPhone X sur une connexion 4G n'est pas à l'abri des effets d'une page Web partiellement chargée interrompue par leur train entrant dans un tunnel.
Le Web est un environnement hostile et imprévisible, qui est pourquoi de nombreux développeurs suivent le principe de l'amélioration progressive pour construire leurs sites à partir d'une expérience de base de HTML sémantique, superposant CSS et JavaScript discret en plus de cela. Je voulais voir combien de sites appliquent cela en pratique. Quoi de mieux que de désactiver JavaScript tout à fait?
Comment désactiver JavaScript
Si vous souhaitez recréer mon expérience, vous pouvez désactiver JavaScript en explorant les paramètres de Chrome:
Ouvrez les outils de développement ( Chrome -> Affichage -> Outils de développement, ou onI sur le clavier)
Ouvrez le sous-menu du développeur (les trois points à côté de l'icône de fermeture dans les Outils de développement)
Choisissez 'Paramètres' dans ce sous-menu. ] Trouvez la section 'Débogueur' et cochez la case 'Désactiver JavaScript'
Création d'un message WordPress avec JavaScript désactivé
Après avoir désactivé JavaScript, ma première escale a été d'aller sur mon site de portfolio personnel - qui fonctionne sur WordPress - dans le but d'écrire mes expériences en temps réel.
WordPress is En fait, très noscript-friendly, donc J'ai pu commencer à écrire ce post sans aucune difficulté, même s'il manquait certaines fonctionnalités de formatage de texte et d'intégration de médias auxquelles je suis habitué.
Comparons l'écran de post de WordPress avec et sans JavaScript:
La version de noscript de la page de publication de WordPress, composée de deux entrées de texte de base. La version JavaScript contient des raccourcis pour le formatage du texte, l'insertion des citations et des médias.
Je me sentais très à l'aise sans les barres d'outils jusqu'à ce que je devais intégrer des captures d'écran dans mon post. Sans le bouton "Ajouter un média", je devais aller sur des écrans séparés pour télécharger mes fichiers. Cela est logique, car le contenu de «téléchargement en arrière-plan» nécessite Ajax, ce qui nécessite JavaScript. Mais j'étais assez surpris que l'écran séparé de médias ait également exigé JavaScript!
Heureusement, il y avait une vue de secours:
La version de Section médias dans le backend d'administration. J'ai été averti que la vue de grille n'était pas supportée sans JavaScript. Qui a besoin de grilles de toute façon? La vue de la liste était parfaitement bien pour mes besoins.
Après le téléchargement de l'image, j'ai dû écrire manuellement une balise HTML img dans mon post et copier et coller l'URL de l'image. Il n'y avait aucun moyen de déterminer l'URL miniature de l'image téléchargée, et toutes les légendes que j'ai écrites devaient également être copiées manuellement. J'ai vite eu marre de cette approche et prévu de revenir le lendemain et de ré-insérer toutes les images quand je me suis permis d'utiliser à nouveau JavaScript.
J'ai décidé de jeter un oeil à la façon dont le front-end de mon
Affichage de mon site sans JavaScript
J'ai été agréablement surpris que mon site ressemble beaucoup à celui de JS:
Site personnel avec JavaScript. Site personnel sans JavaScript. Seul l'intégration de Twitter semble différente. Jetons un coup d'oeil de plus près à cette intégration de Twitter: Notez les informations d'auteur, les statistiques d'engagement, et le lien d'information que nous n'obtenons pas avec la version noscript . Le 'tick' est un PNG externe. ( Source ) Styles manquants, mais contient tout le contenu, y compris le lien du hashtag et le lien vers le tweet. Le 'tick' est un caractère ASCII: ✔.
Sous le pli de mon site, j'ai également intégré du contenu Instagram, qui a bien résisté à l'expérience de noscript
Remarquez les points du diaporama sous le image, indiquant qu'il y a plus d'images dans la galerie. La version noJS n'a pas de tels points. À part la fonctionnalité de diaporama manquante, elle est impossible à distinguer de la version JS.
Enfin, j'ai un GitHub intégré sur mon site. GitHub n'offre pas un natif incorporé, donc j'utilise le non officiel GitHub Cards par Hsiaoming Yang .
La carte non officielle donne un joli petit instantané et des liens vers votre profil GitHub . Je fournis un lien de repli vers GitHub si aucun JavaScript n'est disponible.
J'espérais à moitié te choquer avec les stats avant et après ( mégaoctets de JS pour une petite intégration! Fin du monde, abandonnons JavaScript! ), et à moitié espérant qu'il y en aurait peu de différence ( amélioration progressive! Montrer l'exemple! Je suis un bon développeur! )
Comparons les poids des pages avec et sans JavaScript. Premièrement, avec JavaScript:
51 requêtes HTTP, avec 1,9 Mo transférées.
Maintenant sans JavaScript:
18 requêtes HTTP, avec 1.3MB transféré.
Par souci d'un tweet stylé, d'un embed GitHub et d'un Instagram intégrateur, mon site développe 600Ko de plus. J'ai également suivi Google Analytics et quelques fonctionnalités interactives cachées . Tout compte fait, 600 Ko ne semble pas exagéré - même si je suis un peu surpris par le nombre de demandes supplémentaires que le navigateur doit faire pour que tout cela arrive.
Tout le contenu est toujours là sans JavaScript, tout le les menus sont toujours navigables, et à l'exception de l'intégration de Twitter, vous auriez du mal à comprendre que JavaScript est désactivé. En conséquence, mon site passe le niveau de validation NOSCRIPT-5 - la meilleure notation non-JavaScript possible.
ashton.codes noscript appréciation: NOSCRIPT-5. ✅
Qu'est-ce que c'est? Vous n'avez pas entendu parler du système de classification noscript ? Je serais très surpris si tu l'avais fait parce que je l'ai inventé. C'est mon petit indicateur pratique de la convivialité d'un site sans JavaScript, et par extension, c'est un très bon indicateur de la façon dont un site améliore progressivement son contenu.
noscript Classification System
Sites Web - ou plus exactement , leurs pages individuelles - ont tendance à tomber dans l'une des catégories suivantes:
NOSCRIPT-5 Le site est pratiquement indiscernable de la version JavaScript du site.
NOSCRIPT- 4 Le site fournit la parité de fonctionnalité pour noscript, mais des liens vers ou redirige vers une version séparée du site pour y parvenir.
NOSCRIPT-3 Le site fonctionne largement sans JavaScript, mais certaines fonctionnalités non-clés ne sont pas prises en charge ou semblent brisées.
NOSCRIPT-2 Le site propose un message indiquant que son navigateur n'est pas pris en charge.
NOSCRIPT-1 le site semble charger, mais l'utilisateur est incapable
NOSCRIPT-0 Le site ne charge pas du tout et n'offre aucun retour à l'utilisateur.
Regardons quelques sites populaires et voyons comment ils marquent. 19659080] Amazon
J'ai un peu regardé un petit robot aspirateur pendant un moment. Ma location n'autorise aucun animal de compagnie, et c'est la meilleure chose à faire une fois que vous y mettez des yeux écarlates.
À première vue, Amazon fait un boulot avec sa solution non-JavaScript, bien que l'image principale du produit soit manquant.
Manquant l'image principale, mais indéniablement Amazon. Avec JavaScript, nous obtenons l'image principale. Regardez ce joli petit aspirateur.
En y regardant de plus près, un certain nombre de choses étaient un peu cassées sur la version noscript . Je voudrais les parcourir un par un et suggérer une solution pour chacun d'entre eux
No Gallery Images
Je voulais voir quelques photos des produits, mais cliquer sur les vignettes ne me donnait rien
J'ai cliqué sur ces vignettes mais rien ne s'est passé.
Solution potentielle
Il aurait été bien que ces vignettes soient des liens vers l'image complète, ouvrant dans un nouvel onglet. Ils pourraient ensuite être progressivement améliorés dans la galerie d'images en utilisant JavaScript:
Hijack l'événement click du lien vignette;
Saisir l'attribut href ;
Mettre à jour le ] src attribut de l'image principale avec la valeur d'attribut href
Le lien 'Signaler les informations incorrectes sur le produit' est JavaScript seulement
Cette fonctionnalité est-elle si courante qu'elle en vaut la peine télécharger des octets supplémentaires de JavaScript à tous vos utilisateurs afin qu'il s'ouvre comme un modal intégré dans la page?
C'est une bonne chose que l'information sur le produit me parût exacte, parce qu'il n'y avait aucun moyen de signaler des problèmes! L'attribut `href` avait une valeur de javascript: // qui ouvre un formulaire modal intégré
Solution potentielle
Le formulaire modal intégré d'Amazon requiert JavaScript pour fonctionner. Je voudrais faire de la fonction de rapport un formulaire autonome sur une URL distincte par ex. / report-product? Product-id = 123 . Cela pourrait être progressivement amélioré dans le modal intégré en utilisant Ajax pour télécharger le HTML séparément
Les avis ne sont que partiellement visibles par défaut
Problème
Le lien Read more ne fait rien.
Solution potentielle
Pourquoi pas afficher l'ensemble de la révision par défaut, puis utiliser JavaScript pour tronquer le texte de la révision et ajouter le lien "Lire la suite"?
Il convient de souligner que la critique title est un lien vers la critique sur une page autonome, il est donc encore possible de lire le contenu.
Dans l'ensemble, j'ai été agréablement surpris du bon fonctionnement du site sans JavaScript. Cela aurait tout aussi bien pu être une page blanche vierge. Cependant, le manque d'images de produits signifie que nous manquons une fonction vraiment essentielle - je dirais qu'il est essentiel de pouvoir voir ce que vous achetez! - Dommage que nous ne puissions pas mettre la cerise sur le gâteau et lui attribuer une note NOSCRIPT-5
Amazon noscript appréciation: NOSCRIPT-3. ?
Je n'avais toujours pas décidé quel produit je voulais acheter, donc je me suis tourné vers Camel Camel Camel, le traqueur de prix Amazon.
Camel Camel Camel
Je voulais décider entre l'iLife V3s Pro contre les A4s iLife, donc dirigé vers https://uk.camelcamelcamel.com/ . Au début, le site semblait indiscernable de la version compatible avec JavaScript
Camel Camel Camel, à la recherche esthétique et professionnelle - sans JavaScript. Vous pouvez lancer un diff sur ces captures d'écran et vous battre pour voir la différence!
Malheureusement, le graphique de l'historique des prix n'a pas été rendu. Il a fourni un remplacement du texte alt, mais le texte alt ne m'a pas donné aucune idée de si la tendance des prix a été en hausse ou en baisse.
Alt texte dit "Amazon histoire historique des prix" mais ne fournit aucun aperçu des données. Regardez ce joli tableau que vous obtenez lorsque JavaScript est activé.
Suggestion générale: fournit un texte alternatif significatif à tout moment . Je n'ai pas nécessairement besoin de voir le tableau, mais j'apprécierais un résumé de ce qu'il contient. Peut-être, dans ce cas, il pourrait être "graphique de l'histoire des prix Amazon montrant que le prix de cet article est resté en grande partie inchangé depuis Mars 2017." Mais générant automatiquement un résumé de ce genre est certes difficile et sujette à des anomalies. pour cet usage: montrez l'image . Le tableau sur la version scriptée du site est en fait une image autonome donc il n'y a aucune raison pour qu'elle ne puisse pas être affichée sur la version noscript ! le contenu sous le tableau m'a donné l'information dont j'avais besoin de savoir.
Qui a besoin d'un tableau? Nous avons une table!
La table fournit la parité de fonctionnalités nécessaire pour garantir une classification NOSCRIPT-5. Je vous enlève mon chapeau, Camel Camel Camel
À ce stade de ma journée, j'ai J'ai reçu un coup de téléphone à l'improviste: un ami m'a téléphoné et m'a demandé de me rencontrer cette semaine. Je suis donc allé sur Google Agenda pour vérifier ma disponibilité. Google a eu d'autres idées
Étonnamment, Google Calendar n'offre rien pour noscript utilisateurs.
J'ai été déçu qu'il n'y ait pas eu un noscript repli - Google est généralement assez bon pour ce genre de chose.
Je ne m'attendrais pas nécessairement à pouvoir ajouter / modifier / supprimer entrées à mon calendrier, mais il devrait être possible de fournir une vue en lecture seule de mon calendrier en tant que contenu de base .
Google calendar noscript estimation: NOSCRIPT-0 ?
Intéressé à voir comment Google gère d'autres produits, j'ai jeté un coup d'œil sur Google Spreadsheets:
Google Spreadsheets affiche ma feuille de calcul mais un gros message d'avertissement dit "JavaScript n'est pas activé "Et ne me laissera pas éditer son contenu.
Dans ce cas, le site échoue beaucoup plus gracieusement. Je peux au moins lire le contenu de la feuille de calcul, même si je ne peux pas les éditer. Pourquoi le calendrier n'offre-t-il pas la même solution de secours?
Je n'ai aucune suggestion pour améliorer Google Spreadsheets! Il fait un bon travail à informant l'utilisateur si la fonctionnalité principale est manquante de l'expérience noscript .
Google tableurs noscript estimation: NOSCRIPT- 2 ?
Cette note n'est pas vraiment mauvais! Tous les sites ne seront pas en mesure d'offrir une expérience mais au moins s'ils sont francs et honnêtes (c'est-à-dire qu'ils diront "oui, nous n'allons pas essayer de vous donner quelque chose"). ") Qui vous prépare - l'utilisateur noscript - pour quand il échoue. Vous ne perdrez pas quelques précieuses secondes à essayer de remplir un formulaire qui ne sera jamais soumis, ou à commencer à lire un article qui doit ensuite utiliser Ajax pour récupérer le reste de son contenu.
Maintenant, retour à mon potentiel Achat Amazon. Je voulais regarder des critiques de tiers avant de faire un achat.
La recherche Google fonctionne très bien sans JavaScript. Il semble juste un peu daté, comme ces vieux sites de bureau seulement à résolutions fixes.
noscript version a des options de recherche supplémentaires sur la gauche (autrement caché dans les paramètres sur la version JS) - et aucune bannière de confidentialité (peut-être parce que le «suivi» n'est pas pertinent pour les utilisateurs noscript ?) La version JavaScript a la capacité de rechercher via une entrée vocale, et le message de «rappel de confidentialité».
La vue des images semble encore plus différente, et je la la préfère de plusieurs façons - cette version se charge très rapidement et énumère les dimensions et la taille de l'image en kilo-octets sous chaque vignette:
noscript version: remarquez les méta-informations de l'image qui ne sont pas fournies dans la version scriptée! Version JavaScript: remarquez la zone 'related search terms' qui n'est pas fournie dans la version noscript .
[Google Search] noscript évaluation: NOSCRIPT-5 ✅
L'un des résultats de recherche m'a amené à une critique sur YouTube. J'ai cliqué, ne m'attendais pas à grand-chose. J'avais raison de ne pas m'énerver:
YouTube n'offre pas beaucoup d'expérience noscript .
Je ne m'attendrais pas vraiment à ce qu'un site comme YouTube fonctionne sans JavaScript. YouTube nécessite des capacités de diffusion avancées, sans parler du fait qu'il pourrait s'ouvrir au vol s'il fournissait un téléchargement MP4 autonome comme solution de repli. Dans tous les cas, aucun site ne devrait avoir l'air brisé. J'ai regardé cet écran pendant quelques secondes avant de réaliser que rien d'autre ne devait se produire
Suggestion : Si votre site n'est pas capable de fournir une solution de repli pour noscript vous devriez au moins fournir un message d'avertissement noscript
YouTube noscript appréciation: NOSCRIPT-0 ?
Lequel? [19659011] J'ai cliqué quelques liens de révision plus. Le Which? site de conseil m'a complètement échoué. Le site dit qu'il y a 10 bons aspirateurs à choisir, mais la liste est clairement peuplée d'Ajax ou quelque chose comme je ne vois rien .
Il s'agissait d'une page qui semblait bien chargée, mais ce n'est que lorsque vous lisez le contenu que vous réalisez que vous devez manquer certaines informations clés. Cette information clé est absolument essentielle au but de la page, et je ne peux pas l'obtenir. Par conséquent, malheureusement, c'est une violation de NOSCRIPT-1.
Suggestion : Si votre site Ajaxes dans le contenu, ce contenu existe à une autre URL. Fournissez un lien vers ce contenu pour vos utilisateurs noscript . Vous pouvez toujours masquer le lien lorsque vous avez Ajaxed avec JavaScript avec succès.
Lequel? site d'évaluation noscript estimation: NOSCRIPT-1 ?
Facebook
Finalement, je concède que je ne peux pas vraiment me permettre un vide pour le moment. Donc, j'ai décidé de sauter sur les médias sociaux.
Facebook dit JavaScript est nécessaire pour continuer, ou nous pouvons cliquer sur le lien pour le site mobile.
Facebook à plat refuse de charger sans JavaScript, mais il offre une option de repli. Voici notre premier exemple de NOSCRIPT-4 – un site qui propose une version distincte de son contenu pour noscript ou les utilisateurs de téléphones mobiles
La version mobile du site de Facebook.
La version mobile se charge instantanément. Il semble laid, mais il semble que je reçois le même contenu que je le ferais normalement. Crucialement, j'ai feature parity : Je peux accomplir les mêmes choses ici que je peux sur le site principal
Facebook noscript estimation: NOSCRIPT-4 ?
La page chargée à la vitesse de l'éclair:
50.8KB Page chargée en 1.39 secondes
Je ne pouvais voir que 7 éléments dans le fil de nouvelles à la fois, mais je pouvais cliquer sur "See More Stories", ce qui m'amène à une nouvelle page, en utilisant des techniques de pagination traditionnelles.
J'ai la possibilité de "réagir" à un commentaire sur Facebook, bien que ce soit une tâche multi-écrans:
Réagir en premier nécessite de cliquer sur 'Réagir' … … qui vous amène ensuite à un écran séparé pour choisir votre réaction.
Il n'y a rien qui empêche Facebook de construire un menu "réaction" en non-JavaScript, mais pour être juste, il vise les appareils mobiles qui ne peuvent pas planer.
Suggestion : Soyez créatif avec CSS. Vous pouvez trouver que vous n'avez pas besoin de JavaScript du tout.
Avant longtemps, un article vidéo est apparu dans mon fil de nouvelles. (À ce stade, je me suis rendu compte à quel point le contenu vidéo que j'avais vu sur la version mobile était inférieur à celui de Facebook, ce qui signifiait que je voyais les gens plutôt qu'une vidéo aléatoire qu'ils aimaient. en ce qui me concerne!)
Je m'attendais à ce que la vidéo ne fonctionne pas lorsque je clique dessus, mais en cliquant sur la vignette, la vidéo s'ouvre dans un nouvel onglet:
Vous n'avez pas besoin de JavaScript pour lire les fichiers MP4.
Je suis agréablement surpris que toutes les fonctionnalités semblent être là sur cette version noscript du site. Finalement, cependant, j'ai trouvé une fonctionnalité qui était juste trop maladroite et encombrante pour voir jusqu'à la fin: la création d'album.
Je voulais télécharger un album photo sur Facebook, mais dans noscript est une bête de somme Cela implique de télécharger une photo à la fois, en passant par deux ou trois écrans pour chaque téléchargement. J'ai désespérément essayé et échoué à trouver une option de téléchargement en masse.
La pénibilité de ceci est venue à moi après la photo numéro trois (mon album en contiendra beaucoup plus), alors j'ai décidé de l'appeler un jour et de revenir demain
Twitter
Les choses sont devenues bizarres quand j'ai atterri sur Twitter
Au premier chargement, j'ai eu ce qui ressemblait à un site de bureau normal. Après quelques secondes, j'ai été automatiquement redirigé vers le site mobile.
J'ai été intrigué par ce mécanisme, donc creusé dans le code source, qui était étonnamment simple:
Aussi simple que cette solution est, j'ai trouvé l'expérience assez maladroite parce que dans le flash avant d'être redirigé, je J'ai vu que l'une des personnes que je suis sur Twitter s'était fiancée. Son tweet n'apparaissait pas en haut de la version 'mobile', donc je devais aller le chercher
Suggestion : Construire une période de grâce dans votre logique côté serveur afin que les redirections et les rafraîchissements sans fin ne perdent pas de tweets intéressants avant que vous ayez eu l'occasion de les lire.
Je ne me souvenais pas du compte Twitter de mon ami. La recherche était un peu difficile – j'ai commencé à vraiment manquer les suggestions de remplissage automatique!
Heureusement, la page de résultats de recherche a amené son compte, et j'ai pu trouver son tweet. J'ai même été capable de répondre
Twitter noscript estimation: NOSCRIPT-4 ?
Cela peut sembler une note généreuse, étant donné la sensation maladroite, mais rappelez-vous que la chose clé ici est la parité des fonctionnalités.
J'ai essayé quelques autres sites de médias sociaux qui, contrairement à Twitter, n'ont pas atteint les sommets de la conformité NOSCRIPT 4.
Other Social Networks
LinkedIn a un bel écran de chargement sur mesure. Mais il ne se charge jamais, alors tout ce que je pouvais faire était regarder le logo.
LinkedIn noscript appréciation: NOSCRIPT-0 ?
Instagram ne m'a rien donné littéralement. Une page blanche. Une toute autre saveur de NOSCRIPT-0
Instagram noscript estimation: NOSCRIPT-0 ???
J'ai été surpris qu'Instagram ait échoué si spectaculairement ici, étant donné que le Instagram embed a parfaitement fonctionné sur mon site portfolio. Je suppose qu'avec une intégration vous ne savez jamais ce que le navigateur supporte les attentes de la tierce partie, mais comme je visite le site directement, Instagram est heureux de faire l'appel pour abandonner le support.
Le menu est un peu à l'écart, et la colonne est assez étroite (certainement un modèle que je vois sur beaucoup de sites – pourquoi "pas de JavaScript" signifie "appareil mobile"?) Mais je suis capable d'accéder au contenu.
J'ai cliqué sur l'onglet «Most Read», ce qui m'amène à une autre partie de la page. Avec les scripts, ce lien d'ancrage est progressivement amélioré pour obtenir le comportement de tabulation réel, qui est un bel exemple de construction à partir d'un noyau HTML solide.
Jusqu'à présent, voici le seul exemple de lien d'ancrage Je suis tombé sur mon expérience, ce qui est dommage car c'est une bonne technique qui économise un chargement de page supplémentaire et économise la fragmentation du site en beaucoup de micro pages.
Cela semble un peu étrange avoir un double problème de numérotation ici. Je clique sur l'une des histoires.
L'article devrait contenir une vidéo, mais se lit comme suit: "La lecture des médias n'est pas supportée sur votre appareil". Il n'y a pas de transcription.
Je ne peux pas accéder au contenu vidéo, mais en raison de problèmes de droits, je soupçonne que la BBC ne peut pas fournir une vidéo séparée distincte comme le fait Facebook. Une transcription serait bien – et bénéfique à plus que juste noscript utilisateurs.
Suggestion : Fournir des retombées textuelles pour le contenu audiovisuel. [19659008] Pour être juste, le contenu de l'article résume essentiellement le contenu qui apparaît dans la vidéo, donc je ne manque pas vraiment d'informations.
L'article et les pages d'index se chargent rapidement, à environ 300KB (principalement des images) . Les images miniatures pour les autres articles sur la page me manquent, et la possibilité de tirer pleinement parti de mon écran immobilier, mais cela ne devrait pas entraver la notation.
BBC noscript estimation: NOSCRIPT-5 ✅
GitHub
GitHub regarde presque exactement le même que son homologue JavaScript activé. Hou la la! Mais je suppose que c'est un site développé par des développeurs, pour les développeurs. ?
La seule différence que je peux voir est la façon dont GitHub gère le temps. Avec JavaScript activé, notez comment il est dit «il y a 2 jours» … Sur la version sans script, il est remplacé par "Mar 1, 2018".
J'ai fait un peu de ménage sur GitHub, en regardant autour de repos et en supprimant les vieilles branches. Pendant un moment j'ai vraiment oublié que j'étais sur la version non-JavaScript jusqu'à ce que je tombe sur un petit bug:
La section "Récupérer la dernière …" va tourner pour toujours…
Then I wondered, “How is GitHub going to handle applying labels to issues?” so I gave that a go.
These fields are unresponsive when you click on them.
I was unable to create an issue and add labels to it at the same time. In fact, I couldn’t find any way of adding the label even after creating a blank issue. It’s a shame the site fell at the last hurdle because it was very nearly a seamless comparison with the scripted version.
GitHub noscript rating: NOSCRIPT-3 ?
While GitHub looks incredible — I would never have known my JavaScript was turned off — not being able to use the same key functionality as the scripted version is a bummer. Even an ugly looking noscript site would get a higher score because functionality is more important than form.
Online Banking
If there’s one place I expected JavaScript to be required, it was on the NatWest bank website. I was wrong.
Not only does it work, but it’s also hard to distinguish from the normal site. The login screen is the same, the only difference being that the focus doesn’t automatically progress through each field as you complete it.
NatWest noscript rating: NOSCRIPT-5 ✅
Miscellaneous
I came across a few more sites throughout my day.
FreeAgent — the tax software site I use for my freelancing — doesn’t even try a noscript fallback. But hey, that’s better than showing a broken website.
FreeAgent shows a no-JavaScript message.
FreeAgent noscript rating: NOSCRIPT-2 ⛔
And CodePen, somewhat understandably, has to be a NOSCRIPT-2 too.
CodePen noscript rating: NOSCRIPT-2 ⛔
Tonik, the energy provider, doesn’t let me log in, but this seems like an oversight rather than a deliberate decision:
I see the words “embedded area” where I’m supposed to see a login form.
Tonik noscript rating: NOSCRIPT-1 ❌
M&S Energy lets me log in — only to tell me it needs JavaScript to do anything remotely useful.
M&S requires JavaScript to work, but you have to put more effort in to get to that point.
M&S noscript rating: NOSCRIPT-1 ❌
Now I come to my favorite screenshot of the day.
One of my colleagues once recommended an Accessibility for Web Design coursewhich I bookmarked. I decided to take a look at it today, and laughed at the irony of the alt text:
Alt text of “Personas: Accessibility for Web Design”. Soooo… what am I missing?
With the alt text of “Personas: Accessibility for Web Design,” I’m not too sure what I’m missing here — is it an image? A video? A PDF? The course itself?
Hint: It’s actually a video, though you have to be logged in to watch it.
The alt text isn’t really supporting its purpose, partly because it’s populated automatically. We as a dev community need to get better at this sort of thing. I don’t think I’ve read any useful alt text today.
Summary
I started this experiment with the aim of seeing how many sites are implemented using progressive enhancement. I’ve only visited a tiny handful of sites here, most of them big names with big budgets, so it’s interesting to see the wide variation in no-JavaScript support.
It’s interesting to see that relatively simple sites — Instagram and LinkedIn particularly — have such poor noscript support. I believe this is partly down to the ever-growing popularity of JavaScript frameworks such as React, Angular, and Vue. Developers are now building “web applications” rather than “websites,” with the aim of recreating the look and feel of native apps, and using JavaScript to manage the DOM is the most manageable way of creating such experiences.
There is a danger that more and more sites will require JavaScript to render any content at all. Luckily, it is usually possible to build your content in the same, developer-friendly way but rendered on the server, for example by using Preact instead of React. Making the conscious decision to care about noscript gives the benefits of a core experience as outlined at the beginning of this article, and can make for a faster perceived loading time, too.
It can be quite daunting to think about an application from the ground up, but a decent core experience is usually possible and actually only involves simple tweaks in a lot of cases. A good core experience is indicative of a well-structured web page, which, in turn, is usually a good sign for SEO and for accessibility. It’s usually a well designed web page, as the designer and developer have spent time and effort thinking about what’s truly core to the experience. Progressive enhancement means more robust experiences, with fewer bugs in production and fewer individual browser quirks, because we’re letting the platform do the job rather than trying to write it all from scratch.
What noscript rating does your site conform to? Let us know in the comments!
noscript, remarquez la colonne étroite et l'histoire unique avec vignette.
(rb, ra, il)