Many Utah business owners are tempted by the idea of using AI to build their whole site. And who can blame them? With a few prompts, you can have a finished homepage and a working contact form in an afternoon, for a fraction of what a designer would charge.
The problem is, an AI-built site can look finished on the surface but lack the very features that help it perform well on the internet. Accessibility is one of them.
Accessibility removes digital barriers that make it hard for people with impairments to use your website. This may include people with auditory, cognitive, physical, speech, or visual impairments.
Roughly 25% of Americans have disabilities. Skip accessibility, and you risk alienating these users. You could also run afoul of laws like the Americans with Disabilities Act, which requires public-facing websites to be accessible.
And finally, if your website is not accessible, it could be harder for all potential customers to find you on the web. That’s because search engines tend to favor pages that are more accessible, and the rankings reflect this bias.
Below, we describe five common accessibility problems that can show up in AI-built websites and explain who they affect and how to fix them.
1. Color Combinations Look Good but Are Hard to Read
Light gray text on a white background might look sleek on your monitor. But picture a far-sighted customer, or a customer standing outside in bright sunlight, trying to read your prices on a phone. If the text is too light, they may have a hard time making out what it says.
AI-built designs can use color combinations that look good together but don’t provide enough contrast to make the text easy to read.
The good part is that when you set out to fix AI website errors, this is one of the easiest places to start. Most of the time, you won’t need a redesign. The text may only need to go a shade or two darker. Your designer can swap the colors, or you can adjust them yourself in your website editor.
2. Images Have Missing or Meaningless Alt Text
When customers have trouble seeing the screen, they can get software that reads websites out loud. When the software gets to a photo, it reads a short description attached to the image. That description is called alt text.
AI-built sites can leave the description field blank or fill it with the photo’s file name. So instead of hearing what’s in the picture, a customer hears something like “IMG 4521.”
Say your dental office posts a map showing where to park and which door to use. Without a description, a patient who can’t see the map gets nothing from it.
This is one you can often fix yourself. Most website builders have an alt text box in each photo’s settings. Check out your images. If they are purely decorative, leave the box blank so the reading software skips it. Otherwise, make sure the alt text is filled in correctly.
3. Headings Are Out of Order
Headings are the bold titles that break up your page, like “Our Services” or “Contact Us.” Besides helping visitors skim your website, they help customers who have trouble seeing the screen. Their reading software treats your headings like a table of contents, so they can jump to the part they need, as long as the headings are in the right order.
The problem with AI builders is that they create sections as isolated visual blocks rather than a single document that flows logically and aesthetically from top to bottom. Perhaps you have a menu section called “Dietary Restrictions.” It is intended to be a broad heading with “Gluten-Free Options” and “Dairy-Free Options” sections underneath. But the AI gets it wrong and randomly makes the “Gluten-Free Options” bigger than the “Dietary Restrictions” heading. Now, the page looks jumbled and chaotic, and because the flow is not intuitive, users with visual or cognitive impairments cannot navigate it easily.
If you’re working with a custom web designer, they can help you map out the headings according to an easy-to-follow master plan. If you want to make the adjustments on your own, most website builders let you click a heading and pick its level from a menu. Your page title gets Heading 1, main sections get Heading 2, and anything under a main section gets Heading 3. If a heading ends up too big or too small, you can change its size without changing its level.
To test your website, think of some scenarios that would bring a customer to your site. Put yourself in the customer’s shoes, and see how easy or hard it is for you to find the information you need.
4. Buttons Can’t Be Reached by Keyboard
Not everyone uses a mouse to get around a website. Some people press the Tab key to move from one button or link to the next, then press Enter to use it. They might have arthritis or a hand tremor, or they might be working around a broken wrist.
AI builders can create buttons that aren’t built to work with a keyboard. Picture a customer trying to use a keyboard to reach your HVAC company’s “Request a Quote” button. They press Tab, and the cursor skips right over the button. Or they land on the button, press Enter, and nothing happens. To them, it looks like your site is broken.
To check your own site, set your mouse aside and press Tab to move through the page. Watch for an outline that shows where you are, and make sure you can reach and use every button.
If a simple button or link doesn’t work, you can often swap it for one of the built-in buttons in your website builder. But if something more complex, like a drop-down menu, doesn’t work with a keyboard, you may need a developer to fix it.
5. Form Fields Lack Clear Labels
Your appointment form is where visitors turn into customers, so it needs to be easy to fill out. Many AI-built forms put the name of each box inside the box, like “Enter your email” in light gray text. Those words disappear the moment someone starts typing.
Picture a customer booking a tune-up on your auto repair shop’s “Book an Appointment” form. They take a phone call halfway through, look back at the screen, and see a row of filled-in boxes with no labels. Did the third one want their license plate or their mileage?
For a customer using reading software, it can be harder. If a box has no label connected to it, the software may announce a blank text box and nothing else.
The fix is a clear label that stays visible, and many form builders have a setting that turns these on. While you’re in there, make sure mistakes get a clear message, like “Please enter a phone number.”
Design With All Your Customers in Mind
Don’t depend on AI to create a website that is accessible. Be proactive and make sure all of your customers can find what they need.
If you need help, contact our Ogden web design firm. We can often fix AI website errors like these without rebuilding your whole site. And if you’re starting fresh, we’ll build a custom site that has these details checked before launch.