💬 RevOps Discussions

alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How do you ensure your Hubspot website(s) meet ADA compliance?

My team is currently working on putting together some processes and guidelines for meeting ADA compliance during website builds. So I was wondering what processes/guidelines other teams have in place for such?

 

  • Throughout the build process, from Designers to Developers to Content Writers - how do you ensure your website(s) are adequetly accessible?
  • Are there Hubspot elements you've found not to be ADA compliant and have you created any workarounds for them?
  • Do you utilize third-party partners with expertise in the field for checking that your website(s) are compliant?


Here are some tools and informative webpages my team have gathered during our research if anyone is interested:

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
9 Replies 9
HadarS
HubSpot Employee
HubSpot Employee

How do you ensure your Hubspot website(s) meet ADA compliance?

cc: @geoffbcampbell1 FYI

0 Upvotes
ashfeller
Contributor

How do you ensure your Hubspot website(s) meet ADA compliance?

Hi @alyssamwilie

I'd highly recommend AXE chrome extention. 

It was developed by Deque. This chrome extention is so vaulable because it prioritizes a11y fixes. 

0 Upvotes
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How do you ensure your Hubspot website(s) meet ADA compliance?

I was actually using that just yesterday! It's pretty awesome and detailed. A few things it was catching though is that the aria roles in the Hubspot advanced menu don't seem to be quite right, their child-toggle buttons don't have a defining label of any sort, and when you use a repeater in a custom module it uses the same ID for the repeated elements if you have the module wrapper on (which you can't remove with fields like the Simple Menu).

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
ashfeller
Contributor

How do you ensure your Hubspot website(s) meet ADA compliance?

@alyssamwilie We're flagged for that same thing! For us, the navigation ARIA error message also appears on Google's Lighthouse Inspect tool. I asked our HubSpot CSM about it, she said the improvement is on HubSpot's roadmap. However, I don't have a date for when it'll be completed.

alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How do you ensure your Hubspot website(s) meet ADA compliance?

Good to know they're at least working on it! For now we've used javascript to fix the issues but it's definitely not the best fix. 🤔

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
ashfeller
Contributor

How do you ensure your Hubspot website(s) meet ADA compliance?

@alyssamwilie They say "No ARIA is better than Bad ARIA". So, I think you should be fine! 

C_Lowry
HubSpot Employee
HubSpot Employee

How do you ensure your Hubspot website(s) meet ADA compliance?

@alyssamwilie - thanks for reaching out and posting about this topic.

 

I found this community post from last year which shares some good articles and resources around ADA compliance (https://community.hubspot.com/t5/CMS-Development/Advanced-ADA-Compliance/td-p/246305).

 

Let me also tag in some web design and developments experts from our power user community to see if they can also share their experiences around this.

 

@setheryb@Anton@dennisedson  - do you have any best practices for building out a website to meet ADA compliance that you could share?

dennisedson
HubSpot Product Team
HubSpot Product Team

How do you ensure your Hubspot website(s) meet ADA compliance?

heya @alyssamwilie 

Microsoft has a nice collection of documentation here

Unsure what you all use for design, but there are some good figma plugins that test for color contrast

check this one out

a quick win for alt text on images in hubspot is to make the filename be that alt text as that is the default that is pulled in when adding an image in hubspot.  Cant count the number of times i have seen alt text like iStock-11772529  Robot Frustrated

 

Am glad to see people starting to take accessibility seriously! 

alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How do you ensure your Hubspot website(s) meet ADA compliance?

Oh man, the iStock alt text is a menace. That's a pretty good quizk fix for making sure it's done! Though I wonder if we'd be able to train our clients to do so. Getting them to put in approriate alt text is almost as difficult as getting them to stop uploading the exact image from iStock before resizing it so ya end up with 10,000+px wide images trying to load on the site. Smiley LOL 

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.