CMS Development

seanfarias
Member | Diamond Partner
Member | Diamond Partner

Advanced ADA Compliance

I am working on a website redesign where my client needs their website to have 100% Section 508 compliance and ADA Accessibility AA standards.

I have already reviewed Hubspot's article on ADA compliance.  And that seems very straightforward.

The three biggest issues I am trying to find workarounds for within the Hubspot CMS are:

1. 
No TITLE attributes found for the frames on these pages. Add a TITLE attribute to each FRAME and IFRAME element (e.g. TITLE="Main Content"). Without a TITLE some screen readers read out the FRAME filename, which is usually meaningless.
Specifically the one related to hbspt-forms: <iframe name="target_iframe_bc4212ea-d953-4120-a112-973453f4fbe8_7258" style="display:none;" data-reactid=".hbspt-forms-0.8"></iframe>

2.
This INPUT button has no VALUE attribute and no programmatically determined name. A programmatically determined name allows screen readers to tell the user what the control does.
To add a name do one of the following:
- Add a VALUE attribute saying what the button does
- Add a TITLE attribute
- Add an ARIA-LABELLEDBY attribute (not supported in all screen readers)
- Add an ARIA-LABEL attribute (not supported in all screen readers) Here is the code we believe it is referencing…but the value is not in the source code:

Source Code: (does not contain value attribute)
<div id="hs_form_target_module_1544123412256121_blog_subscribe_3477"></div>

After Page Loads: (does contain value attribute)
<input type="submit" value="Subscribe" class="hs-button primary large" data-reactid=".hbspt-forms-0.5.1.0">

3.
The report also mentions issues with 3rd party IFRAMEs that are hosted on 3rd party servers (we do not have control over this code).  Other than removing the 3rd party IFRAMEs, is there any way to ensure that these are ADA compliant by including value attributes?

Also if anyone has any recommendations for tools that they use for ADA compliance analysis they've used in the past that would be helpful.  Thanks!

14 Replies 14
MHenning1
Contributor

Advanced ADA Compliance

We are also looking for help from Hubspot on how we can add ARIA labels, not just in forms.  

thedss
Member

Advanced ADA Compliance

Does anyone have a solution for this I've been struggling attempting to fix that hubspot forms error messages don't get read on screen readers as they are missing the various aria labels and describedby etc.

Lizzam
Participant

Advanced ADA Compliance

We have the same issues as well. The alerts are not being read by screen readers. We have attempted to address other accessibilities but the validation errors were trickier to handle. 

How to properly code inline error messages.png

stefen
Key Advisor | Partner
Key Advisor | Partner

Advanced ADA Compliance

@seanfarias if you use the form's javascript embed instead of the iframe embed you won't have the missing title issue.

Stefen Phelps, Community Champion, Kelp Web Developer
designdpi
Participant

Advanced ADA Compliance

Hi Stefan, I'm pretty sure I'm using the javascript embed?

<script src="//js.hs-scripts.com/0123456.js" id="hs-script-loader"></script>

But it's this embed that injects the iframe into the page... that's what I thought happened, but I could be wrong?

Nice site btw 🙂

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Advanced ADA Compliance

@designdpi Once you go into the form's options and use the "Unstyled form" option, it will render the html directly on the page instead of inside an iframe. See screenshot:

Screen Shot 2019-07-25 at 8.51.48 AM.png

You will have to get the new embed code once that option is checked.

Stefen Phelps, Community Champion, Kelp Web Developer
designdpi
Participant

Advanced ADA Compliance

Thanks for the heads up Stefan, I'll go take a look now!

0 Upvotes
designdpi
Participant

Advanced ADA Compliance

Hi @jennysowyrda,

I agree with the others here in thinking we are still looking for clarification specifically about Hubspot forms: How could we add accessible ARIA labels to the inputs in the form from Hubspot?


Would appreciate an update on this, as we might have to use another CRM if these 'Accessibility' issues can't be resolved?

Many thanks

PatrickEng
HubSpot Employee
HubSpot Employee

Advanced ADA Compliance

@designdpi,

 

The way we've done it is by adding custom JS files to our pages that put those aria labels in the forms. While this shouldn't be needed in the first place, that might be your best bet until HubSpot updates their forms with these fixes. 

Torivt65
Participant

Advanced ADA Compliance

@PatrickEng Would you mind sharing the javascript that you use? (I can't believe this is still an issue...)

Also, Stefen's solution below no longer seems applicable as the backend options don't match their screenshot.

Thank you!

jennysowyrda
Community Manager
Community Manager

Advanced ADA Compliance

Hi all,

 

Thank you for your patience. I have confirmed with the team that improving this functionality is on their radar. While I do not have a timeline, they are aware of the need here.

 

Thank you,
Jenny

jennysowyrda
Community Manager
Community Manager

Advanced ADA Compliance

Hi @seanfarias,

 

Here are a few resources to help with ADA compliance: 

1. The A11Y Project

2. WAVE tool

3. Improving accessibility

 

Thank you,
Jenny

0 Upvotes
nickkretz
Participant

Advanced ADA Compliance

Hi @jennysowyrda,

 

I also think we are still looking for clarification specifically about Hubspot forms: How could we add accessible ARIA labels to the inputs in the form from Hubspot?

jamespingboard
Member

Advanced ADA Compliance

Hi @jennysowyrda,

 

I think we are still looking for clarification specifically about Hubspot forms: How could we add accessible ARIA labels to the inputs in the form from Hubspot?

 

Best,

James