Issue: Link missing a text alternative - mobile navigation

This article specifically pertains to an issue found in the legacy templates with the mobile navigation menu.

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. This issue may be found on every page in your website. More than likely, it is due to the image used to activate the mobile menu in the 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 the NMSU logo that is linked in the mobile navigation is missing a text alternative. Updating the link text alternative might be handled centrally depending on the template version you are using.

Adding a text alternative for the mobile navigation is set in the mobile-nav block 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 mobile-nav block. Click Mobile Nav. The block “mobile-nav” appears.

4. Point your mouse over the “mobile-nav” block until the hand cursor appears. Wait a few seconds until the tool tip appears beneath it. The tooltip will provide the file path to the mobile-nav asset in Cascade.

5. Take note of the file path.

   1. If the file path starts with _Shared Assets, then this fix has been implemented centrally. All you need to do is re-publish your page(s) and proceed to part 3 to verify successful remediation in Siteimprove.
      
      

       

   2. If the file path starts with the title of your site, then you need to implement this fix for your site. Proceed to step 6.
      
      

      
      
      

6. After you have determined that the mobile-nav block is located within your site files, click the mobile-nav block to go to the asset in your site.
   
   

   
   Note the breadcrumb trail for the mobile-nav block 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 XML Block: mobile-nav page, click Edit. The advanced editor window will open.

    

2. Click on the Toggle Fullscreen Mode icon to expand the code view.
   
   

    

3. On or around line 7 of the code, locate the <a> tag highlighted in the Siteimprove page report and in the Cascade CMS advanced editor.

4. Copy the aria-label from the code block below and add it to the <a> tag.

   aria-label="Visit NMSU homepage"

The <a> tag should now look like this:

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

    

6. After you have successfully saved the XML code block, 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.