Website accessibility issues can leave visitors distressed, isolated, and confused. By ensuring that your website is inclusive for all visitors, you can ensure everyone has a positive user experience regardless of ability. One of the best ways to figure out how to create a fully inclusive website is by breaking down some major accessibility issues sites face. You can also check out the best accessible website examples for inspiration.
This post will walk you through the most common website accessibility issues you should investigate. We'll also share why this is crucial and provide examples of frequently made accessibility errors. Then, you can run a website accessibility check and update it appropriately.
Why is website accessibility essential?
There are quite a few reasons why you should resolve website accessibility issues promptly. For starters, website accessibility matters because you need to offer a website that all visitors can access seamlessly. Simply put, it's the right thing to do. Furthermore, if you don't do so, you could face legal implications for failing to comply with guidelines set to ensure inclusivity.
In addition to these reasons, website accessibility establishes your website as the compassionate, thoughtful organization it is. Though website accessibility should be the standard, you'd be surprised how many websites do not comply. By prioritizing website accessibility, you could build customer trust and loyalty.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
What are accessibility issues? [+Examples]
So, what are accessibility issues users frequently encounter? We're glad you asked. We've rounded up 10 common website accessibility dilemmas that users face so you can solve them promptly on your organization's website. And if you're looking for a checklist you can follow to ensure your site is up to par with accessibility best practices, we've got you covered there, too.
Not enough color contrast.
For users with colorblindness or low vision, insufficient color contrast can significantly impact their ability to perceive and digest the information on your site. All users should be able to read your website copy regardless of the lighting or device type they're accessing your site with. If you're unsure your website features sufficient color contrast, you can test it using a free color contrast checker like this one.
Here's an example of how you can resolve this accessibility issue and provide visitors with contrast options that suit their needs. On the HubSpot website, you can toggle back and forth between contrast options to find one that suits your preferences.
Another important note about implementing accessible design into your website — if users can't find it and easily access it, it's not helpful. Therefore, be sure that visitors can easily find the color contrast toggle on your site's homepage. Otherwise, you risk isolating and frustrating users, which could contribute to a higher bounce rate. The same goes for your accessibility statement — it's useless if it's not findable.
Hyperlinks that aren't descriptive.
For users that use assistive technology such as screen readers, having non-descriptive hyperlinks can be hugely detrimental. By ensuring your hyperlinks are descriptive instead of vague statements such as "Click here," you can provide visitors with the invaluable context of where they'll land by visiting the link. Plus, it will make it easier for visitors using assistive technology who are looking for a specific link.
Take the hyperlink above, for instance. We're sharing information about how you can access a free color contrast checker. What if we hyperlinked "Click here?" It would be significantly more difficult for those using assistive technology to figure out what we are linking to.
.png?width=650&height=400&name=accessibility%20issues%20%20(2).png)
Unhelpful alt text.
If your site currently features unhelpful alt text, it's time you resolve that. When you upload an image, you add copy that will appear if an image doesn't load or if a visitor accesses your site using a screen reader. That's alt text. It also offers your site a search engine optimization (SEO) boost. Even so, it's important to remember that the purpose of alt text is to make your site more accessible for visitors using assistive tech.
To resolve accessibility issues surrounding alt text, ensure your copy is descriptive and provides a written account of what the graphic shows. You can check out our complete guide to image alt text for more information on best practices, but to recap, keep yours specific, provide context, and offer detail.
-jpg.jpeg)
Incorrect use of headings.
Similar to Alt text, using headers in your blog posts and on website pages is crucial for accessibility but also gives your site an SEO boost. The reason why headings are essential and not having them presents accessibility issues is because of a lack of context.
These provide site visitors with a sense of the page's structure. Then, users accessing your site with assistive technology can easily navigate it and have an understanding of the order and cadence.
Imagine, for instance, how confusing this page would be without the structure provided by headings.
Adding text within images.
Let's break this down: You can add text within images, but it should be information already offered on another accessible part of the website. And, of course, if there is text within an image, you should be sure to mention that in the alt text.
This is a common website accessibility issue for those with visual impairments who cannot see images. Therefore, to ensure your website is fully accessible to people with blindness or low vision, guarantee that they can access the information mentioned in the graphic elsewhere.
For example, take this image.
.png?width=650&height=400&name=accessibility%20issues%20%20(3).png)
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 orange text on a white background. Orange HubSpot sprocket logo in bottom right corner.
Including non-accessible documents on your site.
We understand that sometimes, you need to embed a PDF on your website. But have you stopped and made sure that PDF is accessible? If not, it's time to give your PDFs a much-deserved facelift. Accessibility extends to all elements of your site — not just those directly on the page.
To do so, be sure the images in the PDF include alt text, offer visitors intuitive order through the PDF, use actual text rather than a picture of copy, and insert PDF tags.
Insufficient keyboard accessibility.
For users who can't navigate a site with a trackpad or mouse, keyboard-accessible navigation is a priority. Therefore, you must ensure your site works seamlessly with keyboard navigation.
When building your site, developers might need to add custom controls. It's also your job to ensure that users can navigate between content and controls easily. Menus and forms are a significant trouble spot for keyboard accessibility, so pay special attention to those.
.png?width=650&height=400&name=accessibility%20issues%20%20(5).png)
Tables formatted without accessibility in mind.
Tables present additional accessibility issues if not formatted correctly. Creating an accessible table isn't difficult — and it demonstrates your commitment to offering an inclusive digital experience.
To make an accessible table, offer a summary of the information in a caption or alt-text format. In addition, be sure that you have a header row identified and keep it simple. In other words — don't nestle a table inside of a table.
-jpg.jpeg)
Forms that aren't accessible for people with disabilities.
Forms are an excellent addition to ensure your website captures as many leads as possible. However, if the forms on your site have accessibility issues, you're losing out on capturing the information on visitors with a disability. Plus, from a user experience standpoint, being unable to access something can be overwhelming and isolating.
Some best practices include ensuring your website's form is accessible via keyboard navigation, using visual labels instead of placeholder text, and clarifying the form input labels.
For instance, with HubSpot's form to subscribe to the blogs, you can use 'tab' to navigate from one field to another.
-jpg.jpeg?width=650&height=300&name=Screen%20Shot%202023-02-03%20at%2012-56-12%20PM%20(1)-jpg.jpeg)
Menus/navigation that weren't created with accessibility in mind.
First and foremost, your menu should be accessible for people whether they're accessing it with the help of a screen reader, keyboard, or otherwise. To ensure that your menu checks all of the accessibility boxes, you should use familiar patterns, so visitors know what they're looking for, plus you should accurately label the menu.
If you're offering a fly-out menu, there could be an issue for those accessing the menu with certain assistive technologies. Be sure that the submenu doesn't dissipate when users remove the mouse from the area to ensure accessibility for touchscreen users.
For instance, on HubSpot's website, you can navigate through the submenu using the arrows on your keyboard.
Resolve accessibility issues to ensure a seamless user experience for all visitors.
By fixing accessibility issues, you can ensure that all of your site's visitors have a positive experience that leaves them wanting to return. By examining these website accessibility issues examples, you better understand what good — or bad — design looks like in practice.
