« See all

Accessibility, availability and Progressive Enhancement

Accessibility, availability and Progressive Enhancement

I like English because it often provides more words than Polish (my native language) to describe some things or phenomena. “Accessibility” and “availability” can be a good example. In Polish, there is one word with an ambiguous meaning: “dostępność”. If something is “dostępne”, it is either accessible or available. In English, there is a clear distinction between these two. And don’t even get me started about the Polish counterpart for “resilience”!

Why am I talking about some language stuff? Well, because being a native Polish speaker made me treat accessibility and availability as the same thing — or rather two sides of the same coin. And, in fact, it is a good thing, because these two terms are indeed strictly interconnected. Let’s dig into it!

# Availability – the first step

Your website must be available for anyone to view it. That is a rather obvious statement. However, what does “an available website” mean? In the most basic form, it could be interpreted as being created in a way that allows it to be viewed in a wide variety of browsers and devices. Going further down that path you can even risk saying “to be viewed in every browser on every device”, but that is probably not going to happen…

There are literally thousands of mobile phone models on the market right now and these numbers increase daily. It is impossible to test any website on every one of them and to ensure that it is, indeed, fully available.

And this is just phones! What about other devices? Tablets, notebooks, PCs with 4k displays, smart TVs, smartwatches, video game consoles, kiosks… I bet that some of you even have a fridge that can run web apps! Not to mention older devices like PlayStation Portable. There are so many of these that I probably cannot even imagine properly, yet they exist and to some extent people can use them to browse the Web.

So are we doomed and the “availability” of a web page or a web app is just a fever dream of the marketing team?

Well yes, but actually no (the meme)

Fortunately not. Some techniques allow creating projects that work nearly everywhere (nearly as you can never be 100% sure). The key is simplicity. The simpler the site is, the more available it would be. And by simple I do not mean deprived of features. I mean simple in how it is constructed.

The same principle applies to websites. If it is simple, it can work even on your microwave oven. If it is not, it can break in many more ways than you could probably think of. Of course, I do not mean to say that your web app using WebAssembly needs to run on my microwave oven or it should not use JavaScript (although it probably should not overuse it). But most of the Web is still concerned with delivering the content, not the experience — and for content, the simplest solutions are still the most bulletproof and efficient ones. Next time you want to use that new hippy JS framework to generate a blog post, look at how well Google is rendered on Lynx and ask yourself if a simpler solution will not be a better fit.

Google.com displayed on Lynx.
Google.com displayed on Lynx.

Of course, it seems so simple when looking at it from a distance. While some website designers browse on their macs and shiny new iPhones, using the wifi they paid for in their coffee bill, in reality, in the first half of 2021 Google Chrome holds a stable 65% of the market share, Safari follows with 19% with Microsoft Edge and Mozilla Firefox close behind these two with 3.5% each. The more obscure browsers still hold a stance at 15% of the market share. Formidable customer force, after all.

The mobiles sport a different share. Even though Chrome is almost untouched here with 63%, Safari goes up garnering almost 25%. The third force is Samsung with its built-in browser taking about 6%. Others are basically omittable at this point, but software like Opera or Puffin does exist and there are users that keep on using it, either due to their personal preference or due to unavoidable circumstances.

This also very much depends on the users’ operating system. Android is the king here with a 40% share and Windows follows with about 32%. Different versions of iOS sport over 16%. And this is where the devil hides. Windows 10 takes up 78% but the good, old, trustworthy Windows 7 still holds over 16% of the market! How about Android? Well, version 11 has been on the rise since last year and recently amounted to 12% while version 10 declined slightly to 40% after a sharp surge in 2020. And Pie is still at the level of 18% despite the constant decline in the number of users.

This is a catastrophic mess and there is no way to possibly satisfy an end-user base as diverse when you make assumptions, even the smallest ones, like the common belief that the third decade of the 21 century magically makes everyone an owner of a very fast internet connection. While this may be true for many users, some of us still involuntarily take the nostalgia trip down the analog modem speed lane and that is more often than we could expect. Realising this simple fact and considering it at the design stage is crucial, too.

# Accessibility – the main focus

Once your website is available, you can now make it accessible. And by accessible I mean catered to the needs of everyone. Accessibility is not only for people with disabilities. It is for everyone, Even You™. There are a lot of situations when you will not be able to operate a site the way you usually do, for example, a super sunny day would make the screen of your smartphone nearly unreadable and a broken arm could be a good reason to ditch using a mouse for quite some time. If you are not going to make your website accessible for others, then, well, do it for yourself!

And if you are not selfish enough, there is always the entire business side of it. According to WHO statistics, there are at least 2.2 billion people with some kind of vision impairment. Official US statistics show that over 12% of the whole population has some kind of disability. This is a really large base of potential customers that you miss simply by not making your website accessible. And we are talking about disabilities alone, not including the situational inabilities to fully operate the user’s device!

We have already posted some guides on making your site accessible as well as the commercial benefits of accessibility. We also have special tips on both checking your website and improving it. I am, therefore, not going to repeat that advice here. But I want to emphasize that everything should be accessible. In fact, I am pretty sure that designing websites with an accessibility-first approach can be beneficial. And it is not that different from the widely used mobile-first approach. They can even complement each other, as the accessibility-first approach is focused on the end-user of the site while the mobile-first approach — on the end-user’s device. Combining these two methods means thinking about the user and their environment as one, interconnected world.

# Progressive Enhancement – the how

And finally Progressive Enhancement — the big elephant in the room. But after you get to know it, you will realize that it isn’t scary at all. What is more — it is a really friendly and gentle giant that is eager to help you!

The elephant in the room

Progressive Enhancement is often referenced as the way to create accessible experiences. These two are in such a close relationship that some people treat them as one.

The main premise of Progressive Enhancement is creating a layered experience. It allows for delivering the best experience available for the given device. It is opposing the idea of the same site in every browser approach. If browser A supports some shiny new Web API, it will get a version of the site that uses it. If browser B is Lynx, it will get the HTML-only version. And that’s basically it…

The most basic form of Progressive Enhancement is based on having three layers: HTML, CSS, and JS. The HTML one is the most basic one, which will be delivered to every browser. Today, however, such an understanding of Progressive Enhancement is often too simplistic and suitable only for critical services (the ones that need to work in nearly every possible situation, like access to email). The more modern approach to it (which is still at least 10 years old) further divides the three basic layers into even more layers. For example, older browsers will get only basic JavaScript functionality, newer ones will get some more advanced features, and the latest ones — all the good stuff. In some web apps, the layers will not even start on the HTML level anymore as they do not make any sense without the JavaScript code (e.g. graphic editors). In such cases, layers can be connected with certain features (like enabling hardware acceleration in browsers with WebGPU support).

Thinking in the terms of layers makes creating both available and accessible sites a lot easier. If you are creating a website and put the whole content into semantic HTML, and then add some CSS and JS on top of that, you make sure that the site will be available in a wide range of browsers (even Lynx) and that it will be accessible by default (as semantic HTML is mostly accessible… unless you break it). In fact, you only need to deliver the content to the user — this is what they are looking for! Everything else (nice looks, dynamic behavior) is just an addon. Such thinking is liberating as you start to prioritize what’s really important.

# Availability and accessibility – the best friends

Availability and accessibility - the same thing.
Availability and accessibility - the same thing.

Your site cannot be accessible if it is not available. And if it is available, it will not be usable to the users unless it is accessible. These two terms are strictly interconnected and I would risk saying that they are describing the same thing. While availability is more technical and connected to the user’s browser, operating system and device, accessibility is all about the users themselves. It is a case similar to one of mobile-first and accessibility-first approaches.

So maybe the Polish language is not that wrong after all. Because for me personally “dostępność” will always be about both availability and accessibility.

This blog post is part of the Global Accessibility Awareness Day that we all celebrate on May 20 this year. The purpose of GAAD is to draw attention to accessibility problems and help designers and webmasters create better, more inclusive and user-oriented online environments. This approach will benefit both the users and content creators, as well as the business that stands behind online enterprises, by making their services and products more easily available for a larger group of consumers.

You can read more on the topic of Web Accessibility in our blog posts:

Share this post

Linkedin Reddit
CKEditor 4.16.1 with accessibility enhancements
How collaboration lets companies innovate more and do it better
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check