9 Common Website Accessibility Mistakes (and How to Avoid Them)

Color is a great way to make your website feel inviting, but it only works if people can read what’s on the screen. When text blends into the background (like light gray on white), it can be hard to see, especially for people with low vision or anyone using a phone in bright light.

The good news is that contrast issues are easy to spot and even easier to fix. Start by checking your color combinations against accessibility standards. WCAG recommends a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text. There are plenty of free tools online that can do this for you in seconds. You can also use the Coblis Color Blindness Simulator to see how your website looks to users with different types of color blindness. These quick checks can help make sure everyone can read and interact with your content clearly.

3. Missing or Misused Alt Text

Images are everywhere online, but not everyone can see them. For users who rely on screen readers, alt text bridges the gap. When an image has no alt text or the description doesn’t make sense, important context is lost. On the other hand, when alt text is stuffed with keywords or irrelevant details, it creates confusion instead of clarity.

The fix is to keep your alt text clear and useful. Describe what’s happening in the image, not just what it is. For example, “New playground equipment at Riverside Park” is much more helpful than “playground photo.” If an image is purely decorative and doesn’t add information, you can mark it as decorative so it’s skipped by screen readers. In documents like Word, PowerPoint, or Adobe Acrobat, you can do this by selecting the image, right-clicking, and checking the box labeled “Mark as decorative.”

In WordPress and other popular website builders, you can mark these images as decorative by leaving the “Alternative Text” field blank in the media settings. WordPress will automatically generate an empty alt="" tag, which tells screen readers to skip over the image.

4. Ambiguous Link Text (Including Buttons)

Links and buttons should explain exactly what they do. Generic text like “click here” or “learn more” forces users to guess what’s next, which is especially difficult for people using screen readers. A page full of “read more” links can feel like a guessing game rather than a helpful resource.

The fix is to write link and button text that stands on its own. Instead of “click here,” try “View upcoming community events” or “Download 2025 annual report.” These give context without requiring extra explanation. Buttons should follow the same rule, describing the action they trigger, like “Submit service request” instead of “Go.”

Alternatively, you can add something called an ARIA label directly in the HTML of your link or button. This label gives screen readers more detail about what the link does, even if the visible text is short. For example:

<a href="/events" aria-label="View Upcoming Comunity Events for August">Events<a/>

In this case, a screen reader would read the full label, even though the button just says “Events” on screen. It's a helpful way to give users extra context without changing your visual design.

5. Empty Form Labels

Forms are one of the most common ways people interact with your website. Whether they’re submitting a request, signing up for updates, or paying a bill, forms need to be easy to use for everyone, including those using screen readers.

One common mistake is using placeholder text as a substitute for proper labels. While this might look fine visually, it doesn’t always get picked up by screen readers. Once a user clicks into the field, the placeholder disappears, leaving no guidance. When form fields are missing labels or rely only on visual cues, things can break down quickly.

Imagine tabbing through a form that reads “Input 1,” “Input 2,” and nothing else. Without clear labels, users can’t tell what information is being asked for. And if error messages show up in red text without explanation, it could be confusing and frustrating to fix the error messages and continue. Also, people with color blindness or low vision may not even notice them.

To make forms accessible, label each field clearly and use descriptive error messages like “Please enter a valid email address.” Provide helpful instructions when needed, and avoid relying on color alone to show errors or required fields. These small changes make a big difference for people using screen readers or navigating forms with limited vision or mobility.

6. Not Enough Spacing Between Interactive Elements

When buttons, links, or form fields are placed too close together, it becomes difficult for users to select the one they need, especially on smaller screens or when using assistive devices. This can lead to errors, confusion, and a frustrating experience for anyone with limited mobility.

The fix is to give each interactive element enough breathing room. WCAG recommends a minimum target size of 44 by 44 pixels, with enough padding around each item to avoid overlap. That extra spacing helps users select the right thing the first time, without second-guessing.

7. Not Providing Keyboard Skip Links

Skip links allow users to bypass repeated navigation and jump straight to the main content of a page. Without them, anyone using a keyboard must tab through every menu item before reaching what they came for. This can be frustrating and time-consuming, especially on pages with large menus or repetitive headers.

The fix is to add a “Skip to main content” link at the very top of each page. This is usually a simple anchor link that’s placed as the first focusable element in the HTML:

<a href="#main-content" class="skip-link">Skip to Main Content</a>

The target should be a clearly defined ID on your main content container, such as:

<main id="main-content">

You’ll also want to make sure the link is visually hidden by default and becomes visible when focused, so keyboard users can easily find and use it. This small step improves navigation for screen readers and keyboard users and helps everyone get where they’re going faster.

Or, if you have a WordPress site, there’s plugins that will add the skip link for you. And if you’re not sure? Visit your site and immediately press the “Tab” key - if you have skip links already set up, you’ll see it display. Oftentimes, the website authoring platform will automatically include it.

8. Missing or Incorrect Video Captions

Video is a great way to share stories, explain services, or highlight community events. But if your videos don’t have accurate captions, you’re leaving out anyone who is deaf or hard of hearing. Auto-generated captions can help, but they’re often full of mistakes as they often misinterpret words.

The fix is to create accurate captions and review them for errors before publishing your videos. Full transcripts are another valuable addition, giving users the option to read content instead of watching or listening. Transcripts can also help with SEO by providing search engines with a text version of your video content.

9. Inaccessible Documents

Many organizations post PDFs or Word documents on their websites, but if they’re not formatted properly, they can create barriers instead of offering support. Common issues include missing headings, unlabeled images, and scanned text that isn’t selectable or searchable. This means vital information may be completely inaccessible to some users.

The best way to avoid this is to create structured source files from the start. Use real heading styles (not just bold text), add alt text to images, and avoid relying on visual layout tricks like multiple spaces or manual line breaks. In Word and Google Docs, use the built-in accessibility features. When exporting to PDF, make sure tagging is turned on so screen readers can follow the flow of the content.

And don’t forget to check your documents before you upload them. Tools like Microsoft Word’s Accessibility Checker or Adobe Acrobat Pro’s Full Check can flag problems and help you fix them. If the document includes scanned pages, make sure you run OCR (optical character recognition) so screen readers can interpret the text.

Accessibility Is Ongoing

Making your website accessible isn’t something you do once and forget about. It’s something that needs to be maintained as your website grows and changes. Every time you add a new page, post an update, or launch a feature, it’s worth asking: will everyone be able to use this? That mindset alone can prevent many of the problems we’ve talked about.

Staying on top of accessibility doesn’t have to be overwhelming. Regular reviews, staff training, and user feedback can all help you stay on track. By treating accessibility as an ongoing priority, you’re building a site that serves your entire community, not just part of it.

Bringing It All Together

Avoiding common accessibility mistakes isn’t about perfection. It’s about progress. Every step you take toward making your website more inclusive benefits real people who depend on it. From writing better alt text to ensuring forms and navigation are usable for everyone, small changes can make a big difference.

At White Whale Web, we help local governments, small businesses, and nonprofits create websites that are modern, accessible, and built to last. If you’re ready to review your site and start removing barriers for your users, reach out today. We’d love to help you make accessibility part of your next step forward.