Issue: Link missing a text alternative - Carousel

This article specifically pertains to an issue found in the legacy templates with the carousel.

Links represented by images or icons can be problematic for visitors who are blind or have low vision. The text alternative should describe the link's purpose — or what visitors can expect to find after they click it. More than likely this issue is due to the carousel navigation elements used to activate the slides in legacy templates.

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.

Open

Take note of the highlighted code in your browser window. The code highlighted indicates that carousel indicators are missing a text alternative.

Adding a text alternative for the carousel indicators is set in the carousel format in the site template.

Instructions

1. In Cascade CMS, go to the page identified in the page report. In the sample above, the “presentation template” page is selected.

2. Click the …more drop down menu and select Show Regions. The Region Assignments sidebar will appear.
   
   

   Open

   

    

3. The Region Assignments provide a map of each region created in a template. We have already identified the text alternative issue in the carousel format. Click Carousel. The format “carousel” appears.
   
   

4. Click the carousel format to go to the asset in your site.

   
   Note the breadcrumb trail for the carousel format above. It is located inside the _cascade folder for your site. 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.

Add the text alternative for the mobile-nav block

1. On the Velocity Format: carousel page, click Edit. The advanced editor window will open.

2. On or around line 36 of the code, locate the <!--Controls --> comment in the Cascade CMS editor.
   
   

3. Copy the aria-label from the code block below and add it to both <span> tags.

   aria-hidden="true"

The <span> tags should now look like this:

5. Next, you will add an additional <span> that will provide instructions to screen readers. Copy the code from the block below and paste it after the closing </span> tag with the "icon-prev" class.

   <span class="sr-only">Previous</span>

6. Copy the code from the block below and paste it after the closing </span> tag with the "icon-next" class.

   <span class="sr-only">Next</span>

The final result should look like this:

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

8. 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.