Issue: Element IDs are not unique

Sometimes it's important to know how different page elements fit together. Whereas sighted visitors may be able to get this information from the visual layout, visitors using screen readers rely on page elements being marked up correctly in the HTML.

It is recommended that you work with two browser windows open (Cascade CMS and Siteimprove) as you complete this process.

Locate the code to fix

When viewing a page report in Siteimprove, the default view shows page content. When you click on the
Show HTML button, Siteimprove will highlight the issue location in the code.

When working with this issue, your page report may look very similar to the one displayed below. The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. Note that the occurrences included in the list below contain multiple IDs that are repetitive.

Open

Working with Element ID’s requires editing multiple template formats within your site.

Instructions

Open

1. In your Cascade CMS site, select the _cascade folder.

2. Select the formats folder.

3. Select the _shared folder. This folder contains all of the main formats that Cascade CMS uses to populate sections of the legacy template.
   
   Files in the _cascade folder control a specific region on every page in your site. Making a change to this asset will require you to re-publish your pages in your site for the changes to take effect.

Update Cascade Format Files

Edit the Feature-Text Velocity Format

1. In the _shared folder, select feature-text.

2. On the Velocity Format:feature-text page, click Edit. The edit format window opens.
   
   

3. On or around line 6 of the code, locate the <section> HTML tag and select the text id="theme" and delete it.
   
   

    

4. On or around line 9 of the code, locate the <div> HTML tag and select the text id="content" and delete it.
   
   

    

5. Click Preview Draft and then Submit to save to Cascade CMS.
   
   

    

6. After you have successfully saved the velocity format, go to the page in Cascade CMS that was identified in the Siteimprove page report and publish the page.

Edit the Footer-Links Velocity Format

1. In the _shared folder, select footer-links.

2. On the Velocity Format:footer-links page, click Edit. The edit format window opens.

3. On or around line 11 of the code, locate the <ul> HTML tag and select the text id="General" and delete it.

    

4. Click Preview Draft and then Submit to save to Cascade CMS.

5. After you have successfully saved the velocity format, go to the page in Cascade CMS that was identified in the Siteimprove page report and publish the page.

Verify successful remediation

1. Return to the Siteimprove to recheck the page.

2. You can recheck the page from the page report window or the list of pages in the issue overview page.
   

3. When you return to the issues overview page in Siteimprove, the page you fixed will no longer be listed for this particular issue.