Digital Accessibility & Usability / A Visual Overhaul

Nearly every industry these days has an online element – in some cases, it’s the predominant channel. And that’s great – if you don’t have any accessibility requirements. 

But as more and more of the world moves online, we need to consider the wider needs that different people may have. For example, we already make it as easy as possible for people to change a website or app’s displayed language – often in just 1-2 clicks – so why don’t we do the same for other needs, too? 

Here, we want to talk about: 

  • Visibility challenges and how to solve them 
  • The technology to enable accessible web design as effectively as possible 
  • How to test your new web accessibility 

In later posts, we’ll take this even further with: 

  • Customer Support 
  • Post-Sales Operations (Logistics and Returns) 
  • Additional challenges that can impact a potential customer’s ability to use your service 

A Digital Experience for All 

It should go without saying, but inclusion is our goal here. And from a business sense, it’s a very logical one, too! Many people around the world have various accessibility or usability requirements, and yet most websites fail to meet them. Adapting your digital presence to cater to everyone opens up your target audience and improves the digital customer experience for all. 

This need for greater internet accessibility is true for any industry. We can talk about the e-commerce context for days, but web portals and other account-based services also need to implement this. After all, everyone needs to be able to log into their bank, right? In fact, in many parts of the world, accessible web design is a legal requirement for public entities. 

In these cases, providing a specialized experience will greatly enhance the personalization level of your service. 

Visual 

When it comes to the visual representation of your business, we need to adapt to a wide range of visual impairments: 

  • People with color blindness, for example, will have difficulty to contrasting two sets of colors apart. Typically, this is red-green or blue-yellow, all with varying degrees, while some are monochromatic – meaning they see no color at all. This impacts 1 in 12 men and factoring in women (1 in 200) as well, there are around 300 million color blind people afflicted.  
  • Similarly, people with poor eyesight (such as the growing segment of senior shoppers) will struggle with small text and details. 
  • Also – we’ve said it before and we’ve said it again – we need to adapt the experience to every device in a multiexperience way. After all, what’s visible on a website might not work on a smartphone. 

For more information in this area, we recommend researching the Web Content Accessibility Guidelines (the current standard is WCAG 2.1), from the W3C organization. This is global standard is often referenced for accessible web design. 

There are many tools online that can demonstrate the first point clearly. For example, we’ll use our own website. Here’s how it should look: 

And here’s how it looks for someone with deuteranomaly (red-green blindness) for example: 

*okay, we understand that if you have color blindness, we just showed you the same image twice. Sorry about that! 

So, What Can We Do? 

The biggest and easiest way to adapt the frontend for everyone – aside from implementing accessible web design in the default view – is to add a high contrast mode.  

We previously spoke about Design Systems and such a headless approach will be essential here. With this, we can create an alternative view, loading the same page but using assets from a secondary library – one that specifically contains color choices and designs to ensure maximum accessibility. 

Why a Design System, specifically? Because we want to be able to roll out changes automatically, ensure any new pages are already in both styles and otherwise ensure no rock is left unturned – all while maximizing staff efficiency as much as possible

Of course, depending on your design, it might not be such a walk in the park. What if buttons are too small, for example, for everyone to see? In this case, we need to go a little further back to Atomic Design: 

Here, we take the same atoms, and simply design molecules and organisms that are bigger. Sure, this might end up requiring different templates but, again, we’re doing the hard work now to save ourselves a lot of time in the future.  

It’s also worth noting this approach doesn’t impact wider content delivery, such as product information or general content. As we discussed previously on product pages, these are fed by different backend systems (such as PIM or CMS) but are still influenced visually by the Design System and frontend.

One more thing: red-green color blindness means typical yes/no colors (red for wrong, green for right) won’t work. Keep this in mind when designing input fields, visual feedback and other elements that might get overlooked when upgrading your site accessibility. 

Contrast is Everything 

When dealing with color blindness and other website accessibility issues, contrast is a significant factor in determining two things apart. When two colours of different hues have the same saturation and values, they look the same (or very very close in greyscale), so what might look very different for most people might be much more difficult to discern for those with visual impairments. 

The best practice here of course, is to avoid such issues entirely. For example, here’s our home page again, but this time in greyscale – as seen by someone with achromatopsia

But failing that, it an essential factor for any alternative visual modes. If in doubt, there are numerous plugins to help identify areas of low contract – such as the Web Accessibility Evaluation Tool

How Do We Know it Worked? 

We previously spoke about some vital e-commerce statistics and that included a few web-generic factors too, such as bounce rates etc. So, touching on this topic a little more deeply, there are some easy metrics we can use: 

  • If we have a dedicated vision-impaired mode, we can track how often it is used. That’s a very clear indicator. 
  • This can then be supported with general traffic and activity markers. Are people using this feature spending more time on the website or in the portal? Do we see more features being used now they are accessible?  
  • It’ll also help us see which areas still need to be improved. We don’t always get it right on the first try. Remember: test, analyse, repeat. 
  • We can also see if this correlates to a decrease in bounce rates and other negative factors. 
  • Finally, we can also add a pop-up or questionnaire to simply ask people to rate/review the efforts. 

On a final note, it’s worth pointing out that inclusivity shouldn’t be weighed as an actionable choice. Just as we ensure our physical offices and stores are accessible, so too should we treat our digital operations the same way.  

Adapting to the needs of both existing and potential customers should be an obvious inclusion in any digital strategy – not something to react to when competitors make the first leap forward. We hope the suggestions and advice here simply show that it doesn’t need to involve ground-breaking new technology, but a few considerate choices with your existing architecture. 

Our Experts
/ Knowledge Shared

Czego nauczyła nas luka log4j2?
23.12.2021

What We All Learned From Log4J2

Cloud Infrastructure

On Thursday, December 9, a few minutes before midnight, information regarding a serious vulnerability in the Log4J2 library hit the IT world. The preliminary information announced in the subsequent morning drew a very bleak picture. The attack vector itself is similar to the ‘format string’ (specific for C applications) popular in the 90s and...

12.10.2021

A Single Source of Truth / A Key Way To Eliminate Technical Debt

E-Commerce

Repetition, inaccuracy and inconsistencies are issues every business wants to avoid. They’re also typical signs of poorly chosen – or poorly used – technologies. When used right, good technology can eliminate unnecessary repetition, ensure greater consistency and generally improve results over all. At the core of this is often the concept of “A...

05.10.2021

Personalization in E-Commerce / The Basics

E-Commerce

When talking face to face, personalization often happens at unconscious level. Interacts are smooth, adapted on the fly to suit the customer’s needs. Shop assistants can guide people to where they need to be and, when it comes to homing in on exactly what someone wants, it’s the fundamental secret to any good salesperson. But online? We must adapt....

Expert Knowledge
For Your Business

As you can see, we've gained a lot of knowledge over the years - and we love to share! Let's talk about how we can help you.

Contact us

<dialogue.opened>