# Duplicate ID attributes in rendered HTML

**URL:** <https://community.hubspot.com/t/duplicate-id-attributes-in-rendered-html/78636>\
**Category:** CMS Development\
**Tags:** free\
**Created:** [April 4, 2023, 12:31am UTC](https://community.hubspot.com/t/duplicate-id-attributes-in-rendered-html/78636 "2023-04-04T00:31:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Minccisco](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Minccisco](https://community.hubspot.com/u/Minccisco)\
**Post date:** [April 4, 2023, 12:31am UTC](https://community.hubspot.com/t/duplicate-id-attributes-in-rendered-html/78636/1 "2023-04-04T00:31:31Z")

</div>

Hi there!

I’m working on some accessibility optimizations using axe DevTools (as recommended in HubSpot CMS for Developers II: Best Practices), and I’ve come across an odd thing. It seems that the rendered HTML is not correctly outputting the IDs of my modules, resulting in duplicate IDs and therefore failing axe DevTools scans.

Main Template HTML/HubL:

```lia-code-sample
<body>
 <main class="content">
 {% dnd_area "body_dnd_area" %}
 {% include_dnd_partial "HeroStrip" path='/practicum-theme-ii/sections/heroSection.html' context={} 
 %}
 {% end_dnd_area %}
 </main> 
</body>

```

Section HTML/HubL:

```lia-code-sample
{% dnd_section "dnd" 
vertical_alignment='MIDDLE',
 max_width=1080,
 min_width=900
%}
 {% dnd_column "col1" offset=0; width=6; %}
 {% dnd_row "row1" offset=0; width=12;%}
 {% dnd_module "hero-image"
 path="/practicum-theme/modules/heroImage.module"
 %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_column "col2" offset=6; width=6;%}
 {% dnd_row "row2" offset=0; width=12;%}
 {% dnd_module "hero-text"
 path="/practicum-theme/modules/heroText.module"
 %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}

```

heroText Module HTML/HubL:

```lia-code-sample
<div class="stripTextModule">
 <div class="stripContent"> 
 <div class="stripText">
 {% inline_rich_text "hello-there" field="hero_sub_heading" value="{{ module.hero_sub_heading }}" %}
 {% inline_rich_text "general-kenobi" field="hero_text" value="{{ module.hero_text }}" %}
 </div>
 </div>
</div>

```

However, the rendered HTML uses generic IDs as below…

`id="hs_cos_wrapper_body_dnd_area-dnd_partial-2-module-4_" `

```lia-code-sample
 <div id="hs_cos_wrapper_body_dnd_area-dnd_partial-2-module-4_" 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="hero_sub_heading"><h3>Hero Sub Heading (H3)</h3></div>↩
 <div id="hs_cos_wrapper_body_dnd_area-dnd_partial-2-module-4_" 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="hero_text"><p>Lorem ipsum.........

```

In the above code snippet, you can see that **id=“hs\_cos\_wrapper\_body\_dnd\_area-dnd\_partial-2-module-4\_”** is used twice, which is causing the flag on axe DevTools.

A similar thread I found is below:

[https://community.hubspot.com/t5/CMS-Development/Accessibility-Issue-Duplicate-IDs-in-rendered-content-from/m-p/526833](https://community.hubspot.com/t5/CMS-Development/Accessibility-Issue-Duplicate-IDs-in-rendered-content-from/m-p/526833)

I also tried adding the “no\_wrapper” parameter as outlined [here](https://www.stephanieogaygarcia.com/hubspot-website-development/remove-the-wrapper-from-a-field-in-a-hubspot-custom-module), resulting in the following module code, which, when rendered, still did not solve the issue.

```lia-code-sample
<div class="stripTextModule">
 <div class="stripContent"> 
 <div class="stripText">
 {% inline_rich_text "hi" field="hero_sub_heading" value="{{ module.hero_sub_heading }}", no_wrapper=True %}
 {% inline_rich_text "hello" field="hero_text" value="{{ module.hero_text }}", no_wrapper=True %}
 </div>
 </div>
</div>

```

Does anyone have any idea how to fix this? I’m banging my head against it and I’m not sure if it’s me or Hubspot/HubL itself!

---

<div class="post-metadata">

**Author:** ![BJune](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bjune/32/198240_2.png) [@BJune](https://community.hubspot.com/u/BJune)\
**Post date:** [April 4, 2023, 7:10am UTC](https://community.hubspot.com/t/duplicate-id-attributes-in-rendered-html/78636/2 "2023-04-04T07:10:21Z")

</div>

Hi [Minccisco](https://community.hubspot.com/t5/user/viewprofilepage/user-id/547961),

It seems like the rendered HTML is not correctly outputting the IDs of the modules, resulting in duplicate IDs and failing axe DevTools scans. The code snippet shows that “id=hs\_cos\_wrapper\_body\_dnd\_area-dnd\_partial-2-module-4\_” is used twice, causing the flag on axe DevTools. Adding the “no\_wrapper” parameter may not solve the issue. It is suggested to try renaming the IDs of the modules to be unique, using a unique identifier or index to distinguish them. This should help fix the accessibility issue of duplicate ID attributes in the rendered HTML.

Regards[,](https://trafficriderapp.com/traffic-rider-mod-apk/)

Bryce

---

<div class="post-metadata">

**Author:** ![Minccisco](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Minccisco](https://community.hubspot.com/u/Minccisco)\
**Post date:** [April 4, 2023, 11:22pm UTC](https://community.hubspot.com/t/duplicate-id-attributes-in-rendered-html/78636/3 "2023-04-04T23:22:31Z")

</div>

Hi Bryce! Thanks for replying!

So I thought I’d assigned unique names? At the moment they’re set as “ **hello-there** ” and “ **general-kenobi** ”… is there another way to do this?

```lia-code-sample
{% inline_rich_text "hello-there" field="hero_sub_heading" value="{{ module.hero_sub_heading }}" %}

{% inline_rich_text "general-kenobi" field="hero_text" value="{{ module.hero_text }}" %}

```

Please let me know if I’ve done it wrong haha!

Thanks again!