Categories

Graphic titled “5 Accessibility Mistakes That Are Costing You Clients—and how to fix them,” beside a dog wearing glasses and a gray towel on its head.

5 Accessibility Mistakes That Are Costing You Clients (And How to Fix Them)

If you’ve spent any time building your website, you’ve probably thought about how it looks. Maybe even how fast it loads. BUT…there’s a good chance you haven’t spent much time thinking about if everyone who lands on it can actually use it. That’s not a slam. It’s just something I’ve observed in my ten years of […]

If you’ve spent any time building your website, you’ve probably thought about how it looks. Maybe even how fast it loads.

BUT…there’s a good chance you haven’t spent much time thinking about if everyone who lands on it can actually use it.

That’s not a slam. It’s just something I’ve observed in my ten years of building websites. It’s not a priority for solopreneurs, creatives, small business owners, or anyone trying to run any kind of business when they’re stuck wearing a dozen hats and figuring shit out as they go. Digital accessibility (barrier-free design) doesn’t come up in the “launch a website” tutorial that you probably searched for on YouTube.

But it matters. And this is why: more than 1 in 4 adults in the U.S. reports living with a disability (CDC). That’s more than 70 MILLION people (CDC). 70 million potential opportunities you may be missing out on because they can’t maneuver around your website.

Not every one of those disabilities creates an online barrier, but a lot of them do. Cognitive disability is now the most commonly reported type, affecting roughly 14% of adults, followed by mobility, hearing and vision. Every one of those shows up in how someone reads your page, navigates your menu, fills out your form, or watches your video.

That’s not a niche audience. That’s a quarter of the people who could be hiring YOU, and if your site has barriers, they’re quietly clicking away to find one that doesn’t.

The good news? Most of these problems aren’t complicated to fix once you know what to look for. I wrote a whole book about this, but you don’t need it to fix what’s below. Here are five of the most common mistakes I see on small business websites, and what to do about each one.

 

Mistake #1: No Alt Text on Your Images

Alt text is the written description attached to an image. It is the thing a screen reader reads aloud when someone can’t see the image. If you’ve never added it, your images are essentially invisible to anyone using assistive technology.

Search engines read alt text (think SEO). AI bots read alt text. Jane Doe down by the lake on vacation trying to shop but has poor cell reception reads alt text to try to figure out what the picture is that won’t load.

Missing alt text means you’re leaving valuable information out for all users, including yourself and your business.

The Fix:

Add brief, descriptive, meaningful text to every image on your site that helps convey meaning. Background image just to make something look pretty? Doesn’t need alt text. The image of the widget you’re trying to sell does. If you have a decorative image and that doesn’t need alt text, you can mark it depending on what program you are using to build your website or add “” to the alt text box. That little bit of code tells screen readers and bots to skip the image because there’s nothing of value there.

You can learn more about alt text at the following posts: What is alt text? , How to write good alt text.

 

Mistake #2:  Color Contrast that Fails the Eye Test

If you’ve ever squinted at light gray text on a white background, you already understand color contrast. What you may not know is that there’s a measurable standard for it.

WCAG 2.1 and 2.2 both require a contrast ratio of at least 4.5:1 for normal text at Level AA. I know, that sounds like technical mumbo jumbo, and technically it is. But it’s important to understand it so you know what to look for when using the free tools to correct it. Basically, it means that your text needs to be distinct enough from the background that people can read it comfortably. That includes folks with low vision, color blindness, and anyone reading on a screen in bright sunlight.

The Fix:

Run your brand colors, or the colors you want to use on your website for background and text, through a free contrast checker like WebAIM’s Contrast Checker or Adobe Color (my personal fav is Adobe Color). You use the hex codes (the six digits after a # ) for the color to check if the contrast is enough. You can use sliders to adjust the contrast.

You can learn more about color contrst at the following posts: What is Website Accessibility? , The Barrier-Free Design Workflow

 

Mistake #3:  Video with No Captions

Captions aren’t just for deaf and hard-of-hearing viewers. In a 2019 study of more 5,616 U.S. consumers, Verizon Media & Publicis Media found that 69% watch video with the sound off in public places. 80% said they’re more likely to finish a video when captions are available. I watch videos while laying in bed next to my sleeping hubby. If there’s no captions, I don’t watch because I don’t want to wake him up.

Read that second number again. Captions don’t just remove a barrier, they keep people watching.

The Fix:

Most video platforms now generate automatic captions. This is a great start, but they’re rarely 100% perfectly accurate. They ALWAYS misspell my name, for example. YouTube’s auto-captions are pretty decent. But they need to be reviewed and edited. Especially for things like proper nouns, technical terms, acronyms, or anything industry-specific. For Instagram Reels or TikTok, you can use the built-in caption feature or a separate video editing tool. Pay attention though, because IG edits, for example, won’t produce captions for anything longer than 90 seconds. If your video is on YouTube, you can try using Google Gemini to help generate accurate captions based on the transcript. It can use the YouTube link to pull the transcript to assist with caption generation. You still need to check and verify that everything is as it should be.

You can learn more about captions at the following posts:  How to use AI Tools to Create Transcripts & Captions , What AI Can and Can’t Do for Accessibility ,

 

Mistake #4:  Forms Your Users Can’t Actually Use

Contact forms, opt-in forms, checkout forms – you get the idea. These are often where a potential client/customer goes from interested to converted…or not. They’re also one of the most common places accessibility breaks down.

The usual problems: fields with no visible labels (placeholder text – the text in the form itself that says “your first name goes here” – doesn’t count), no clear error messages when something goes wrong, and interactions that only work with a mouse. Someone using a keyboard to navigate your site needs to tab through your form fields in a logical order and know exactly what each field is asking. That logical order bit is another area that can cause barriers, but we’ll take a look at that later.

The Fix:

Make sure every form field has a visible, description label above or beside it. Add clear error messages that explain what went wrong and how to fix it. Test your site using only your keyboard. If you can’t get through it, get stuck, or have no idea where the focus is, then your users may not either.

This fix can be a little more technical. Don’t be afraid to use the “help” function on whatever website builder you might be using, or reach out to technical support. If your tech support is too stuffy and you need someone who can break it down into simple and easy to understand steps, check out the Barrier-Free Collective.

You can learn more about forms and the barrier-free collective at the following posts:  AI Can Build Your Website, But It Can’t Remove Every BarrierThe Business Case for Web Accessibility: Addressing the Needs of Seniors and the Aging Population , Barrier-Free Collective

 

Mistake #5:  PDFs and Documents a Screen Reader Can’t Read

This is a big one and catches a lot of folks off guard – yours truly included. If you offer a downloadable resource; a freebie, lead magnet, guide, contract template, etc; the format matters as much as the content.

A scanned PDF is basically just an image of a document. Screen readers can’t read it, neither can search engines. An untagged PDF – even one that looks perfectly formatted – may read in a completely wrong order, skip images that matter or present text as a bunch of jumbled nonsense to someone using assistive technology.

The Fix:

If you’re creating PDFs from scratch, make sure you are using a program that supports accessibility tagging. Microsoft Word and Adobe InDesign both do, for example. Run your existing PDF’s through Adobe Acrobat’s accessibility checker to see where they stand. For anything heavily used like a core resource or lead magnet, it’s worth the extra time to make sure it’s right.

This is one area where bringing in someone who is a digital accessibility specialist and knows what they’re doing when it comes to PDFs may be beneficial and worth the investment. Admittedly, this is an area that I am still learning and until I can guarantee that my knowledge with document remediation and tagging is solid enough I can teach it, I won’t lead you astray. I’d rather admit the weakness.

 

So Where Do You Start?

If you read through that list and started mentally tallying up your own website, you’re already doing more than most business owners do. You’re paying attention. You don’t have to fix all five this week. Pick one and hit the ground running. Alt text is usually the quickest win. You can set aside 15-20 minutes a day to work on it.

Grab the BFDM™ Stage 1 Checklist.

It’s free and covers the foundational pieces every small business website should have. It tells you where to focus first.

Want to go deeper? There are dozens of posts in the Resource Center. and my book, “Barrier-Free Web Design” on Amazon, walks through all five of these in detail.

 

Comments are closed

You may like these:

Take your learning further with more in depth courses and modules at Learn With S. Barnes Designs

Be selecting the "Explore Learn with SBD" button below, you will be redirected to Learn With S. Barnes Designs. The link will open in a new tab.
S. Barnes Designs, LLC is registered as a Service-Disabled Veteran-Owned Small Business (SDVOSB) through the Small Business Administration (SBA).

Site designed & maintained by S.Barnes Designs | © 2023 - Present. 

 

All Rights Reserved and Retained by S. Barnes Designs, LLC