# \[Accessibility Issue\] Duplicate IDs in rendered content from module snippets

**URL:** <https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013>\
**Category:** CMS Development\
**Created:** [November 16, 2021, 9:39am UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013 "2021-11-16T09:39:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![matt\_scott](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt_scott/32/36038_2.png) [@matt\_scott](https://community.hubspot.com/u/matt_scott)\
**Post date:** [November 16, 2021, 9:39am UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013/1 "2021-11-16T09:39:26Z")

</div>

If i have 2 fields in a module for example a plain text - title and a rich text - text field

```lia-code-sample
{% inline_text field="title" value="{{ module.title }}" %}
{% inline_rich_text field="text" value="{{ module.text }}" %}

```

The content rendered on the page inculdes duplicate IDs:

```lia-code-sample
<div id="hs_cos_wrapper_widget_1632126977537_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_text" data-hs-cos-field="title">Title text here</div>

<div id="hs_cos_wrapper_widget_1632126977537_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_rich_text" data-hs-cos-field="text"><p>Rich Text here.</p></div>

```

The ID just seems to be the module id with an underscore, presumably it should have something after the underscore to make it unique  
This fails on 2 parts firstly it’s not allowed just in general w3c standards although it obviously doesn’t actually break anything  
But the bigger one is it fails accessibility wcag 2.1 specification which is required by law in certain areas and sectors.

> **[Principle 4: Robust - Content must be robust enough that it can be... - Web...](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#ensure-compat-parses)**
>
> 4.1.1 Parsing: In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the...

This needs to be fixed

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [November 16, 2021, 10:13am UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013/2 "2021-11-16T10:13:37Z")

</div>

Hi [@matt\_scott](https://community.hubspot.com/t5/user/viewprofilepage/user-id/64119) ,

I agree that this is an issue, however, you can resolve it yourself for now.

Check out this [post](https://www.stephanieogaygarcia.com/hubspot-website-development/remove-the-wrapper-from-a-field-in-a-hubspot-custom-module) that describes how you can prevent the wrapper from being set. That way, you can define your own wrappers for this module instead.

---

<div class="post-metadata">

**Author:** ![matt\_scott](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt_scott/32/36038_2.png) [@matt\_scott](https://community.hubspot.com/u/matt_scott)\
**Post date:** [November 16, 2021, 10:34am UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013/3 "2021-11-16T10:34:24Z")

</div>

Thanks I did know you can do this but I hoped it would be something hubspot can fix, looks like I’ve got to go through updating all my modules…  
I also thought hubspot recommends using the wrapper so it works better with the visual editor

---

<div class="post-metadata">

**Author:** ![ThemeMajer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thememajer/32/86357_2.png) [@ThemeMajer](https://community.hubspot.com/u/ThemeMajer)\
**Post date:** [November 16, 2021, 5:09pm UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013/4 "2021-11-16T17:09:01Z")

</div>

I hoped it would be something hubspot can fix

[@matt\_scott](https://community.hubspot.com/t5/user/viewprofilepage/user-id/64119) considering the half decade old problems that still exist in this CMS… That’s a hard no.h This is the state of normalcy you can expect with HubSpot development.

If you’re worried about accessibility … Hubspot isn’t the place. No matter how much custom deb you try to do and things you try to fix - which is an entirely uphill battle in this CMS - you still won’t achieve anything of value because there are accessibility problems fundamentally baked in.

---

<div class="post-metadata">

**Author:** ![matt\_scott](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt_scott/32/36038_2.png) [@matt\_scott](https://community.hubspot.com/u/matt_scott)\
**Post date:** [November 17, 2021, 11:23am UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013/5 "2021-11-17T11:23:29Z")

</div>

So much for accessibility is not a feature…

> **[Accessibility - HubSpot docs](https://developers.hubspot.com/docs/cms/best-practices/improve-existing-sites/accessibility)**
>
> HubSpot is committed to making sure that we have provided the necessary tools to help you make your content accessible. While not a definitive guide, here are some steps that you can take to make your content accessible.

I’ve also found date picker fields in forms are also not keyboard accessible, they require a mouse to use, my workaround is to hide the field in the form settings then unhide it with js and turn it into a native browser date field. That’s not a solution that’s a hack!

---

<div class="post-metadata">

**Author:** ![ThemeMajer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thememajer/32/86357_2.png) [@ThemeMajer](https://community.hubspot.com/u/ThemeMajer)\
**Post date:** [November 17, 2021, 2:54pm UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013/6 "2021-11-17T14:54:33Z")

</div>

[@matt\_scott](https://community.hubspot.com/t5/user/viewprofilepage/user-id/64119)

Lol… That’s the least of the problems you’ll find when you start digging. Like I said hubspot… Not the place for accessibility. Or really anything of value at all with regards to web development.

Their implementations are exceedingly novice and the ideas by the product team are even worse.

Don’t even get me started on performance and the remarkably poorly optimized JavaScript bundles served for things such as forms.

Oh and what’s really funny… You know that “don’t use jquery” toggle in site settings?

Some of their included JavaScript bundles load an ancient version of jquery. So even if you try to remove jquery from a HubSpot website you still can’t.

Each of those bundles is also 500kb. Even gzipped that’s still 150kb roughly. PER FEATURE. Absolite garbage. All of it.

---

<div class="post-metadata">

**Author:** ![matt\_scott](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt_scott/32/36038_2.png) [@matt\_scott](https://community.hubspot.com/u/matt_scott)\
**Post date:** [November 18, 2021, 10:37am UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013/7 "2021-11-18T10:37:45Z")

</div>

I’ve not had that many issues, and not sure I’ve seen jquery added anywhere it shouldn’t, So i’ve had some input from someone at hubspot and firstly they are now looking into this to fix it  
Also you can change the id by adding text in quotes after the initial tag e.g.

> * * *
> 
> * * *

`{% inline_text "tag-id-here" field="title" value="{{ module.title }}" %}`

This will render as the current id with the tag name after the underscore e.g.

`<div id="hs_cos_wrapper_widget_1632126977537_tag-id-here" ...`

This will solve general modules but not within a repeater.  
I did flag repeaters with them and they said they will fix for that too when they implement their solution

---

<div class="post-metadata">

**Author:** ![ThemeMajer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thememajer/32/86357_2.png) [@ThemeMajer](https://community.hubspot.com/u/ThemeMajer)\
**Post date:** [November 18, 2021, 6:47pm UTC](https://community.hubspot.com/t/accessibility-issue-duplicate-ids-in-rendered-content-from-module-snippets/47013/8 "2021-11-18T18:47:34Z")

</div>

\*\*[@matt\_scott](https://community.hubspot.com/t5/user/viewprofilepage/user-id/64119)\*\*I’m aware of the “fix” you listed. My point was largely the fact it exists in the first place is… Lacking. Considering its level of triviality. It shows a lack of rudimentary testing. Which, again,is a repeated pattern if behavior. Whilst most development certainly occurs in an agile fashion having a repeated pattern of behavior at the core of a product isn’t quality.

This is precisely the reason development paradigms such as TDD exist.

Regardless, as long as it works for you and you feel helped that’s what’s important I suppose.