image

7 Website Accessibility Mistakes That Are Costing You Clients

Max profile imageMax Feb 5, 2025

When building a website, it’s easy to overlook accessibility. You might be thinking, who’s going to care if the site looks good and works fine, right? Well, not prioritizing accessibility isn’t just a small oversight, it’s a mistake that can cost you clients. When a website isn’t accessible, it excludes a large portion of the population, preventing potential clients from engaging with your content or services. Accessibility mistakes not only affect the user experience, but they also damage your business and bottom line.

Stop Allowing Accessibility Mistakes To Cost You Money

Here are 7 common accessibility mistakes that are actively costing you clients—and how to fix them:

  1. Poor Contrast Between Text and Background, Making Content Hard to Read – Low contrast makes text difficult or impossible to read, especially for users with visual impairments.
  2. Messy Heading Structure That Confuses Screen Readers – Disorganized headings make navigation frustrating and inefficient.
  3. Lack of Keyboard Accessibility, Blocking Users Who Can’t Use a Mouse – Many users rely on keyboard navigation, and a site that doesn’t support it is unusable to them.
  4. Inaccessible Documents That Prevent Screen Readers from Processing Content – PDFs and other documents should be formatted properly for accessibility.
  5. Missing or Poorly Written Alt Text That Leaves Out Visually Impaired Users – Without descriptive alt text, images provide no value to those who rely on screen readers.
  6. Ignoring Mobile Optimization, Creating Frustrating Experiences for Most Visitors – Poorly optimized mobile design leads to navigation issues and accessibility barriers.
  7. Popup Traps That Make Navigation Unbearable – Popups that are difficult to close or navigate through create barriers for many users.

These mistakes don’t just limit accessibility—they actively turn users away, hurt conversions, and put your business at risk. Fortunately, they’re all fixable. Let’s break down each mistake and how to correct it.

1. Poor Contrast Between Text and Background, Making Content Hard to Read

We’ve all experienced the frustration of trying to read something on a website that strains our eyes. Imagine struggling to read text that’s nearly the same color as the background. This is a common issue, and it’s not just about aesthetics. This problem can make your site inaccessible for users with low vision or color blindness. When the text blends into the background, a large portion of your audience is effectively locked out from engaging with your content.

The Fix: To ensure your text is easily readable, follow the Web Content Accessibility Guidelines (WCAG). Aim for a contrast ratio of at least 4.5:1 between regular text and the background, and 3:1 for large text. This simple adjustment can significantly improve readability. Tools like PageSpeed Insights are excellent for checking contrast ratios and other key accessibility factors—plus, it's free! PageSpeed Insights also covers broader topics like website optimization, which you can explore further in our blog on website optimization.

Additionally, avoid relying only on color to convey meaning. For example, instead of using yellow text to highlight important information, consider adding icons or text labels. This way, users who have difficulty distinguishing colors can still understand the message.

For More Information: For a deeper dive into contrast guidelines, visit the official WCAG guidelines from W3C. You can also explore Rule 09o5cg: Contrast Requirements for more specific contrast requirements.

2. Messy Heading Structure Hurts Navigation

Headings are not just about looks. They help users, especially those relying on screen readers, navigate your content efficiently. When heading levels are inconsistent or missing, it is like handing someone a map with the wrong labels. Users get lost, important content is skipped, and frustration builds. Unfortunately, website builders and AI-generated sites almost always get this wrong. They use headings for styling rather than structure, which makes navigation even more difficult.

The Fix: Stick to a clear, logical heading structure. Use one <h1> for the page title, then <h2> for main sections, <h3> for subsections, and so on. Don’t skip levels, like jumping from <h1> to <h3>, since that disrupts the content’s flow for screen readers. Consistency across your site makes navigation easier for everyone.

3. Lack of Keyboard Accessibility, Preventing Users From Navigating Without a Mouse

Believe it or not, many websites are impossible to navigate using just a keyboard. This can be a huge issue for people with motor impairments who rely on keyboard navigation rather than a mouse. If users can’t get from one page section to another using just their keyboard, they’re being locked out of your website.

The Fix: Make sure every interactive element—buttons, links, forms, and menus—can be navigated using the keyboard alone. A simple way to test this is to turn off your mouse and see if you can still use the Tab key to get through the site. Add focus indicators (like a border around the element) so users can easily see where they are on the page.

4. Embedding Documents That Are Not Accessible to Screen Readers or Other Assistive Tools

PDFs and Word docs might seem like a convenient way to present content, but when they’re not accessible, they can leave users in the dark. A document that’s just an image of text, or one that doesn’t have the right tags for screen readers, is essentially useless to people with visual impairments.

The Fix: When you must embed documents, make sure they’re properly tagged and formatted for accessibility. Use accessible PDF tools to ensure that text is readable, images are tagged with alt text, and headings are properly formatted. Whenever possible, offer the content in HTML format instead of PDFs for better accessibility.

5. Bad or Missing Alt Text Leaves Users in the Dark

Alternative text (alt text) is the description of images, videos, and other assets that describe what it is. Alt text is critical for users who rely on screen readers to understand images. If your alt text is vague, incorrect, or in most cases missing entirely, you’re essentially telling these users that either they, or the images don’t matter. You’re basically leaving them out.

The Fix: Every image should have alt text that’s clear, descriptive, and relevant to the image’s purpose. Stop using generic alt text like “image” or “photo”, describe what’s in the image or its function on the page. For example, instead of “image of a cat,” you could use “a black cat lying on a window sill.” It’s not even difficult to add. In HTML, it’s as simple as adding alt="" to the image tag.

Image reads 'Remember: If there's text in your image, include the copy in the alt text section' in red on a partially transparent image of the pyrobyte fire logo with a white background.

Our alt text for this image reads: Image reads 'Remember: If there's text in your image, include the copy in the alt text section' in red on a partially transparent image of the Pyrobyte fire logo with a white background.

6. Neglecting Mobile-First Design, Affecting Users With Mobile Devices or Smaller Screens

We are in 2025 and at this point if your website doesn’t load right on a phone, no one is staying. That could be 80% or more of your visitors. Sites that aren’t friendly to our phones whether the buttons are too small/big/close together, or the images are so big that it does that weird expand thing where the image is huge but the rest of the website is in a corner. Either way, it’s a frustrating and  poor user experience.

The Fix: Design for mobile first. It’s what all developers should be doing right now, but unfortunately it’s simply overlooked in most cases, especially by builders like WordPress and AI. Use responsive design techniques, such as flexible grids and media queries, to ensure that your content adapts seamlessly to different screen sizes. Test your site on various devices to make sure everything looks and functions as it should. Check out our blog on website optimization to go over 5 essential strategies to optimize a website for speed and performance

7. Pop-Ups That Trap Users and Ruin the Experience

We’ve all been there. You land on a website, and before you can even scroll, a giant pop-up blocks everything. Maybe it’s a newsletter sign-up, a cookie banner, or an annoying AI chat bubble that won’t go away. Now imagine trying to close it using only a keyboard or a screen reader and getting completely stuck. That’s what happens when pop-ups aren’t built with accessibility in mind. If users can’t easily close them or navigate away, they’re trapped.

The Fix: Make sure pop-ups can be closed with the keyboard. Hitting Esc should do the trick. Focus shouldn’t get stuck inside them, and when a user closes a pop-up, they should be taken back to where they left off, not thrown somewhere random on the page. And please, don’t hit visitors with a pop-up the second they land on your site. It’s annoying, it disrupts navigation, and it’s an easy way to make people leave before they even read a word.

Why Custom Code is the Solution

While there are plenty of website builders, hundreds of AI builders, and thousands of templates out there, they will always come with accessibility limitations that you can’t control. These tools usually generate code that’s bloated, messy, or just not optimized for accessibility. That’s because they don’t keep up with the best practices. But when you use custom code and designs, you get a solution that’s tailored to your needs. One that prioritizes accessibility from the very beginning.

When you choose to work with a professional who specializes in hand-coding websites, you get a solution that is built from the ground up with accessibility as a priority. Unlike the competition, where accessibility is an afterthought, we ensure it is part of the foundation. Custom code allows for better optimization, a cleaner and more efficient structure, and a user experience designed to work for everyone.

Ready to Make Your Website Accessible?

If you want a website that’s not only beautiful but also accessible to everyone, it’s time to invest in a custom-coded solution. At Pyrobyte Web Solutions we specialize in building websites that follow accessibility best practices while still delivering an amazing user experience.

Stop losing clients due to poor accessibility. Get in touch today to start building a website that works for all your clients, not just some of them.