Want to Reach More Customers? Start by Improving Your Website’s Accessibility
Web accessibility is an important but often overlooked part of web design. It’s easy to get caught up in making a website that looks innovative or trendy without checking to see how accessible it is for everyone to use.
More than one in four adults in the United States has a disability. Many types of disabilities can make it difficult to access websites, such as visual impairments, cognitive disabilities, and fine motor difficulties. Accessible websites ensure that all users have equal access to them. Websites should be able to work well whether a person is using a mouse, a phone screen, a keyboard, or an assistive screen reader.
When websites aren’t accessible, businesses and organizations lose their ability to reach a large segment of their audience. This can mean lost sales for e-commerce companies, fewer leads for small businesses, and the risk of facing an Americans with Disabilities Act (ADA) lawsuit.
At Webspec, we work with clients in a wide variety of industries to create websites that are beautiful and accessible. We strongly believe in equal access on the web. That’s why we closely follow the Web Accessibility Initiative’s Web Content Accessibility Guidelines (WCAG), the industry standard.
Looking to make your website more accessible? Here’s a look at seven of the most common accessibility errors we often encounter—and how to fix them.
Table of Contents
- Poor Color Contrast
- Missing Image Alt Text
- Poor Heading Hierarchy
- Confusing Keyboard Navigation
- Inaccessible Forms
- Non-Specific Link Text
- Inaccessible Documents or PDFs
Poor Color Contrast
Compliance Standard: WCAG 1.4.3 Contrast (Minimum)
Have you ever struggled to read text on a website because it blends in too much with the background? That’s due to poor color contrast, which is an issue that many web users with color blindness or other vision impairments face daily. It also affects people using their phone in bright sunlight.
Low color contrast is the most common accessibility issue found on websites. A 2025 study of the top one million websites by WebAIM, a web accessibility company, found that nearly 80% of homepages have color contrast issues. That means it’s highly likely that there’s at least one instance of poor color contrast on any website someone visits—likely more.
How To Check for Color Contrast Issues
Does your website have color contrast issues? There are many free tools that can measure the contrast between your text and the color of the background behind it. These include WebAIM’s WAVE browser extension or the Accessible Web Color Contrast Checker. The standard to look for is a contrast ratio of 3:1 for large heading text and 4.5:1 for normal paragraph text.
How To Fix Color Contrast Issues
Once you’ve identified color contrast issues, you can fix them by changing the color of the text or the background color underneath.
Missing Image Alt Text
Compliance Standard: WCAG 1.1.1 Non-Text Content
Image alternative text (alt text) is a phrase of text added in your page’s code that describes a photo on the page. While not typically visible on the page, it’s used by screen readers to describe the photo for those who can’t see it.
Not every image on your website needs alt text. If the image is purely “decorative” or doesn’t add any useful information to the page, then alt text is unnecessary. In fact, the same image may require alt text on one page but not on another, simply because of context.
Here are some common examples where alt text is needed:
- Photos that show an important aspect of your products or services that isn’t explained somewhere else on the page.
- Headshots of important people.
- Image gallery pages where images are the main content on the page.
- Your company/organization logo at the top left of the screen. This alt text should say “home” or your business name. This lets users know that clicking it will return them to the homepage.
More complex situations arise when images contain graphs, charts, and other in-depth information. In these situations, it’s best to summarize the information succinctly. If it’s far too complex to summarize in a phrase or two, consider explaining it elsewhere on the web page. You could also mention in the alt text that web users can call a certain number for further information.
How To Check for Alt Text Issues
There are several different ways to check whether an image has alt text, from using browser extensions to manually checking the page’s code. It’s best to start on your homepage and ask if there are any images that convey important information. If so, check them first. Then move to other important pages.
Having trouble deciding whether an image needs alt text? Use the Web Accessibility Initiative’s alt text decision tree.
How To Fix Alt Text Issues
You may be able to easily add alt text to images directly within the page editor of your website. However, the process is more complex on some sites. If you’re having difficulties, it’s best to reach out to a trusted web developer.
Poor Heading Hierarchy
Compliance Standard: WCAG 2.4.6 Headings & Labels
Page headings serve many functions. They add visual structure to your page, tell search engines what the important sections of the page are, and allow screen readers to read the page like a table of contents.
The best practice is to always nest headings in a sequential order. Headings should not merely be chosen for how they look on a page; their role is to help readers understand the page structure. This means using only one “level one” heading on each page, always nesting lower-level headings underneath higher-level headings, and never skipping a heading level (such as going from a level one heading to a level three).
For example, this article you’re reading now has a level one heading at the top and is then broken into nine subsections using level two headings. Most level two headings have two level three subheadings nested within them.
How To Check for Heading Hierarchy Issues
There are multiple ways to check heading levels on a page. Browser extensions like the WAVE tool we mentioned earlier or HeadingsMap can show an outline of the page with headings. You can also navigate to the back end of your website and look at each page to see each element and how it’s formatted.
How To Fix Heading Hierarchy Issues
Depending on the type of page builder your website uses, fixing heading levels should be easy. Simply change the heading level to correspond with the structure of the page.
Confusing Keyboard Navigation
Compliance Standard: WCAG 2.1.1 Keyboard & WCAG 2.4.7 Focus Visible
Many users who are blind or who struggle with fine motor skills use their keyboard rather than a mouse to navigate through a website. This could mean scrolling down the page using the down arrow or using the tab key to skip from one interactive element to the next (such as one link to the next).
There are many things that can make this type of navigation hard or impossible for users. Common issues include placing interactive elements in the incorrect order and not having a visible outline around each element when a keyboard user lands on it. Known as a “focus state,” this outline allows keyboard users to know where they are on the page.
How To Check for Keyboard Navigation Issues
Checking for keyboard navigation issues is as simple as putting away the mouse and bringing out the keyboard. Refresh the page and start tapping the tab key. Are you able to see where you are as you tab down the page, or does your focus indicator disappear in certain spots? Is everything in logical order?
How To Fix Keyboard Navigation Issues
Unlike some of the other design elements, keyboard navigation issues are more difficult to fix without the help of a web developer. It’s best to work with a trusted web developer to ensure your keyboard navigation is compliant with WCAG AA standards.
Inaccessible Forms
Compliance Standard: WCAG 3.3.2 Labels or Instructions
Forms are key to helping your users connect with your business or organization. If they aren’t accessible or easy to navigate for someone using a screen reader, keyboard navigation, or other assistive technology, it could cause them to abandon filling out your lead form at all.
Important criteria for forms include:
- Making sure all required fields are marked. It’s best to spell out the word “required” in these circumstances versus using a red asterisk. This ensures it’s more easily understandable to your users.
- Ensuring any error messages that may show are specific about what went wrong when the person used the form. These error messages should also be accessible to people using screen readers.
- Ensuring keyboards and screen readers can exit the form fields after entering text.
How To Check for Form Accessibility Issues
A good place to start is by tabbing through the form using your keyboard. Similar to other items on this list, there are several browser extensions that can run basic accessibility checks on your forms.
How To Fix Form Accessibility Issues
Fixing form accessibility issues can range from the simple (ensuring “required” is spelled out above fields) to the more complex (navigating error messages). You may need to enlist a developer to make these fixes.
Non-Specific Link Text
Compliance Standard: WCAG 2.4.4 Link Purpose (In Context)
It’s not uncommon to see links on websites that say “learn more” or “click here.” To a sighted user, these often make perfect sense. However, they can cause issues for people navigating a website using a screen reader.
That’s because users may find these links out of context, or they may not be able to discern the surrounding information that shows where the link will go. For this reason, it’s important that the link text (often called “anchor text”) is descriptive enough out of context to let the user know where the link or button will take them.
How To Check for Non-Specific Link Text
When you’re publishing a new page, check all of the links to ensure that your link text is descriptive enough to let the user know where they’re going. Want to audit your links on a larger, website-wide scale? Some tools, such as Screaming Frog SEO Spider, are able to crawl entire websites to find instances of non-specific link text for you.
How To Fix Non-Specific Link Text
Fixing non-specific link text involves writing new, accessible text for each link. Instead of “learn more,” say “learn more about [fill in the blank].” Instead of “click here,” describe what clicking there will allow them to do.
Inaccessible Documents or PDFs
Compliance Standard: WCAG 1.3.1 Info & Relationships
Many websites, particularly government websites, rely on downloadable PDFs to store documents and information. Unfortunately, PDFs are notorious for having accessibility issues.
The good news is that they don’t have to be. With a few extra steps, it’s possible to make PDFs just as accessible as the web pages they are found on. This should be a goal of any website that uses PDFs, so that users have a consistent experience and full access to all necessary information.
How To Check PDFs for Accessibility
There are several online tools for checking PDFs for accessibility, such as Adobe Acrobat Pro. If you don’t have a checker, you can also verify that important elements are there manually. Many of the same criteria we’ve already covered should apply:
- Does the PDF use proper headings?
- Do essential images have the proper alt text?
- Is the text searchable, or is it simply scanned in as a photo?
- Are there any color contrast issues?
How To Fix PDF Accessibility Issues
The first way to ensure your PDFs are accessible is proper setup. Avoid scanning documents as images to create a PDF. If you create your document in a Microsoft Word document or a Google Doc using the built-in styles and headings, you’ll be most of the way there.
If you are unable to make your PDF accessible, consider either making it an HTML webpage on your site or adding a phone number someone can call to receive an accommodation. Webspec is also able to help convert non-accessible PDFs into accessible PDFs.
Avoid These Accessibility Issues & More by Working With Webspec
Making the web a more accessible place is a long but worthwhile journey. When you work with Webspec, you’re partnering with an organization that places a high priority on creating websites that work for everyone.
That’s why we strive for compliance with WCAG 2.2 AA standards with each website we launch. Our accessibility experts are always available to conduct audits or review PDFs for accessibility issues as a standalone service. Have questions about how to make your website more accessible? Contact our team today!
