How to fix the 5 most common website accessibility errors in less than 5 days
The importance of an accessible website
Imagine visiting a library, only to find that the books are stacked haphazardly on shelves, the lighting is dim, and the signs leading you to different sections are illegible. Frustrating, isn't it? Now, picture this scenario in the digital realm. When websites lack proper accessibility features, it's like that disorganized library, but on the internet. This is why website accessibility is crucial.
In a world that's increasingly dependent on the web for information, services, and social interactions, we must ensure that everyone can access and use online resources. This includes individuals with disabilities who may rely on a screen reader, keyboard navigation, or other assistive technology, as well as those with unseen disabilities such as cognitive or reading challenges.
Website accessibility is about making the digital world as inclusive as possible, ensuring that no one is left behind.
While it's easy to assume that web accessibility is a niche concern, the reality is quite the opposite. According to the World Health Organization, approximately 15% of the global population lives with some form of disability. That's a significant portion of your potential audience. By making your website accessible, you not only comply with legal requirements in many countries but also open the door to a wider audience and demonstrate a commitment to social responsibility, one of the many benefits of making your site more accessible.
In this blog post, I'll guide you through the process of fixing the five most common website accessibility errors. The best part? I'm going to show you how to do it in just five days or less. So, whether you're a website designer, a nonprofit leader or business owner, or simply someone who wants to make the web a better place for all, this post is for you.
Common accessibility errors that need to be addressed
Your specific website may or may not include accessibility errors. However, in my experience conducting website accessibility audits, these are the five most common accessibility problems I see.
Inaccessible Images
Missing or poorly structured headings
Low color contrast
Improper context for links
Video-related errors
Want the code to fix the skip to content tab-index value often flagged on Squarespace websites? It’s included in my Notion checklist that accompanies the Access for All Website Essentials Course - get it here.
Make fixing your website accessibility a priority
Setting a goal to fix these common accessibility errors within a 5-day timeframe is more than just a challenge; it's about prioritizing the accessibility of your website.
The longer accessibility issues persist, the more potential users are excluded from your content or services. By dedicating a short, focused period to address these errors, you not only demonstrate your commitment to inclusivity, but also safeguard against potential legal and reputational risks. And, with the right resources and guidance, it's a goal that's not only achievable, but can significantly enhance the user experience for all visitors to your website.
Day 1: Understanding the Basics of Website Accessibility
The concept of website accessibility
There are thousands of articles out there on website accessibility standards, WCAG, and accessibility guidelines that every website owner is required to follow. I even have a post here on the One Nine Design blog about why an inclusive website matters so much. So, I won't belabor the point in this post, but will point you to a few really great resources to better understand the concept before you go any further with specific fixes.
All of these resources describe the impact of accessibility errors on different user groups and the importance of creating an inclusive online environment.
So, take day one to explore these articles, take a few notes, and ensure you understand the terminology before diving into to correct a specific error.
Day 2: Conducting a Website Accessibility Audit
Conducting a website accessibility test is the crucial first step on our path to a more inclusive digital landscape. Think of it as the diagnostic check-up for your online presence. It's important for several key reasons.
First, an audit helps you identify the specific accessibility issues that may be present on your website. Without this step, it's like trying to solve a puzzle without knowing what the pieces look like. An audit pinpoints areas that need improvement, allowing you to prioritize and strategize your accessibility efforts.
Second, auditing your website for accessibility is often a legal requirement in many regions. Failing to meet these obligations can result in legal repercussions, including fines and lawsuits. By proactively auditing your site, you reduce these legal risks and demonstrate a commitment to compliance and equal access.
Lastly, an accessibility audit is an essential part of providing a better user experience. It ensures that your website is user-friendly for everyone, regardless of their abilities or disabilities. By enhancing usability, you're not only meeting compliance standards but also boosting your site's appeal to a broader audience and enhancing its overall performance.
Two types of website accessibility audits
Self Audit
It is possible to conduct an audit of your website on your own with the help of a few accessibility testing tools. However, there a few caveats here:
If you are not a website designer or developer or do not have experience in designing websites, it can be difficult to complete a thorough accessibility audit. Without understanding website structure, user experience, and design best practices, you’re really flying blind doing a self audit. A successful audit requires you to understand WCAG (web content accessibility guidelines), even at just a basic level.
Self audits are a great first step, but they are not going to identify 100% of the accessibility issues. I believe in taking small steps, fixing what you can, and then working to eventually correct all errors when possible. So, a self-audit will help you take this approach but will not offer you adequate protection during the process.
If you are new to website accessibility terminology and guidelines, conducting an audit on your own will be difficult. Expect to spend lots of time Googling and learning. And, be aware of going with the first thing you see on Google search results. Always use a reputable website from a company that specializes in, or has trained staff, in website accessibility.
Start with your accessibility statement. I believe that a genuine website accessibility statement on your website is the absolute best first step. When you admit that you have done the work to make your site accessible but that you also acknowledge there is room for improvement, you are diffusing a potential legal liability and demonstrating good faith.
Video: How to install and use the Axe DevTools Chrome Extension for testing (opens in a new window)
Professional Audit
A professional website accessibility audit is an investment in your business that demonstrates you understand the importance of ensuring your website is accessible to all audiences. While services vary depending on the company you choose, most professional audits include:
Comprehensive accessibility testing of your entire website using both automated and manual testing tools
Detailed reports of compliance issues
Prioritized lists of recommended updates
Customized accessibility statements
Education and resources to keep your site compliant moving forward
Resource: Book an website accessibility audit with One Nine Design
Day 3: Identifying the Top 5 Common Accessibility Errors
In my work as a custom website designer, the five most common website accessibility errors I see on both desktop and a mobile device are:
Lack of alternative text for images and associated image errors
Inadequate keyboard navigation
Missing or poorly structured headings
Low or poor color contrast
Inaccessible forms and inputs
Image Errors
If you mention website accessibility to most people, one of the first things they mention is Alt text. Alt text is the descriptive text that explains to the viewer what the image is about in context to its use on the website.
Images play a significant role in conveying information, context, and aesthetics on a website. When there's no alternative text for images, users who are blind or visually impaired miss out on critical content, as a screen reader can't interpret visual information.
And yes, this is critically important. However, it’s one very small piece of accessible images. I teach about this more thoroughly in my Access For All Website Accessibility Essentials course, but errors like text displayed as an image and overlooking alt text for images such as logos and other navigational images also cause users with disabilities confusion.
Inadequate keyboard navigation
Lack of keyboard navigation is a website accessibility concern that arises when a website is not designed to be navigable and usable solely through keyboard input, without the need for a mouse or other pointing device. This is a significant issue because it affects a wide range of users, including those with mobility impairments, certain visual impairments, and individuals who rely on keyboard navigation for various reasons.
Give it a try the next time you’re online - using only your keyboard, attempt to navigate through a website and complete a function such as completing a form. If the website has been designed correctly and in an accessible manner, you won’t have any problems. However, when elements are not in the correct order or not correctly identified as landmarks, issues arise.
Deep-dive: how to test your keyboard navigation
Missing or poorly structured headings
Have you ever heard the phrase, “if everything is important, nothing is important”? This phrase comes to mind when I think about missing or poorly structured headings.
Headings serve a dual purpose on your website.
They tell the reader what the page is about without having to read all of the information.
They tell search engines what the page is about, helping the internet Gods to know when to show the page in response to a user’s search.
Again, most people know that WCAG dictate that a page should have only one Heading 1 (h1). However, the guidelines go much deeper than this single criteria and many websites miss the mark. Heading should also decrease in size down the page, meaning you can’t have an H2 at top, following by an H2 and then another H2.
There are plenty of work arounds to keep your design on point - I personally love Squarespace’s scalable text feature for this purpose.
Low color contrast / Poor Contrast
Low color contrast means that there is not enough contrast between the background and foreground of a section of your website. For example, if you have an image banner as a header with text overlay, there must be enough contrast between the two for someone with visual impairment such as low vision(or cognitive impairment) to read and process the text.
Low color contrast is also important with website buttons and general website text. (Skip the trendy minimal fonts that are super light and skinny!)
Read: Where to text your color contrast ratios for accessibility
Inaccessible forms and inputs
Inaccessible forms and inputs" refer to web forms, such as login forms, search boxes, registration forms, or any interactive input fields, that are designed in a way that makes it difficult or impossible for users with disabilities to interact with and complete them. This is a significant website accessibility concern for several reasons, such as excluding users who rely on assistive technology to interact with and complete them.
Inaccessible forms can also mean missed opportunities to secure a sale or lead because of a poorly designed form.
If these issues are identified on your website, it’s time to prioritize fixing them which we tackle on day 4.
Day 4: Fixing Accessibility Errors
It’s great to identify your website’s accessibility challenges, but it’s another thing to actually fix them. In some cases, a professional website designer may be needed to address tricky issues that require coding, javascript, or advanced knowledge. However, in some cases, these top five errors can be solved on your own.
How to fix Image accessibility errors
Depending on the specific errors, here are a few suggestions on how to fix your image accessibility errors.
Add alt text for all images that contribute to understanding the content on your website. Yes, there are images that do NOT need alt text -anything used for purely decorative purposes, for example.
Wordpress users: I highly recommend using Alttext.ai for generating alt text - a great resource!
Remove any images that were uploaded to your website with text saved on top
How to fix inadequate keyboard navigation
Ensure a logical tab order throughout your website. This means that users should be able to navigate through the content in a sequential and intuitive manner by pressing the "Tab" key. Avoid elements that break the tab order or trap users in certain sections.
Ensure that all interactive elements, such as links, buttons, and form fields, have clear and visible focus styles. This allows keyboard users to see where they are on the page and which element is currently in focus.
Want the code to fix the skip to content tab-index value often flagged on Squarespace websites? It’s included in my Notion checklist that accompanies the Access for All Website Essentials Course - get it here.
How to fix Missing or poorly structured headings
Ensure you have only ONE Heading 1 on each page of your website.
Clarify your heading 1 text - it should tell your reader (and Google) what the page is about. (Hint: “About” is not a great heading – About what?)
Ensure that your headings decrease as you move down the page and stay in descending order. It’s okay to repeat a heading size (i.e. two headings 2s in a row)
How to fix low color contrast
Use a color contrast testing site to test your website’s color contrast ratio.
Pay attention to changing ratio guidelines based on text size (the smaller the text, the more color contrast is required)
How to fix Inaccessible forms and inputs
Ensure that every form field has a clear and descriptive label. Use proper HTML markup to associate labels with their corresponding input elements. Additionally, provide concise and easy-to-understand instructions to assist users in filling out the form.
Make sure users are promptly notified about any input errors and are given clear instructions on how to correct them. Ensure that these error messages are presented in an accessible way, typically near the problematic field and that errors do not depend solely on color (i.e. listing text in red without additional context).
In all cases, it’s best to work with users who have a disability and/or who use assistive devices to manually test your website and get real-world feedback.
Day 5: Keeping your website compliant
Fixing initial accessibility errors is critical and if you’ve made it to day five, that’s something to celebrate! Unfortunately, this work is never done. Keeping your website complaint is an ongoing process that requires your time and attention every time you make a change to your website.
Adding photos? Write your alt text first before uploading so that you ensure it’s added for every single photo and name those photos descriptively.
Changing your color scheme or adding a new banner? Check your color contrast ratios first.
Need to add a new form? Think through your form labels first and write specific directions on how to complete the form, as well as offering alternative methods for submissions.
Run website accessibility testing tools often - standards change and WCAG is updated often.
Revisit your website accessibility statement at least twice per year to ensure it’s accurate, you’ve identified potential problems, and that your contact information is up to date.
An Ongoing commitment to accessibility: Learn Website Accessibility Essentials
Website accessibility isn't just a hot topic right now - it has been a concern for users with disabilities for years. It's only now that we are seeing people stand up for their rights, demand better digital experiences, and witnessing designers begin to take the issue seriously.
I'll be the first to admit that I was late to adopt these practices. However, I made a committment in 2021 to educate myself, completed the website accessibilut curriculum through Deque University and after working with screen reader users first hand, created the Access For All: Website Accessibility Essentials Course.
If you want to learn the basics (going well beyond what I cover in this post), discover why widgets like Userway are problematic, and snag some great code to fix even more common accessibility issues, sign up below to get my free “Skip to Content” accessibility code fix for Squarespace users inside my course: Access For All: Website Accessibility Essentials.
You might find these related posts helpful…