Back to updates
Enhancement
Layout & design

Detect repetitive IDs within the elements of your website

You can now use the audit panel to detect ID duplications within symbol instances to avoid potential bugs.

Detect repetitive IDs within the elements of your website

<p>Designers can now identify duplicates on a page and act on them before issues occur. This means no more time wasted debugging custom code, trying to find all the elements with the same ID, or running the risk of degrading the accessibility quality of your published sites.</p><p>Designers use unique identifiers (ID) when optimizing sites for accessibility or extending a site's functionality through custom code – this includes linking, scripting, or styling (with CSS). That's why it's considered best practice in web development to ensure each element ID is unique across an entire webpage (i.e., each ID should be used on only one element)</p><p>Using the same ID on more than one element may cause custom code or screen readers to malfunction by only targeting the first element with the shared ID. While modern browsers typically accept duplications of an ID associated with an element, it still presents a risk that designers (and end-site visitors, by extension) are exposed to potential bugs on published websites.&nbsp;</p><p>That’s why we’ve included a new accessibility check within the Audit panel to detect IDs on each page and help guide designers toward correcting duplicate IDs.&nbsp;&nbsp;</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1600px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1600px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d62c4Sl4nWiadbzV1SkwPxn09muP9Y4SZ-D24qL0n60IdtWqD5OpOyEGjDRLrHNsRNWFnYSeSoHEv3fo8TUNsukIHXjAheAvTt6ll6CcC3vmkCP6ACq3fXLtZxpMgtIjqQ2bju3FGaKT0n1jAOZJA.png>" width="auto" height="auto" loading="auto" alt="Use the Audit panel to detect repetitive IDs that occur within symbol instances"></div><figcaption>Use the Audit panel to detect repetitive IDs that occur within symbol instances</figcaption></figure><p>Need a refresher on the audit panel? Then be sure to check out our newly refreshed <a href="<https://university.webflow.com/lesson/audit-panel>">Webflow University article</a>. While developing beautiful websites that are also at their optimal performance usually requires a lot of quality checks (and plenty of patience), it’s always a plus when you’re given some proactive guidance and feedback as well.</p>


Launched on
May 24, 2022
Category
Layout & design

Related updates

Truncate long content with text overflow

Truncate long content with text overflow

Learn more
Text Decoration Styles

Text Decoration Styles

Learn more
New variable types: Number and Percentage

New variable types: Number and Percentage

Learn more
Component style variants is now available

Component style variants is now available

Learn more
Manage variables at scale with reordering and bulk actions

Manage variables at scale with reordering and bulk actions

Learn more
Drop shadow filters

Drop shadow filters

Learn more