I’ve always been a big proponent of playing games as a team-building exercise. Gaming, be it video games or board games, is a social activity that fosters important skills like communication and decision-making.
With the pandemic, we took our board gaming to the web. There are hundreds of virtual tabletops out there, from rather simple browser-based apps to a literal 3D simulation of a table. We wanted to try a JavaScript table that had garnered a lot of attention over the last couple of years.
At first, it was a dream, it had everything a geeky team could hope for. But then, one of our teammates from another region (let’s call him James) tried to join. For some reason, the web app refused to work on his end. He had to reload multiple times just to get an image to show.
After a lot of experimenting, we realized that the problem was that James’ connection was spotty. Even the slightest packet loss was causing all manners of issues with the web app. So in the end, we had to give the game a pass, even if it was the perfect service for us.
It doesn’t matter how state-of-the-art our product or service is— if it can’t reach your user base, then you’re losing business opportunities.
More Than One Type of User
So, what do our gaming woes have to do with CSS?
The median for desktop and mobile web pages today is somewhere around 1.9MB and 2MB. That’s a 40% increase when compared to 2017. This is a trend that’s going to keep growing, as web pages get more sophisticated and packed with features.
That might not seem like a lot for someone with a 100Mbps connection. But for people who are struggling with data caps, slow internet speeds, mobile networks, or unstable connections, it’s a growing issue.
Imagine that a user has a 1GB data cap per month, which means that on average, that user can visit 500 different web pages before they hit their data cap. That’s a worst-case scenario considering that almost every browser in existence uses some form of cache to save data.
Now, consider that most users also have a social media account: Facebook, Instagram, Tik Tok, even Twitter. Live feeds, streaming services, image-based websites, and dynamic content are costly in terms of data. Suddenly, that 1GB cap seems a lot less flexible.
The example, while extreme, poses a very real problem. In markets where the internet is unreliable, you are competing against colossuses like Facebook for bandwidth. At some point, the size of your content is going to become an issue when penetrating these markets.
Accessibility Is About Choice
Most web developers are well aware of this issue and design their web pages with data-saving in mind. Nevertheless, there is a limit to how much they can save before they have to sacrifice aesthetics and functionality.
The alternative isn’t austerity, nor returning to the web design paradigms of the 90s when dial-up was the reigning choice. The best alternative is to offer the user the possibility of choosing the kind of content they want to consume.
The prefers-reduced-data is a media query in CSS that has one of two possible values: “reduce” or “no-preference”. CSS is the language we use for styling the presentation of a document. It’s how we create colors, fonts, and even animations on web pages (although that usually involves JavaScript).
What the prefers-reduced-data query does is inform you what kind of experience the user wants. With that information, you can create 2 sets of stylings, one for high-data users and another for users who would rather have a lightweight experience.
What’s so powerful about this method is that you are giving the option to your users. They are the ones that get to choose what kind of experience they want to have with your product. This is empowerment at its best.
Developing for Accessibility
Accessibility is often associated with disabilities or impairments, and that’s a fundamental aspect of designing for accessibility, especially since people with disabilities are often marginalized.
But the concept goes beyond physical or psychological conditions. We need to think about the social sphere. As technology advances the gap between people is also widening. Many of us can download 2GB in the time it takes to grab a glass of water, while for others, that’s a couple of hours at least.
Sometimes, it can’t be avoided, but keep in mind that more processing power and more data usage means that you are actively dissuading people with limited resources from experiencing your product.
Going back to the prefers-reduced-data query, surely creating 2 versions of a project demands more development time, right? Not necessarily, at least not in the case of data usage. The simple solution is to build the lightweight version first, as that’s your default experience. Then expand on that core to add further aesthetics and functionality.
The end result is the product you envisioned, with the added perk of having a version that is accessible to people from other backgrounds.
Designing a web project with accessibility in mind goes beyond being data conscious. It’s about having a broad mindset, and understanding the difference between diverse people so that you can create products that are flexible enough to accommodate a large audience.
Two common mistakes I see from developers regarding accessibility:
- Over-reliance on external solutions: Most operating systems have their fair share of accessibility tools, but they aren’t perfect. A tool can’t hope to work in every scenario. As such, developers need to understand how these tools work and accommodate their own projects to work in unison.
- Hiding accessibility options: Some developers create an amazing project with different accessibility options and then hide the dials away in a submenu or at the bottom of the web page. The end result is that the user has to play a game of hide-and-seek to find the options that were meant to make their life easier in the first place.
Why Do We Do This?
Why is accessibility so important? Well, first and foremost, culture is changing, and the world is slowly becoming a more conscious place. As we embrace diversity our technology is adapting to the demands of a world that no longer believes in one-size-fits-all solutions.
Secondly, because there are hundreds of latent markets out there waiting for solutions that fit their consumption behavior. As you grow, so does your audience, that’s why streaming companies like Netflix are betting on markets like Latin America: They are hoping to expand from the traditional and highly competitive markets of the USA and Europe.
Developing for accessibility is developing for the future.
