Web Accessibility Made Simple | Captain Coder

Web Accessibility Made Simple: 5 Easy Ways to Make Your Website Inclusive

Marisa VanSkiver / December 12, 2023

entrepreneur-creating-accessible-website

Can everyone – and I do mean everyone – use your website? When your website is accessible by anyone, no matter their abilities, then you’re creating a much more inclusive business.

What a lot of business owners don’t understand is that there are common website trends that make it harder for some individuals to use their websites.

That means you’re excluding a potentially huge chunk of your target audience – up to 27%. That’s the exact opposite of what you want to do right?

The good news is that having an accessible website is not only possible, it’s easy to make your website more accessible for everyone.

Let’s dive into 5 easy ways to make your website more inclusive.

1. Add ALT Descriptions to Images

This is the lowest-hanging fruit on our list today, but the first place anyone can start with web accessibility is by adding descriptions to your images. You do this through something called an ALT tag.

Within HTML, you have a space to describe what’s in the image so those who are exploring your website through a screen reader (usually those who are blind or have low vision issues) can get the context of the image on your pages.

You place this description in the ALT tag, or alternative text tag. A screen reader reads that description back to the user so they understand what its impact on the rest of the content is.

As a super simple example, take a headshot you’ve uploaded to your website. You can make the ALT description “Picture of Sally Smith sitting on a brown couch, folder her arms.” You want to keep this description short and to the point, but provide some context.

Now here’s the cool thing about ALT tags – Google can’t “see” your images either, so by adding a good ALT description, you’re also improving your SEO.

Most of what you do to improve your web accessibility has a positive impact on SEO.

How to Add ALT Text

You can easily add ALT descriptions to almost any website builder anymore. In WordPress, there’s a spot for ALT text right there when you upload an image to the media library. In Squarespace, you can add it either as the file name or through the image block, and ShowIt has a description box.

It’s a quick Google of “how do I add ALT text to a (blank) website” and there should be some help articles available for you to make it easy.

Don’t Put Text in an Image

If someone who has visual impairments can’t “see” your images, you might be wondering about that graphic you uploaded to your website with a lot of text in it.
Yea, don’t do that.

When you put text in images, you’re making it difficult for many people to be able to read and get the context of that information.

Anything important for your dream client to understand needs to be written in actual text, never in an image.

How do we make infographics accessible you may ask? Any large infographic you use should include a detailed description below with important information like statistics, findings, etc.

2. Make Links Clear

Our next item might require some time to go through the pages of your website, but you want any links on your website to be super clear.

When someone is looking at your website, is it obvious that they can click that thing?

Ask a friend if you’re too close to it.

We want people to dig through our website, look at our services pages, get to our contact page and fill out a form, or head to our blog.

We have to make this easy by making links super clear. Not only is this a great user experience, it also helps everyone no matter their abilities.

For action links – where you’re telling someone to Go Here and Do This – at the end of a block of text or section, make it a button. And then keep that button style consistent throughout your website.

This makes it so easy to know what they can click on and will help move them through your website and into actually working with you.

When you link a bit of text in a paragraph (or a text link), you need to make it a different color so that it stands out. On my website, my main font is black but my links are blue and bolded. You can add an underline (a very typical link indicator), and set it to have a different style when you hover over it so it’s even clearer that it’s something clickable.

Use Descriptive Link Text

Now, what text do you link? You don’t want to link Click Here (ugh) or even Learn More. That doesn’t say anything about what your dream client will get when they click that.

Instead, use descriptive link text. That can mean having a button that answers an implied question you asked in the text above, i.e. “Learn How,” or telling them what page they’ll go to, i.e. “See Our Services.”

In a text link, it should reference where they’ll go when they click like a reference to an article title or a relevant extract. Or, just link the most relevant part of the sentence that matches where they’ll end up.

Just please, no “click here.”

3. Color Contrast

Before you create any graphics or update your website, you need to think about color contrast. The combination of the font color 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 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.

White on a lighter blue, red on pink, yellow on pretty much anything – all color combos I see fail all the time.

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

Not only will checking your color contrasts help improve your website’s legibility, it can also extend to all of your marketing materials.

When I start working with clients, I create a color contrast guide. We test each color combination and list out which hexcodes work together. That way, we’re always choosing a safe combination that won’t affect the legibility of your all-too-important copy.

4. Simplify Copy

Speaking of that copy, you need to simplify it.

This is coming from an English major who loves to write and loves being creative, but all too often we’re creating content that not everyone can understand and connect with.

Beyond the accessibility of our words, your dream client likely doesn’t understand all of your technical jargon anyway and they want to be able to skim your website.

What does simplified website copy look like? It means shorter sentences and paragraphs, simple vocabulary, bulleted lists where applicable, and even bolded important sections of a paragraph.

All of those things will help your website copy be read faster and more easily by anyone who visits your website. You want to aim for a high school reading level and focus on the outcomes you’re providing your clients, not the steps you’re taking (they don’t care about the how anyway, just the what.

You can use online tools like Grammarly or Wordcounter.net to help you pare down your writing and make it more succinct.

Full disclosure, all of my blogs are improved through both. They help catch some of my overtly superfluous writing.

5. Captions & Transcripts

Got a podcast or upload YouTube videos? Put any of those on your website? You need to include alternative options so anyone can access that content.

If you’re creating videos with any kind of narration, you need to include captions so that everybody can access the information in that video.

Thankfully, this has become quite popular, so many platforms have automatic captions already built in. Instagram and TikTok offer you several options for captioning, you can use apps like Caption to make them more stylized, and YouTube adds captions automatically (though not always immediately after the video is loaded).

For longer-form videos, you can use a service like Rev.com to create captions that you can upload to YouTube or Vimeo. This is especially useful when you’re creating videos for lead magnets, online courses, or a welcome video for your website.

If you have just audio on your website, you’ll want to ensure that you have a transcription option available, too. My blogs are a basic transcription of many of my podcast episodes, for instance. This allows me to reach everyone and they can get value from my podcast even if they can’t listen to it.

Be Inclusive with Web Accessibility

It’s time to ensure that your website and the other content you’re putting out are as inclusive as possible.

As business owners, it’s so easy to get overwhelmed with everything that we need to know and do, but now that you know how to be more inclusive, it’s time to put it into practice.

Now before you get overwhelmed, just know that something like only 0.02% of websites on the internet are fully accessible. That doesn’t mean you can’t make some strides to improve your own and offer a better experience than many of your competitors.

Don’t want to do that yourself? My team and I can help not only test your website and give you the action plan but also 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