At Bluecap, we make it our mission to build web experiences for everyone. Are we perfect? Nope. Are we trying to be? Absolutely. This may seem a little obvious, but countless websites are floating around the web totally missing the mark.
Navigating the internet these days can be an endless slog of clicking to accept cookies, closing full-screen pop-ups, clicking away from mailing list modals, avoiding ads, and maybe, just maybe, you get to look at the content you’re trying to see.
It’s honestly exhausting. The internet was supposed to be a tool for good, but it seems like we stray further and further away from the ideals that it was founded on. So the question is, how do we get back on track?
The answer is accessibility. Let’s look at how to bring accessibility back to web design and why it matters so much to your users.
What is accessible web design?
As of 2020, there are 61 million US adults living with a disability, according to the CDC—and 10.8% of these people have serious difficulty concentrating, remembering, or making decisions as a result of cognition issues.
It’s hardly surprising, then, that ~2,350 website accessibility lawsuits were filed in federal and state courts in 2021. Actually, that is surprising, because it’s a seriously huge number and just goes to show why website accessibility is so important.
Accessible web design isn’t just about designing for disabilities, though—even if it is a key consideration. It's about making your digital experience inclusive for everyone, regardless of ability, context, or situation.
It’s not just your users that can benefit from better accessibility. Studies show that accessible websites have better search results too, as your improvements help improve SEO allowing your website to reach a bigger audience.
How to create accessible digital experiences
Honestly, it’s not difficult to make an accessible experience. Most of the troubles we experience with websites today are a side-effect of developers trying to cram as much as they possibly can into one web page.
We get it, we really do, you want to add the most possible value and keep your user engaged with flashy features and retention tactics. But have you considered simply… not doing all of that?
Focus on your most important content first and foremost. After all, that’s why people have come to your site in the first place.
Let’s look at some insider tricks to create an accessible digital experience that lets your content shine.
Contrast
Dark mode. The mysterious trend that swept the digital space. We see it everywhere, from operating systems to social media websites and it has become a real sticking point for users. In fact, Twitter was heavily criticized after it introduced a dark mode which users insisted wasn’t dark enough.
So why is dark mode so popular? Is it simply down to preference? Are we being taken over by a wave of gothic tech users?
The answer is much simpler. It’s easier to read using dark mode.
The World Health Organization (WHO) estimates that there are 217 million who have moderate to severe vision impairment. This means that developers must get the contrast between text and backgrounds right.
Dark mode is a very simple way of achieving that balance. Rather than overloading your eyes with bright white—and attempting to focus on small, dark text—dark mode flips the script. It allows your eyes to focus on the brighter text while subconsciously subtracting the dark background to increase readability.
Use more than just color
Color coding is great. It looks sleek, helps further the semiotic meaning behind things, and can separate elements in an aesthetically pleasing way. However, if you’ve been paying attention, then you’ll know there’s more to design than aesthetics.
The video game industry offers great examples of how color shouldn’t be the only defining factor in design. Huge titles such as the Assassin's Creed series, Battlefield, and Fortnite all offer accessibility options relating to colorblindness. Some of these games simply adjust the color output to help improve contrast, while others use shapes and patterns as well as color to help distinguish elements from another.
Alt text
Alt text is used to help visually impaired users understand what is going on within an image. It allows a screen reader or braille output device to relay what’s happening in the image to whoever is on the other side of the screen.
Alt text has finally made its way to social media sites, which is a great sign for the future. As more people use alt text on sites like Twitter and Instagram, the more likely it is that web developers are going to jump on the trend.
Use ARIA landmarks
Hold up now, ‘cause here’s where it gets a little techy.
The W3C Accessible Rich Internet Applications (ARIA) specification makes it possible to produce accessible interactive web applications. One easy entry into ARIA is landmark roles. Simply add an HTML attribute for one of the eight landmark roles (e.g., role="navigation", role="main") and users will be able to jump directly to that section of the page with a single keystroke.
Alternatively, use HTML semantic elements that map to ARIA roles—or partner with a digital design team who knows what all this techno mumbo-jumbo means.
Design usable focus states
Focus indicators are outlines that surround links, inputs, and buttons. They show up when you hit TAB and help people understand where they are when navigating your site.
Focus indicators are crucial for users with visual impairments who require screen readers to help them navigate the web, as the screen reader will read out what the keyboard is currently focused on.
Using TAB to navigate web pages is extremely helpful for those stuffing mobility issues, such as carpal tunnel. Also, some people just don’t like to use a mouse!
Some designers like to remove focus indicators altogether, as they can look a little clunky. However, you can design focus indicators to fit the aesthetic of your website, so just do that instead.
Label your forms!
Designers have gone to all kinds of lengths to make web forms less intimidating. One of the most popular tactics is to incorporate labeling into the webform itself with placeholder text indicating what information that box requires.
While this may look better, it’s terrible design practice. Placeholder text is normally gray (poor contrast) and disappears when you start typing, so if you’re forgetful (like me) you can get halfway through filling out a field and suddenly have no idea what the box is asking for.
Challenges of accessible web design
Making a website accessible can be hard. You have to work at it and not everyone is willing to say that to a client’s face.
Below are the challenges you might face. But don’t worry, with a great digital design partner and/or the fantastic web accessibility resources available online, you will succeed!
Teams that just don't care
Let’s not mince words here; many designers simply do not care about accessibility. They simply want to make the best-looking website and move on to the next. This is partly due to the implication that design teams are focused on aesthetics, but there’s a little more at play here.
The fact is, accessibility issues can be well hidden to those who don’t need to use them. So when we say teams don’t care, we don’t mean it maliciously. There’s just little focus being given to accessibility issues, allowing teams to stay blissfully ignorant.
Concentrating on one user's need over another's
One of the common mistakes people make when it comes to accessibility is that they become laser-focused on one group of people. Accessibility is about making things accessible for everyone, not just a singular demographic.
Extra workload
Making your site accessible may seem like a lot of work, but it doesn’t have to be.
Rather than building a website and then retrofitting some accessibility options, make accessibility the core of your design strategy. That way you can build amazing, accessible products that everyone will love, without the extra work!
Succeeding with web accessibility is all about finding strategists and developers who truly give a damn about building inclusive digital experiences. Select your partners wisely and everything else will fall into place.
