3 Reasons Why Accessible Web Design is Just Good Design

3 Reasons Why Accessible Web Design is Just Good Design

The world of work has changed. The shift to remote and hybrid work options has seen an increased need to consider accessibility in the workplace. But we also need to take into account how the move to digital-first has affected clients and consumers. Ensuring everyone and anyone can engage with your company on their terms is essential — and that’s where accessible web design is vital. 

Your website is no longer an optional part of your media output. For many businesses, their website is now the main method by which users interact with them — if it wasn’t already. Comparing January 2021 to January 2020, there has been an increase in online transactions by 39.7 percent. Even as we move back to a new normal, online interactions — whether social, or financial — are swiftly becoming the default. 

Companies can no longer afford to ignore web design as an integral step in their business strategy. While you may have focused your current development efforts on ranking better with search engines, or boosting conversions, accessibility has to be a central consideration too. No-one should face a barrier to access. 

Fundamentally, accessible web design is just good web design. But how do we define what is and isn’t accessible?

Accessibility is about acknowledging that users may need to take different paths to achieve the same end goal. And we need to take care of paving all of those paths, making it an enjoyable journey for all users. We firmly believe that work should work for all people and we see accessibility as a key enabler of this.

Anne-Sofie Nielsen, CTO, Peakon

Defining accessible web design

Web accessibility is normally measured against the Web Content Accessibility Guidelines (WCAG). Though there are many factors at play, there are four main overarching sections to consider:  Perceivable, Operable, Understandable, and Robust. 

Each of these is important, and each feeds into the workings of the others. If you look at the reference guide for WCAG, you’ll see that each also contains many further categories, but it’s these four central principles of accessibility that should define your strategy. 

The four principles of web accessibility

Rather than give our own definitions, we’re defining these principles exactly the same as the WCAG. That sort of standardisation is essential for consistency and compatibility in accessible web design across different websites.

  1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
    • This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses).
  2. Operable: User interface components and navigation must be operable.
    • This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform).
  3. Understandable: Information and the operation of user interface must be understandable.
    • This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).
  4. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
    • This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

Each of these categories is ultimately quite simple. In essence, the content on your website should:

  • Be legible through a variety of different human senses (perceivable)
  • Be usable through multiple input methods (operable)
  • Be easily interpreted (understandable)
  • Be accessible using a variety of different technologies designed to aid accessibility (robust)

That last of the four principles of accessible web design, robust, also involves adapting to the landscape of assistive technologies as they evolve. But you can’t evolve if you haven’t got the building blocks in place — so where should you start?

The web is built with the idea that anyone can contribute, and so it’s very forgiving. That means that it’s quite common that people write websites that work, but are poorly coded for accessibility. The problem is that it’s not as common that people put the effort in to make it accessible — because that requires time. It is difficult. And that’s why it needs more attention.

Albert Fernández, Senior Frontend Engineer, Peakon

3 tips for creating accessible websites

As we said earlier, accessible web design is just good web design. By creating an accessible website, you ensure it functions smoothly and swiftly for every user, allowing them to operate it as they see fit. Even better, it gives you a new lens to view your site through in order to see what’s working and what’s extraneous. 

However, simply stating that accessible web design is “good” web design isn’t particularly helpful from a practical standpoint. That’s why we’ve curated 3 key tips to help you get your web accessibility project started — or optimise your existing efforts. 

To better illustrate each example, I spoke with Albert Fernández, Senior Frontend Engineer at Peakon. In his own words, “I joined almost four years ago, and I think I’ve been involved in every accessibility effort that we’ve done.” Through his eyes, you’ll get a better insight into what it means to tackle accessibility from the ground up. 

1. Take accountability for your current accessibility

Whether you’ve never had an explicit reason to consider accessibility, or you’ve already baked it into your web development strategy, you still have to scrutinise your current processes. Depending on the size of your business, there are several options for this:

  • Perform an internal assessment against the WCAG standards
  • Use automated tools designed to assess WCAG compliance
  • Undertake an external audit from a third party company 
  • Survey your staff for some further perspectives

In an ideal world, you’d use all four of these methods at different points. Forward progress with accessible web design involves recognising failings. You may have considered how users navigate the main menu using screen readers, but have you considered how they read notifications, or whether your images have a consistent titling system for their alt text fields? Taking accountability means considering the full experience of everyone using your website: 

The person we brought in to run the workshop was blind. It was very enlightening for us. It was a painful experience to see how much he struggled with the Peakon site, but that helped us also realise how important this is. It’s not that we didn’t know, it’s just at that point it was not as high on our priority list as it should have been. We made sure it was after.

Albert Fernández, Peakon

2. Don’t limit the scope of accessible web design

You may find, in some examples, that hitting the WCAG standard doesn’t mean the page has been made truly accessible. Don’t implement a change solely based on hitting criteria — first, assess whether it’s user friendly. For a start, try the following tasks:

  • Navigate to and fill out your contact form with a screen reader
  • Using keyboard controls, navigate between four distinct pages
  • Find and listen to a long-form piece of written content with the screen reader

Were those tasks easy to perform? And, more importantly, did they feel efficient? 

Peakon survey questions

The Peakon survey is a good example of rethinking accessible web design. As you can see above, our language selection tool is in the top left corner of the page, ensuring that you can always adjust the language, even as you navigate between survey pages. For visual users, it’s barely noticeable.

However, due to the tool’s position, users with screen readers would have to hear the currently selected language before each and every survey question — in the words of Albert, “That’s super annoying.” Fortunately, the team found a straightforward solution:

Being read aloud is a requirement for the WCAG standard, right? It doesn’t say that it shouldn’t be read aloud on every page. What we did is simple — it’s still visually represented at the top, but it’s now positioned at the end of the page for screen readers, so that it won’t be read aloud after every page, but you can still navigate to it.

Albert Fernández, Peakon

3. Take a different route to the same goal

There’s another takeaway from the above example — making a website accessible for all doesn’t mean making it the same for everyone. Instead, accessible web design means making the same shared goal reachable with the same ease, even if the route getting there is wildly different.

With the results of your audit in mind — whether internal or external — consider if your fixes are the best solution, or if you’re too focused on making the experience between users run parallel. Here are some key areas to take into account for your own accessible web design:

  • Are the alt text descriptions for your images appropriate?
  • Is there a high contrast between your foreground and background for legibility?
  • Do icons (e.g. notification tabs) need describing for screen readers?
  • What videos do you have? Do they require audio descriptions?

The WCAG states that you need to be able to complete all of the actions that a person that is able can. It doesn’t necessarily need to be in the same way, but it should be in the same context. I shouldn’t have to do three or four more things in order to complete the same action.

Albert Fernández, Peakon

A good example of the need to tackle content from two different angles is data visualisation. The Peakon manager’s dashboard has to give managers an easy way to process significant amounts of information. Normally, this data is displayed in a graph. But, as Albert points out, “Some of the graphs require you to move the mouse to a specific point in time to see that value. So how do you do that with a keyboard?”

The solution here is fairly direct. Rather than a graph, you can use a table. Each piece of data is displayed next to the exact date, rather than requiring a user to scan over the graph with a mouse. It may seem less visually appealing, but to a keyboard user it’s far more intuitive. 

Plan for the future, now 

By deconstructing your website down to this level, you’ll be left with an website that’s inherently adaptable. As new assistive technologies emerge, accessible web design ensures that you’re at the forefront of that development. 

Not only that, it also means you’ve developed your website with care and forethought. That style of web development benefits everyone, something Albert is keen to point out:

“The fact that you make a website accessible means that the power users — a person that knows all the keyboard shortcuts and so on — then they can use it as well to their full power. It’s good for everyone that the website is accessible.”

Albert Fernández, Peakon

Web accessibility is about everyone engaging together on an equal playing field. That level of inclusivity should be at the cornerstone of any progressive company. Click here to find out how our employee engagement platform can promote inclusivity within your workforce, today.