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.
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
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
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?!
The answer to this question is roughly
There's not a lot of information on this but here's what I found:
- A 2010 study by yahoo suggests
- A 2013 study by gov.uk suggests
- For buzzfeed in 2018 it was
1% sounds like a lot! is it really possible 1 in 100 people block
1% from these studies is
gov.uk the number of people who actively block
js (or use a really really old browser) is
0.2% — 1 in 500.
0.2% have their reasons, but first let's look at the
0.8% of visits where the
A feature you're using doesn't work on an older browser. e.g.
ES6on an old version of
- 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
- 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
But what about the
0.2% who block
- are stuck with or prefer an very old or text-based browser
Others choose text-to-speech browsers that don't support
MacOS works within any browser.
Many people disable
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.
Lots of people don't like corporations collecting their personal data. You might block ads, and tracking scripts.
Cost & Bandwidth
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.
The same logic applies for people with limited bandwidth.
dev.to costs 24 cents to visit on mobile in canada!
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,
Some text-based browsers like
Lynx don't support
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.
Should you cater to
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
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.
0.2% of people who disable it.
It improves the
Building everything you can without
js will make your site:
- 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
css only solutions has made me a better developer.
It's forced me to find creative ways of solving problems — and to learn new
If you're going to build sites without
js you're going to need to test them.
NoScript — it's available on Google Chrome and Firefox and elsewhere too.
As of writing this
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
Give browsing the web without
js a try, or maybe even have a go at using
Lynx. Let me know what you think.
Top comments (50)
Yet another +1.
That's not the conclusion gov.uk came to. They came up with a way of tracking this number not including bot traffic.. Buzzfeed came to a similar conclusion and decided it was worth their time.
To be fair Buzzfeed’s 0.8% of traffic is bigger than most websites 100% of traffic, so it does make sense for them to invest significant resources to rebuild / cater to them . If your site gets 1000 visistors per week, and it’s not a pay-per-use, financially there is not incentives to spend 100s of hours to rebuild your website to cater to 10 people per week
Once you add up all the
0.8%niches everyone belongs to you end up something closer to
Everyone belongs to a niche at least temporarily. One could argue that there's no point in catering to people on 2g connections, or feature phone users, or the visually or motor impaired. But when you do make your site welcoming to everybody you may find more visitors show up — and you've improved your site not just for those specific people but for everyone.
Again, I think @konung made right point, you must calculate the money lost in such visitors, for BuzzFeed, Youtube and general social media, it makes sense because to offer server side rendering for
0.8%fits in their budget. For lot of small business applications, there is no enough returns to support SSR.
If user cannot even afford to upgrade from 2g to 3g, do you think they will pay for the services you will offer? The calculation is straight forward, for BuzzFeed and social media sites, even 2g user is a target audience because they sell ads and ads are generally targeted to all users for brand awareness.
But for SASS business services or any subscription based services where users will pay to business, non paying users are burden.
Every unnecessary computation is bad for climate. Performance not only equals better UX anymore, it means less emissions and better climate. websitecarbon.com is something I recently discovered which roughly calculates the carbon emission of a website.
While websitecarbon.com shouldn't be used as a strict benchmark, it definitely raises the question on how to create less emissions for websites? The answer most often than not is definitely using HTML and CSS without JS unless and until really necessary.
Imagine just going onto some modern website from a really old or bad device and it's like "download this 150MB+ piece of software just to view the site"...
Re your accessibility point,
for me is more like, this site could be ok, but someone's gone and replaced all the navigation with some custom scripted stuff that doesn't behave like I expect it to, my tab stops are all over the place, and half the links aren't... links. They're
divelements someone's attached events to because they think it's clever. I see this a lot.
If you take the extra time to make your JS-powered site run as well as a generic HTML site, that's ok, I guess, but seems a bit pointless.
Say your bakery gets 250 visitors every day. You sell a lot of pies. Life is good. At the same rates we're talking here, you're turning away a wheelchair user three or four times a week. Or even a couple per day, depending which number I picked. But you're not just saying, "sorry, we can't fit your chair through the door, can I bring you something out?", you're blanking them and talking to other people in the queue. You're saying you don't want them in your shop.
The question I'd put to a lot of designers/developers is, "why did you design this to exclude people?"
100% all of this. Doubly so if your website offers a crucial service that could ever be important to anyone in a time of need who does not have access to high-powered devices (utilities, phone service providers, hospitals and clinics, emergency services, etc.)
Seriously, amazing article.
I personally try to make websites work without JS for 2 reasons:
Because, if you can, why not? Firstly, it's a fun challenge. Secondly, it's not necessarily challenging - but definitely requires you to engage at least a few grey cells.
When you build something in an environment-independent or server-side-rendered way, it usually leads to a lot of benefits, such as testability and better architecture, and, hence, better overall development and maintenance experience.
Very nice roundup!
Relying on JS for web development is both a business and technological decision, and one that has trade-off implications like anything else in IT.
There is nothing inherently good or bad about using/not using JS. In my experience, these decisions are often based on budget limitations, rather than immaterial considerations.
Of course, I think we as developers should never exclude anyone from using our products. But then, catering to 1% of your visitors might incur a substantial cost on development (say 20%, and that is not much). At this point most clients tend to say: No, thanks, ditch those 1%.
Do I like that? No, of course not. But those are the tradeoffs we sometimes have to deal with. It's a sad reality.
Yes, but it’s much easier to use an extension that toggles it for you and remembers your preferences for different web sites. As far as I know Firefox and Safari only have on and off, and you have to navigate to the settings page to do that.
Ah yes, indeed
"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.
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.
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 on
Here's a site built with
It works completely fine without
Their contact form doesn't work — but it doesn't appear either, it shows their email and social media instead.
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.
Serious question: What do you recommend for js apps? Do you stick a bunch of stuff between noscript tags? Do you steer clear of js apps entirely and stick with server-side rendered content? With the prevelance of React, Angular, and Vue there doesn't seem to be a clean way to accommodate both users of "webapps" and those who choose to go without js completely. Is it all one way or the other?
Depending on the app, the first thing you can do is server-side render it with
vue. That way at least the static content of the pages is rendered and all the links still work. You can host a server-side only version of Next.js on Netlify (i think).
<noscript>tag explaining what's happened.
That's my guess anyway, I'm only just starting to learn about this stuff.
I appreciate your detailed response. It's clear from your article and your responses that you've put quite a bit of thought into this topic. I have mixed feelings about it to be honest. On one hand I love the power and capabilities of js and on the other I hate how reliant the web has become on it in recent years. Plus the potential for privacy violation it brings is a huge downside too. I get why many in the FOSS realm hate it.
I'm glad you brought this topic up. It's good to regularly question conventions and expectations otherwise we all fall into the trap of "we do things this way because this is how we do things". It's something I see a lot of in many aspects of life and I hate it.
If you want to give
Lynxa go, and you're on
macOShead to your terminal (make sure you've already installed homebrew)
It's an interesting experience.
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 html
can 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 native
htmlforms 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.
js. But, if you try to access a sheet with
jsswitched off, you still get to see a static version of the document.
thanks for the clarification
In addition, you can read the following:
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
I guess there's a slight caveat here though.
But, I definitely agree with the sentiment. And it's often forgotten how far native controls and a bit of styling can take you 💯
You convinced me. Fortunately, my personal website works almost fine without JS, there's still some work to do. Thank you for the article!
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.