Make Your Website Accessible from the Get-Go | Captain Coder

Make Your Website Accessible from the Get-Go: A Guide to Web Accessibility

Marisa VanSkiver / April 11, 2023

woman using screen reader device to navigate the web

I bet that you take your own ability to surf the web for granted. It’s not as easy for everyone. In fact, doing something as simple as filling out an application or shopping for that new gear can be a huge challenge to someone with certain disabilities. When the websites we use aren’t designed with accessibility in mind, it creates hurdles for many individuals.

Web accessibility basically means that we design and build websites so that everyone can access and navigate them, no matter what their abilities are.

Not only is providing an accessible website to your customers just the right thing to do, but it’s also required by law in many countries.

Why aren’t all websites accessible if it’s required by law? Well, the short answer is that building a website to be accessible can require a bit more time, a somewhat unique skill set, and can require a bit of an investment.

But the best way to do web accessibility right is to prioritize it from the beginning.

In today’s episode, we’ll chat about not only why web accessibility matters, but how you can set yourself up for success from the word go.

Why You Should Care About Web Accessibility

Have you ever given much thought to how someone else uses your website? What if they have a visual or hearing impairment? Or epilepsy? Or arthritis?

All of these can change how someone interacts with the internet and it can make it harder for them to get the same information out from your website. Ensuring that everyone – no matter their personal abilities – can use your website that’s called web accessibility.

The reality is that 25% of adults in the US have some sort of disability. Those same people control nearly $500 billion dollars worth of disposable income.

By cutting them out of your website, you’re not only excluding 25% of the US population alone, but you’re potentially excluding your dream client.

Protect Your Business from Lawsuits

Want the reason that gets most people’s attention? Protect your business from lawsuits and legal issues. In the United States and many other countries, your business can be sued for not being accessible online.

Does this happen to a lot of small business owners? Not so much, but it does happen. ADA lawsuits for web accessibility can be filed from any location in the US against a business that exists anywhere in the US. That means someone in Florida can sue your business in Colorado for ADA violations.

Web Accessibility Improves Your SEO

Here’s the really cool thing about Google. One, Google cares about their user and because they care about their user, they care about accessibility. But two, Google also browses the internet much like somebody who uses a screen reader browses the internet. They can’t visually see the images that you’re sharing online, but they can read the alt tags, the file names, and all of those things that you’re doing to tell somebody who can’t visually see what that image contains.

If you want to improve your search engine optimization, then when you follow web accessibility best practices, you’re actually going to get a bonus and be able to improve the SEO of your website.

Starting with Accessibility in Mind

If you’re listening now, it’s likely that you already have a website and you’ve been marketing for a while.

That’s totally fine!

With web accessibility, it’s never too late to improve and do better.

Shoot, I’ve been working in web accessibility for 10 years and I’m still learning new things every day.

But this next part is for those of you especially those who are thinking about re-doing your website, want to create a new digital product, or even potentially are thinking about launching a digital course.

Web accessibility should be at the top of your mind from the beginning.

Retroactive Web Accessibility Wastes Time and Money

A few weeks ago, I was guest lecturing for a friend’s digital marketing class about web accessibility. During that class, we had discussed the Metaverse and the accessible limitations within Facebook’s (I’m sorry, Meta’s) big money pit.

One of the students asked me what I would tell business owners or big companies like Meta to do differently when it comes to accessibility.

The short answer?

Start with it in mind.

Meta has poured reported billions of dollars into building out their Metaverse project and trying to get us to adopt it.

The problem? It’s not currently built to be very accessible to those who may have hearing or visual impairments. You quite literally can’t interact with it.

When they want to go back and allow that huge portion of the US population to actually be able to jump into the Metaverse, they’re going to have to spend billions more dollars to retrofit their technology to be inclusive.

How much would they have saved if they had just started with that thought in mind from the beginning?

You’ll Have to Pay for an Expert to “Fix” It

I get that hearing that Meta has to funnel in tons of money that you don’t have doesn’t really hit home.

But let’s talk about another business I’ve worked with.

Their website had been live for several years already. They had had an alert that they weren’t following web accessibility standards and could be at risk for targeted litigation.

After paying thousands to have their website built from the beginning, they now have to pay a couple more for us to fix it and make it more accessible.

One big problem? They didn’t want to make any design changes to the website but there were design elements that weren’t accessible. So they couldn’t even get everything taken care of without making significant changes to the overall design and color scheme (something they didn’t want to do).

The Right Way to Do Web Accessibility

How can you do this the right way and not waste a bunch of time, money, and create a headache for yourself?

Start thinking about how accessible your website is going to be from the very beginning.

When you plan your web design around web accessibility, you’re going to save yourself so much frustration. When you ensure that everyone can use your website as you’re building your website (or having an expert code it for you), you’re going to save yourself a ton of money and protect your business.

How to Make Your Website Accessible

If you already have a website and you do want to improve your accessibility (because you should want to), or if you’re thinking about upgrading your website soon, there are a few key things that go into making your website more accessible.

Sure, there are certain things that the individual coding the website should be doing, but these are all things that you can do to improve your website accessibility and probably do it without touching any code at all.

ALT Tags

Including ALT tags or alternative tags on your images is one of the easiest ways to have a significant impact on website accessibility. You need to provide a description of what’s in each image you upload to the internet through the ALT tag. This information can be entered in a designated space on platforms such as WordPress.

How should you write an ALT tag?

For example, if you upload a picture of yourself, the ALT tag could be something as simple as “Jane Smith sitting in front of a brick wall with her hand under her chin.”

The purpose of the ALT tag is to provide sufficient information for those using screen readers to understand the context of the graphics on your website. Without an ALT tag, the file name will be read instead. As a backup anyway, you should make sure your image file names use descriptive words with dashes between them. This allows a screen reader (and Google) to read the individual words in the file name and return a better result to the person surfing your website.

Video Captions and Audio Transcripts

One of the other low-hanging fruits when it comes to accessibility on websites and on social media are video captions and audio transcripts.

Utilizing captions on your videos for any kind of narration will make sure that everybody can access the information in that video.

Social media took a while to catch up to this, but you’re finally able to add captions on almost any social media platform. If you’re uploading videos to say Vimeo or YouTube, you’re able to utilize captions there, too.

If you want to create captions that are a little bit more accurate, but are still inexpensive, I personally use rev.com for their automated transcription.

For just audio on your website, make sure that you have a transcription option available, too. This allows you to reach those who can’t interact with your podcast in the traditional sense but still get value from it.

Color Contrasts

Our third one here is probably the one you have to think about the most ahead of doing something – color contrast. What the font color is on top of a background color matters a lot to someone who has low vision or color blindness.

While you’re designing you think that a certain color on this other color is going to look really nice. Run that through an accessibility tool first. I use WebAim’s contrast checker. The one color combination that we want initially always seems to come back as a fail.

What does that mean? It means your font color and background color do not have a high enough contrast so that everybody can read it. Do you want to prevent people from being able to read your copy on your website? Uh, I don’t think so.

Use WebAim’s tool before you start designing anything. Before you ever go into Canva and create a graphic for social media, check the hexcodes of the font color you plan to use on the background color you plan to use and make sure it’s legible.

What’s happening for a lot of people that I see, especially on social media, you’re uploading what you think are these great graphics, but nobody can actually read them.

Avoid Flashing Animations

One newer thing that we’re learning is that certain animations can actually trigger issues for those with epilepsy.

While you don’t have to avoid all animations, make sure that the ones you’re using on your website make sense for the context, are smooth, and don’t last longer than 3 seconds.

This might look like avoiding something that flashes across the screen really rapidly, avoiding scroll bars (or giving them the option to slow them down or even pause them), or using animations that come in gently.

There are lots of animation options with website builders out there, but just because it’s an option doesn’t mean that you should use them all.

Make PDFs Text Searchable

Another one that I see a lot of people making accessibility mistakes with is PDFs. You want to have a simple lead capture, so you create a PDF guide. But if you don’t take the extra steps to make that PDF accessible, you’re giving someone a document they may not actually be able to use.

Make it accessible by adding alt tags to images, jump links, and tags, as well as making the document text searchable. Adobe Acrobat has accessibility tools that enable you to do this quickly and easily.

Keep Things Easy and Consistent

Our last accessibility tip actually will make your life easier as you create content. Be consistent and keep things simple!

Especially on a website, when you’re keeping things simple, easy to understand, and consistent, nobody has to relearn how to interact with your website as they go. If a website is inconsistent, you’ll confuse people and they’re going to get lost.

You have to remember that not everybody has the same abilities that you do. Whether they’re dyslexic and it takes them longer to read something, they have a visual impairment and they’re using a screen reader, if they have to tab through things on a keyboard, or just not as tech-savvy, you need to design with them in mind.

Every time that you’re designing a new page on your website, it needs to stay consistent with every other page on your website. I’m not saying you copy the design exactly, but the layout should be similar and the buttons and the links should be the same to make it really simple for people to move through your website and to keep it accessible.

Bonus Tip: Avoid Special Social Media Fonts

You know those fonts that give you a cursive look or a different style to what Instagram offers? Those are called specialty fonts. Here’s the dirty accessibility secret about them. They are not read like regular text.

Instead, they get registered as emojis and are not consistent across all devices. This means that not everyone will see the same thing and using them can make your content inaccessible to those using screen readers. Stick to regular fonts to ensure everyone can access your content.

Be Inclusive with Web Accessibility

There are so many things that go into web accessibility that it can feel really overwhelming.

I get it.

The key here is that you want to focus on being as inclusive as possible with the content that you’re putting out into the world, including your website.

Only 0.02% of websites on the internet are fully accessible, but that doesn’t mean you can’t make some strides to improve your own and offer a better experience than many of your competitors.

If you want to learn more about web accessibility and how your website stacks up, you can throw it into WebAim’s WAVE tool. This free tool allows you to check each page of your website and makes suggestions of what you can change.

Don’t want to do that yourself or are you overwhelmed by the report? My team and I can help not only test your website and give you the action plan but perform the remediation to make your website more accessible with our website audit.

It’s time to invest in a good web experience for everyone.

Join the Conversation!

Ready to grow your business online?

Stop guessing and start following the strategies that work.

Book a Clarity Call