Aria Labels

Develop, Build & Integrate CMS Development
, ,
1

Hi as part of an accessibility project making an existing site compliant I need to add aria tags to Hubspot form fields as the input elements with a placeholder attribute, without an aria-assigned role are not allowed.

Screenshot 2026-04-02 160433.png
Screenshot 2026-04-02 160433.png639×170 14.5 KB

This is my code:

<div class="footer-subscribe-form" aria-label="Subscribe for news and latest updates">
 {% blog_subscribe "blog_subscription_form" select_blog="default", no_title=true, response_message="Thanks for Subscribing!", label="Blog Email Subscription", overrideable=False, no_wrapper=true %}
 </div>

The code doesn’t have <input> as this is added by Hubspot with the {% blog_subscribe command.
How do I add aria-labelledby or aria-label when there is no <input> entry in Hubspot?
Thanks

2

Also there is the same issue with Hubspot menus.
This is the code before Hubspot pulls in the menu built from the Hubspot Navigation menu:

<div class="footer-bottom">
 {% menu "footer_menu"
 site_map_name="Footer - 2022",
 overrideable=False,
 root_type="site_root",
 flyouts="false",
 max_levels="2",
 flow="horizontal",
 label="Footer Links Menu"
 %}
 </div>

This is the code from the live website:

<div class="footer-bottom">
 <span id="hs_cos_wrapper_footer_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="menu"><div id="hs_menu_wrapper_footer_menu" class="hs-menu-wrapper active-branch no-flyouts hs-menu-flow-horizontal" role="navigation" data-sitemap-name="Footer - 2022" data-menu-id="210276383116" aria-label="Navigation Menu" style="position: relative;">
 <ul role="menu" class="active-branch">
 <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children active-branch" role="none"><a href="javascript&colon;;" aria-haspopup="true" aria-expanded="false" role="menuitem">Platform</a>
 <ul role="menu" class="hs-menu-children-wrapper active-branch">
 <li class="hs-menu-item hs-menu-depth-2 active active-branch" role="none"><a href="https://www.360insights.com/platform" role="menuitem"><span class="link">Platform Overview</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/platform/security" role="menuitem"><span class="link">Platform Security</span></a></li>
 </ul></li>
 <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none"><a href="javascript&colon;;" aria-haspopup="true" aria-expanded="false" role="menuitem">Solutions</a>
 <ul role="menu" class="hs-menu-children-wrapper">
 <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="none"><a href="javascript&colon;;" role="menuitem"><strong style="margin-top: 7px;display: block;">The Experience Suite</strong></a>
 <ul role="menu" class="hs-menu-children-wrapper">
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-experience-suite" role="menuitem"><span class="link">Overview</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-experience-suite/experience-hub" role="menuitem"><span class="link">Experience Hub</span></a></li>
 </ul></li>
 <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="none"><a href="javascript&colon;;" role="menuitem"><strong style="margin-top: 7px;display: block;">The Incentives Suite</strong></a>
 <ul role="menu" class="hs-menu-children-wrapper">
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-incentives-suite" role="menuitem"><span class="link">Overview</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-incentives-suite/b2b-rebates" role="menuitem"><span class="link">B2B Rebates</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-incentives-suite/comarketing-funds-management" role="menuitem"><span class="link">Co-Marketing Funds</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-incentives-suite/consumer-promotions" role="menuitem"><span class="link">Consumer Promotions</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-incentives-suite/incentives-loyalty-rewards" role="menuitem"><span class="link">Incentives, Loyalty & Rewards</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-incentives-suite/pricing-promotions" role="menuitem"><span class="link">Pricing & Promotions</span></a></li>
 </ul></li>
 <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="none"><a href="javascript&colon;;" role="menuitem"><strong style="margin-top: 7px;display: block;">The Services Suite</strong></a>
 <ul role="menu" class="hs-menu-children-wrapper">
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-services-suite" role="menuitem"><span class="link">Overview</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-services-suite/creative-design" role="menuitem"><span class="link">Creative & Design</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-services-suite/operations-delivery" role="menuitem"><span class="link">Operations & Delivery</span></a></li>
 <li class="hs-menu-item hs-menu-depth-3" role="none"><a href="https://www.360insights.com/ecosystem-services-suite/optimization-analytics" role="menuitem"><span class="link">Optimization & Analytics</span></a></li>
 </ul></li>
 </ul></li>
 <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none"><a href="javascript&colon;;" aria-haspopup="true" aria-expanded="false" role="menuitem">Ecosystem</a>
 <ul role="menu" class="hs-menu-children-wrapper">
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://ecosystem.360insights.com" role="menuitem" target="_blank" rel="noopener"><span class="link">360insights Ecosystem</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://ecosystemsolutions.360insights.com/t/solution-provider-and-technology" role="menuitem" target="_blank" rel="noopener"><span class="link">Technology</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://ecosystemsolutions.360insights.com/t/solution-provider-and-expert-services" role="menuitem" target="_blank" rel="noopener"><span class="link">Expert Services</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://ecosystemsolutions.360insights.com/t/solution-provider" role="menuitem" target="_blank" rel="noopener"><span class="link">Solution Providers</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://ecosystem.360insights.com/join-our-ecosystem" role="menuitem" target="_blank" rel="noopener"><span class="link">Join Our Ecosystem</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://engage.360insights.com/" role="menuitem" target="_blank" rel="noopener"><span class="link">Login</span></a></li>
 </ul></li>
 <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none"><a href="javascript&colon;;" aria-haspopup="true" aria-expanded="false" role="menuitem">Resources</a>
 <ul role="menu" class="hs-menu-children-wrapper">
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/knowledge-library" role="menuitem"><span class="link">All Resources</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/knowledge-library?/product-resources" role="menuitem"><span class="link">View by Product</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/knowledge-library?/content-type" role="menuitem"><span class="link">View by Content Type</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/knowledge-library?/business-outcomes" role="menuitem"><span class="link">View by Business Outcome</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/knowledge-library?/blog" role="menuitem"><span class="link">Blog</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/knowledge-library?/case-studies" role="menuitem"><span class="link">Case Studies</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/knowledge-library?/events" role="menuitem"><span class="link">Events</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/glossary" role="menuitem"><span class="link">Industry Glossary</span></a></li>
 </ul></li>
 <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none" style="position: relative;"><a href="javascript&colon;;" aria-haspopup="true" aria-expanded="false" role="menuitem">About</a>
 <ul role="menu" class="hs-menu-children-wrapper">
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="javascript&colon;;" role="menuitem"><strong style="margin-top: 7px;display: block;">360insights</strong></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/about-us" role="menuitem"><span class="link">About 360insights</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/meet-the-leadership-team" role="menuitem"><span class="link">Meet Leadership</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/knowledge-library?/inside-360" role="menuitem"><span class="link">Newsroom</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/about-us#locations" role="menuitem"><span class="link">Our Locations</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="javascript&colon;;" role="menuitem"><strong style="margin-top: 7px;display: block;">360people</strong></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/careers#careersListing" role="menuitem"><span class="link">Careers</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/life360#awards" role="menuitem"><span class="link">Awards</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/life360" role="menuitem"><span class="link">Life@360</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/deib" role="menuitem"><span class="link">DEIB</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://www.360insights.com/360cares" role="menuitem"><span class="link">360cares</span></a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="javascript&colon;;" role="menuitem"></a><a href="https://imaeurope.com/" target="_blank"> <img src="https://www.360insights.com/hs-fs/hubfs/_2022/logos/partner-logos/IMA-member-logo_2025.png?width=120&height=120&name=IMA-member-logo_2025.png" alt="IMA Member 2025" width="120" height="120" style="margin-top: 20px;" srcset="https://www.360insights.com/hs-fs/hubfs/_2022/logos/partner-logos/IMA-member-logo_2025.png?width=60&height=60&name=IMA-member-logo_2025.png 60w, https://www.360insights.com/hs-fs/hubfs/_2022/logos/partner-logos/IMA-member-logo_2025.png?width=120&height=120&name=IMA-member-logo_2025.png 120w, https://www.360insights.com/hs-fs/hubfs/_2022/logos/partner-logos/IMA-member-logo_2025.png?width=180&height=180&name=IMA-member-logo_2025.png 180w, https://www.360insights.com/hs-fs/hubfs/_2022/logos/partner-logos/IMA-member-logo_2025.png?width=240&height=240&name=IMA-member-logo_2025.png 240w, https://www.360insights.com/hs-fs/hubfs/_2022/logos/partner-logos/IMA-member-logo_2025.png?width=300&height=300&name=IMA-member-logo_2025.png 300w, https://www.360insights.com/hs-fs/hubfs/_2022/logos/partner-logos/IMA-member-logo_2025.png?width=360&height=360&name=IMA-member-logo_2025.png 360w" sizes="(max-width: 120px) 100vw, 120px"> </a></li>
 <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="javascript&colon;;" role="menuitem"></a><a href="https://www.crossbeam.com/" target="_blank"> <img src="https://www.360insights.com/hs-fs/hubfs/_2022/awards/2025/Crossbeam_Partner_Badge_Strategic_Alliance.png?width=120&height=120&name=Crossbeam_Partner_Badge_Strategic_Alliance.png" alt="Crossbeam Strategic Alliance Partner of the Year" width="120" height="120" style="margin-top: 20px;" srcset="https://www.360insights.com/hs-fs/hubfs/_2022/awards/2025/Crossbeam_Partner_Badge_Strategic_Alliance.png?width=60&height=60&name=Crossbeam_Partner_Badge_Strategic_Alliance.png 60w, https://www.360insights.com/hs-fs/hubfs/_2022/awards/2025/Crossbeam_Partner_Badge_Strategic_Alliance.png?width=120&height=120&name=Crossbeam_Partner_Badge_Strategic_Alliance.png 120w, https://www.360insights.com/hs-fs/hubfs/_2022/awards/2025/Crossbeam_Partner_Badge_Strategic_Alliance.png?width=180&height=180&name=Crossbeam_Partner_Badge_Strategic_Alliance.png 180w, https://www.360insights.com/hs-fs/hubfs/_2022/awards/2025/Crossbeam_Partner_Badge_Strategic_Alliance.png?width=240&height=240&name=Crossbeam_Partner_Badge_Strategic_Alliance.png 240w, https://www.360insights.com/hs-fs/hubfs/_2022/awards/2025/Crossbeam_Partner_Badge_Strategic_Alliance.png?width=300&height=300&name=Crossbeam_Partner_Badge_Strategic_Alliance.png 300w, https://www.360insights.com/hs-fs/hubfs/_2022/awards/2025/Crossbeam_Partner_Badge_Strategic_Alliance.png?width=360&height=360&name=Crossbeam_Partner_Badge_Strategic_Alliance.png 360w" sizes="(max-width: 120px) 100vw, 120px"> </a></li>
 </ul></li>
 </ul>
<div data-test-id="element-finding-screenshot-uid_674210z5ztl" data-ae_invis="true" id="level-access-extension-element-outline-finding-screenshot-uid_674210z5ztl" data-level-access-highlight="true" style="display: block; box-sizing: border-box; position: absolute; top: 0px; left: 0px; height: 724px; width: 1129px; margin: 5px; pointer-events: none;"><template shadowrootmode="open"><div class="outline" style="z-index: 300000;">
 <svg id="outline-container" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style="overflow: visible">
 <svg id="outline" width="1129" height="724" style="overflow: visible">
 <rect width="100%" height="100%" style="fill-opacity: 0; stroke-width: 8px; stroke: white"></rect>
 <rect width="100%" height="100%" style="fill-opacity: 0; stroke-width: 4px; stroke: #a92579; stroke-dasharray: 8;"></rect>
 </svg>
 <svg height="60" width="300px" x="-30" y="-15" id="element-annotation-svg-finding-screenshot-uid_674210z5ztl">

 false
 </svg>
 </svg>
 </div></template></div></div></span>
 </div>

How do I add Aria roll=“” and aria-labelledby / aria-label when the actual menu code isn’t in the html to edit?
Thanks

3

Hey @Woodsy,
Thanks for posting in the Community!
I’d like to tag in some top experts to see what insight they may have on how we can set this up. @Anton, @alyssamwilie, and @SteveHTM - any thoughts here?
Shane, Senior Community Moderator

4

@Woodsy - For the question on adding extra label information to a form field, I’d be looking at form customization - a subject covered in depth here: https://developers.hubspot.com/docs/cms/start-building/features/forms/legacy-forms.

Blog subscription is, as far as my experience goes, just a variant on the form submission mechanics.

The HubSpot form encapsulates the <input> mechanism with logic that creates a lot of added value - I suggest that it may be problematic to work around that.

Hope this is helpful.

Steve