Common HubSpot Hosted Website Accessibility Mistakes

Web accessibility ensures digital content is usable by everyone, regardless of their abilities. While creating accessible websites is crucial for inclusion and legal compliance, some organizations struggle with common accessibility pitfalls.

Keep reading to explore these challenges and learn practical solutions to make your website more accessible to all users.

Common Accessibility Challenges

Before diving into platform-specific issues, let's examine some universal accessibility challenges that affect websites regardless of their underlying technology. These fundamental problems often arise during the design and content creation phases, but fortunately, they're usually straightforward to address once identified.

Color Contrast Issues

One of the most overlooked aspects of web accessibility is color contrast. During the excitement of the design phase, it's easy to prioritize aesthetics over readability, but proper contrast is essential for users with visual impairments.

When selecting colors, consider these crucial factors:

• Large text requires a minimum contrast ratio of 3:1
• Smaller text needs a higher ratio of 4.5:1
• These requirements often exceed what designers might intuitively choose
• Background images (particularly photos) require special attention due to varying or multiple colors (remember that the positioning of the image and text may also shift on different screen sizes)

To ensure your design remains both beautiful and accessible, you can:

1. Use tools like Dequeue's contrast calculator during design (or you can calculate the contrast by using the color's luminance value)
2. Add semi-transparent overlays to image backgrounds
3. Implement subtle text outlines to enhance readability
4. Validate all color combinations, including hover and focus states

Alternative Text Challenges

Moving from visual design to content accessibility, alternative text remains one of the most critical yet frequently mishandled elements of web accessibility. 

While adding alt text might seem straightforward, its effectiveness depends entirely on how well it conveys the image's purpose within your content. It's meant to describe the valuable content of an image, but we often see these alt-text mistakes:

• Missing alt attributes entirely (which must be remediated by a developer)
• Using generic or verbose descriptions that don't convey the purpose
• Over-describing or writing alt-text on decorative images
• Writing alt text that doesn't match the image's context
• Failing to describe link destinations for clickable images

To improve your alt text implementation:

• Always include the alt attribute, even if empty for decorative images
• Focus on describing the image's purpose in the context
• Keep descriptions concise and relevant
• Adapt alt text based on the image's specific use case

HubSpot-Specific Accessibility Issues

While the challenges above affect all websites, HubSpot users face additional platform-specific accessibility hurdles. Understanding these unique challenges and their solutions is crucial for maintaining an accessible website within the HubSpot ecosystem. Let's explore the most common issues we encounter and their remediation strategies.

Image Field Alt Text Problems

HubSpot's handling of image alt text in modules with image fields can present unique challenges impacting your site's accessibility. The platform's default behavior of auto-populating image file names as alt text creates widespread issues across modules.

As a result, many HubSpot sites have dozens of images that use the file name as its alt text. In almost every situation, this is worse than leaving it blank. Utilizing the file name can waste a user's time while usually not conveying the information the image was intended to convey.

To address these HubSpot-specific image challenges:

• Review all image fields systematically
• Clear pre-populated file names
• Add meaningful alt text where needed
• Use empty alt attributes when appropriate

Form Accessibility Challenges

Forms are essential for lead generation, but HubSpot's form implementation presents several accessibility hurdles that require attention. Understanding these issues helps ensure your forms remain accessible to all users.

Technical challenges in HubSpot forms include:

• Improper fieldset implementation
• The legend element being used for field descriptions
• Labels on a checkbox and radio button fields (the main label, for the whole field) not associating with the inputs (this would be what fieldset and legend are actually for)
• Date inputs are not keyboard-accessible

In addition to these inherent issues, you may make some mistakes when setting up the form:

• Not including a label: All fields must have a value in the label field, and the placeholder doesn't count. If you want an inset label, this is better accomplished via CSS and JavaScript.
• Fields not being the right type: Make sure all properties used in the form are a type that makes sense for the kind of data you're trying to collect. A common one is using a checkbox when a radio button is more appropriate or when a single checkbox is more appropriate.

A lot of these issues arise from HubSpot's legacy form editor. HubSpot's new form editor, currently in beta, will resolve much of this. You can also take these avenues to create more accessible forms:

• Work with experienced HubSpot developers
• Always include explicit field labels
• Choose appropriate field types
• Implement proper validation messaging

Menu Navigation Issues

Navigation is crucial for all users, but HubSpot's default menu module presents several accessibility challenges that can impact user experience. These issues affect both keyboard navigation and screen reader functionality.

The default HubSpot menu includes scripts that handle keyboard interactions, which are an improvement on what a browser's defaults would be, but there are a few limitations, including:

• Dropdowns open when a menu item is focused instead of providing a button to open the dropdown explicitly. This forces users to tab through all levels of the menu.
• The "a" tag is used for all menu items, even ones that are not links.
• It uses an inappropriate "role" attribute for the menu wrapper and items.
• It doesn't apply the aria-current attribute for the menu item corresponding to the current page.

To solve this issue, you need to write custom markups and scripts for your menus instead of using the ones that HubSpot provides. You will need someone on hand or a third-party partner to help with this.

Moving Forward with Accessibility

Looking at these various challenges, the most impactful starting point is addressing alt-text issues. This focus makes sense because alt text improvements:

• Are relatively easy to fix
• Have a significant impact on user experience
• Can be handled by content editors
• Provide immediate benefits

However, web accessibility requires ongoing attention beyond these initial fixes. Web technologies and accessibility standards can evolve, as do the platforms we build on. Staying current with these changes ensures your site remains accessible to all users. So, consider these ongoing practices:

• Regular accessibility audits to identify new issues
• Monitoring The Web Content Accessibility Guidelines (WCAG) and any emerging accessibility standards
• Following any platform-specific accessibility improvements in HubSpot and other CMSs
• Training content creators and developers on accessibility best practices
• Testing with various assistive technologies as they evolve

At Lynton, accessibility is fundamental to our development process. From initial design to final deployment, we integrate accessibility considerations into every project. Our extensive experience transforming existing sites into accessible platforms demonstrates our commitment to inclusive web development.

Every new project we undertake begins with accessibility built into its foundation, and our standard HubSpot themes available for download mitigate many of these issues — all helping us keep accessibility top of mind.

Take the Next Step

Web accessibility isn't just about compliance. It's about creating an inclusive digital experience for all users. While the challenges could seem daunting, addressing these common issues systematically can significantly improve your site's accessibility.

Don't want to go it alone? Our experienced team can help audit your site, implement necessary fixes, and ensure your digital presence serves all users effectively. Contact us to learn how we can help make your website more accessible to everyone.