Recently I started a site of tools for boardgames players. Simple tools like dice and spinners.
I wanted the site to be as accessible as possible. So I challenged myself with some rules on how it would work.
One rule was that every tool must work without javascript.
I learned a lot by doing it, and started to write posts about building tools without js. But before I write any more I wanted to answer the question:
Why in 2021 would you bother making a website without js?
While researching this post I found two really great sources of information. So, most of this is going to be stolen from this article by Adam Silver and this post from gov.uk.
But I'm going to go a little deeper into why some people block js.
The obvious answer to why you should build a website that doesn't need js is… because some people don't use js. But how many?!
How many visitors don't use javascript?
The answer to this question is roughly 1%.
There's not a lot of information on this but here's what I found:
- A 2010 study by yahoo suggests
1.3%– web.archive - A 2013 study by gov.uk suggests
1.1%— gov.uk - For buzzfeed in 2018 it was
1%— youtube
1% sounds like a lot! is it really possible 1 in 100 people block javascript? well...no
The 1% from these studies is 1% of visits where javascript has failed for any reason.
According to gov.uk the number of people who actively block js (or use a really really old browser) is 0.2% — 1 in 500.
Those 0.2% have their reasons, but first let's look at the 0.8% of visits where the js fails.
Why does javascript fail?
There are lots of reasons your site's javascript might fail:
- Your javascript is broken! It happens.
-
A feature you're using doesn't work on an older browser. e.g.
ES6on an old version ofinternet explorer. - Inteference from a browser extension. Some web-extensions alter your site's code - with negative effects.
- Network Errors. Sometimes things just break.
- Mobile users losing signal - e.g. from being in a rural area, going through a tunnel, falling down a manhole, etc
- Some browsers block javsacript on slow connections. — Android does this
- CDN going down. in 2017 AWS went down for 3 hours
- Corporate or local blocking or stripping of Javascript. Sometimes organizations block javascript for security reasons.
- ISPs accidentally blocking your CDN — Sky Broadband once blocked jQuery
- mobile networks altering your content and breaking it — T-mobile and Orange also broke jQuery!
There's probably other reasons too.
That accounts for about 0.8% of visitors not using Javascript
But what about the 0.2% who block js?
Why do people block javascript?
Some people block javascript in their browser. Some people choose a browser that doesn't support javascript. There are a number of reasons why:
- Accessibility
- Security
- Privacy
- Cost
- Bandwidth
- CPU
- Battery
- are stuck with or prefer an very old or text-based browser
- they just like the web without javascript.
Accessibility
Some people find it easier to navigate the web with javascript switched off. There's less distractions.
Others choose text-to-speech browsers that don't support js.
Text-to-speech can work fine with javascript. For instance voiceOver on MacOS works within any browser.
Security
Many people disable js for security reasons, both professional and personal. No javascript means no malicious javascript too.
Who does this?
- People who work with sensitive or valuable data.
- Journalists and whistleblowers. Edward Snowden recommends switching off js
- Cautious people who don't want to get their credit cards stolen.
Privacy
Lots of people don't like corporations collecting their personal data. You might block ads, and tracking scripts.
Some people take that a step further and block all javascript. Then, if they trust a site, they'll allow it to run.
Cost & Bandwidth
Blocking javascript can save a lot of money.
Downloading d3.js (a popular graphing library) costs 1 cent in Canada. In Mauritania it costs 0.06% of the average daily income.
That's may not seem like a lot. But d3.js is only 90kB — and only one of many scripts someone may have to download to use a site.
Then javascript can request all kinds of data, images, video, and it adds up fast. Once you've visited a few sites you may find yourself over budget.
The same logic applies for people with limited bandwidth.
dev.to costs 24 cents to visit on mobile in canada!
CPU and Battery
Some people switch off javascript to save CPU and Battery.
Users of low-powered devices — or one that's doing more important tasks in the background — may want to take pressure off their CPU.
People without easy access to a power supply may want to save battery.
Out-dated Browsers & Text-based browsers
Very old browsers like IE < 3, Netscape 1, Mosaic, and others don't support javascript. Almost nobody uses these browsers anymore — but you can bet somebody is.
Some text-based browsers like Lynx don't support js. Lynx is a browser that runs in terminal applications. So someone browsing the web on a computer without a GUI may well be using it.
Lynx has been around since 1992 and is still updated today. So people are definitely using it.
Some people just prefer the web without js.
Some people think the web is better browsed with javascript off. It's faster and reduces distractions. See I Turned Off JavaScript for a Whole Week and It Was Glorious - Wired 2015
Should you cater to 0.2%?
Yes and no. Personally, I enjoy going out of my way to make things work. I find all this stuff fascinating. But making sure a site works for the 0.2% of people who disable javascript isn't really the point.
The Curb Cut Effect
An analogy that comes up often when talking about web accessibility is curb cuts. Curb cuts are the small concrete ramps on the side of the road.
Curb cuts we're added to sidewalks after a long campaign from disability rights activists. Their purpose was to give wheel-chair users the same freedoms non-disabled people enjoy.
Now that curb cuts are everywhere — everyone benefits from them. People with strollers, skateboarders, people delvering packages, and more.
The point? Making the world more accessible for one group of people benefits everyone. That's the curb cut effect.
Here's a great episode of 99% invisible about curb cuts.
Building sites that function well without javascript doesn't just benefit the 0.2% of people who disable it.
It improves the 0.8% of vists where javascript fails too.
Building everything you can without js will make your site:
- faster
- smaller – (most of the time)
- more reliable
- more accessible
- have smoother animations
- easier to index by search engines
- less vulnerable to hacks
- easier to develop – personal opinion
I'd prefer to write js all day — but finding html and css only solutions has made me a better developer.
It's forced me to find creative ways of solving problems — and to learn new html and css features.
Then when I do add javascript, it's ends up being a lot smaller and easier to manage.
How to disable Javascript
If you're going to build sites without js you're going to need to test them.
Probably the most popular way of disabling javascript is with the browser extension NoScript — it's available on Google Chrome and Firefox and elsewhere too.
As of writing this noScript has:
-
100,000+users on Google Chrome -
404,376users on Firefox
That's at least half a million people who use that specific app. There are many more apps and other methods of disabling js.
Anyway
Give browsing the web without js a try, or maybe even have a go at using Lynx. Let me know what you think.
Latest comments (50)
If you have network issues you can always refresh the page later you know. Also it's not always JS files that don't download fully, sometimes it's CSS files don't load as well, and this too can make the site unusable. So many times I get a page that's only partially loaded, I just refresh it and it works fine. And many times a page auto-refreshes when a file fails to load.
We can't totally throw away all the power that JS gives us today and cater to a few people who actively decided to break their internet experience by blocking Javascript.
From my experience, only sites that want your DATA will cater for the 0.2%. Other sites that sell you products will probably ignore you if you don't have 3g.
In addition, you can read the following:
Famous websites with JavaScript disabled
Habdul Hazeez ・ May 27 '20 ・ 5 min read
My WebDev Notes: HTML noscript tag and script blocking extensions
Habdul Hazeez ・ Apr 20 '20 ・ 4 min read
That's why i use typescript
.
.
.
.
Just kidding!
well, how do you fetch data without js(fetch)?
Well you can still get data from the server, you just have to serve it in a new page. There's some things that will be a nightmare without
js, but you can take it far — here's a chat app built with just css and htmlcan you elaborate more on this statement(if possible refer me to some demo or articles) " you can still get data from the server, you just have to serve it in a new page" and in your chat app you have used HTML form with POST method not GET method. I don't know why chat app site keeps loading page infinity, the finish time on network tab is not stopping at all. site reload whole webpage whenever I hit submit post, unlike fetch/xmlhttprequest.
Sure, I just mean to say that if
jsisn't availble you can always use the nativehtmlforms to send and receive data. It just requires a page load.There are other hacky ways of doing a fetch without a refresh or navigating to a new page. I actually sent you the wrong link before, I can't find a live version of the one I meant to send: Github - CSS only chat
...but that's a deliberately ridiculous example.
In reality there are times you just can't do without javascript. In those times, you should have a reasonable fallback. For example, Google Sheets, doesn't work without
js. But, if you try to access a sheet withjsswitched off, you still get to see a static version of the document.thanks for the clarification
Very nice article, thank you ! I made my thoughts aboute that.
Html is for semantic structuring data. Css for styling. Js for interactions...We could use html tricks instead js, but it would be broken some semantic rules of the tag in this context maybe.
What do you think?
Thanks. I think that’s generally a good idea. But not to be too strict with it.
Sometimes the end result is better when you use in built html functionality, or to style something with JS, or display content using css, e.g. background images.
Different if you’re working with a team. Which I don’t have a lot of experience with.
"Make your site work without JS and use JS for progressive enhancement" sounds good on paper, but in real life, implemented perfectly, it just means "Make a worse site for 99% of your audience. Less dynamic, slower to react, not offline-first, not as flexibly executing the designer's vision." It might take equal effort to making a modern site. It might even take somewhat less effort. But to do it without harming the experience of 99% of your users, you'd have to make a whole separate NoJS site. Is that something you have the budget for?
You might say that there are frameworks, even React and Vue-based, that offer server side rendering. That you could offer the same site to be consumed in two ways, "isomorphically". That is, of course, a complete fabrication.
You don't just lose clientside navigation of the outermost pages, at the cost of "merely":
But you also lose anything that's not a standard HTML5 element. Right click(long press on mobile)? Gone. Draggable lists? Gone. Sortable tables? Gone. 3D object views for your shop? Gone.
Applications for the mobile/touch web hardly use any standard elements at all.
I've only just started making things that work without javascript. I learned to code primarily with
vue.js. So pretty much everything I've made up til now doesn't work for a lot of people.What i've learned from building sites without
jsis that it's actually easier to build and use.Some things you just can't work without javascript. Of course.
For things that can you should try and make it work. And if you've got something ike a sortable table, then just show a non-sortable table when js is turned off. That'd be the default behaviour of something like
nuxt.jsthe SSR framework built onvueHere's a site built with
nuxt: sumcumo.com/en/path-next-generatio...It works completely fine without
jsTheir contact form doesn't work — but it doesn't appear either, it shows their email and social media instead.
Yes, most of the stuff on this non-application purely "business card" website is still accessible without javascript (at a cursory glance, on sumcumo.com/en/company and sumcumo.com/en/products
and
never appears, and you are left with an almost blank above-the-fold)
But at what cost? On sumcumo.com/en/jobs try scrolling down (with JS on)
When you switch from "products" to "people", there's a strange flash of color.
When you switch from "people" to "jobs" the site jerks sideways (probably a vertical scrollbar issue)
Generally, there is quite a bit of jank. I am not a neurotypical, so I am not going to judge how this affects the usual visitor, but this is one of the sites where I wish less JS (and less CSS animations, if that's what some of them are) was used. It's very distracting from the content.
I understand that NoJS is important here, as this seems to be a B2B product for the financial industry, where security might be ridiculous? Good job addressing that then.
Anyway, for me, good JS is subtle. It replaces native HTML constructs to be more convenient and effective. Which is why it is a lot of extra work, if at all possible, to automatically generate fallbacks from it.
Most NoJS/CSS tour-de-force s aren't like that. They take mediocre documents, and make them "pop" (viciously attack your face).
There is a time and a place for NoJS. But let's not pretend it's a sensible default, or that there aren't serious costs and potentially insurmountable handicaps associated.
Interesting thanks
Well basically you could do enough with css, but i hope you learned something out if this exercise.
Great article!
In Security a typo:
javscript --> Javascript
Thanks! Sorted.
Thank you for this article! I have to admit, that when I see someone's personal website which has only two subpages and it loads 4MB of javascript I start to twitch :/
My brother is visually impaired and from my experience websites with massive javascript bloat usually produce many issues with accessibility and are rather hard to debug.