Web Design Starts with Digital Accessibility | Captain Coder

Good Web Design Starts with Digital Accessibility

Marisa VanSkiver / January 24, 2023

woman using her laptop to talk with someone with sign language

A few months ago, a friend tagged me in a post requesting website professionals to be interviewed for a live show.

I responded back to the author and noted that my favorite thing to talk about in those opportunities was digital accessibility.

He messaged back to politely say that they were “focused on more standard web design topics and not something that niche.”

Niche?

Making an accessible website for everyone to use is niche?

I’m about to go on a rant today, but all web design should start with digital accessibility.

What is Digital Accessibility?

When was the last time you thought about whether or not everyone could use your website? I’m not talking about just on different devices – like a phone or laptop – but those who have different abilities. Visual and hearing impairments, even epilepsy and arthritis, can change how someone interacts with the internet. Providing literally everyone a good experience is called digital accessibility.

There are a lot of things that go into an accessible website and that can get overwhelming for a lot of business owners, especially.

When I hear people talking about accessibility anymore, I often hear them mention the potential ADA lawsuits they could face if the website wasn’t accessible.

But for me, the legal side of accessibility is only a small part of it.

Most importantly is providing a good experience for everyone. Otherwise, you’re cutting off a potentially large section of your customer base.

Accessibility in Real Life

What made me think about all of this recently?

Well one, I’m pretty much always thinking about accessibility and trying to learn more (because believe me, I often feel like my own knowledge barely scratches the surface), but there was a big upset at the Sundance Film Festival just a few days ago because of a lack of accessibility.

Marlee Matlin – the acclaimed deaf actress – is one of the jurors for the festival this year. When trying to watch the new film Magazine Dreams, she and the other jurors walked out because they failed to provide her with closed captioning for the film.

I’ve seen a lot of arguments that filmmakers feel that burned-in captions (the ones you see directly on the screen), will either ruin the experience or the might want to re-cut the movie too close to the event.

But here’s the thing – they excluded someone from their movie and created a press whirlwind because they wanted to use a more discreet device that didn’t end up working.

Accessibility – digital and otherwise – isn’t about avoiding lawsuits. It’s about inclusivity.

How Digital Accessibility Affects Design

OK, so what does this all have to do with website design?

Well, simply, everything.

Had that filmmaker been thinking about accessibility from the beginning, they wouldn’t have run into that issue and overshadowed the great reviews for their film.

It’s the same thing with web design.

There are a lot of elements within your design that can unintentionally exclude people from your content.

While this is certainly not an inclusive list (because honestly, you can go down a rabbit hole with all of this), it is something you can control even if you’re using a DIY website tool.

1. Be Mindful of Font Color Choices

One of the biggest mistakes I see on websites (and even on social media posts) is having a font that is too light to read on the background on which it resides.

Think a light green on top of a pastel pink.

You might think “No one would do that!” but I assure you, I’ve seen it. Recently.

When you don’t have a high enough contrast between the font color and the background its on, those with visual impairments and especially color blindness might not be able to read your text.

When you’re choosing your color combinations in any design, you need to first check them with a tool like WebAim’s free Contrast Checker and make sure that you get a literal green light.

2. Don’t Just Use Color as a Navigational Tool

Speaking of color, you don’t want to make important navigational links distinguishable only by color. Not everyone will be able to see that distinction (and it can just be difficult to understand).

Instead, focus on using styled buttons where possible to make internal links stand out and be super clear.

3. Avoid A Lot of Animation

Anyone who’s worked with me as a developer knows that I hate animation. It’s not fun to code, but it really just slows down your website and honestly isn’t great for user experience either.

But it’s also often not accessible.

A bit ago, I caught an eye-opening discussion online from a young woman with epilepsy who cautioned web designers that animations can literally be triggering for her.

While the Web Content Accessibility Guidelines (WCAG) say largely that animations that are not accessible have to last over 5 seconds, there are plenty that last longer than you think. Slideshows, animated backgrounds, or animating illustrations for instance. You need to provide a way for users to be able to pause, stop, or hide the animation.

You also need to avoid anything that flashes a lot – think 3 times a second – in order to stay compliant.

And I know that this all sounds pretty technical. The best way to avoid causing issues? Keep your animations to a minimum, keep them smooth but quick, and have them actually add something to the design (like bringing attention to a block). Not just for “fun.”

4. Keep Text Out of Images

I see this a lot, especially with DIY websites. You can’t figure out how to get the look you want with your theme builder, so you create a nice graphic in Canva and throw up that image.

While that might solve your visual problem, it’s caused a few that didn’t need to happen.

For one, Google doesn’t give you any credit for that content because it’s in an image that it cannot “read.”

For two, those who are visually impaired cannot read that text because a screen reader is actually reading the internet to them. Like Google, that screen reader cannot read an image.

If you absolutely “must” have text in an image (still a no no but it happens), then make sure that you include what’s written in the image within the ALT tag. That way, Google and screen readers are able to know and convey that information.

It’s still not a great experience, but it’s certainly better than not.

5. Provide Captions and Transcripts for Any Audio/Video Content

If you’re reading this, you’re reading basically everything that I say in the attached podcast. But you can also get a podcast transcript through the RSS feeds because I upload those transcripts to Buzzsprout where I host my podcast.

Any video that I create – whether it’s on my website, YouTube, or even social media – has closed captions in the video.

I use a simple tool called Rev.com to create automated transcriptions that give me pretty accurate results (that I can edit) and gives me a file I can upload to YouTube, Buzzsprout, or wherever.

That’s because I know not everyone can hear my content, so I want to ensure they can still interact with it.

It’s not just that, though. Captions help others to understand and process the information being presented better, and some of my readers may like reading the transcript along as they listen.

Being Accessible Digitally Starts at the Beginning

You can certainly make some of these tweaks after you’ve built a website or further down the road, but the best way to engage with your entire community (and save a ton of time and money) is to do this from the very beginning.

It’s one reason that we include Accessibility planning within every website we build.

Before you plan out that website re-do or post that next social media graphic, take a few minutes and make sure that it’s accessible for everyone.

Not only will you be more inclusive, but honestly, you’ll also protect yourself legally.

Join the Conversation!

Ready to grow your business online?

Stop guessing and start following the strategies that work.

Book a Clarity Call