...
❗ It is recommended that you work with two browser windows open (Cascade CMS and Siteimprove) as you complete this process.
...
1️⃣ 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.
...
| Note |
|---|
If the text highlighted in your page report does not match the |
Adding a text alternative for the mobile navigation is set in the mobile-nav block in the site template.
Instructions
In Cascade CMS, go to the page identified in the page report. In the sample above, the “presentation template” page is selected.
Click the …more drop down menu and select Show Regions. The Region Assignments sidebar will appear.
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.
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.
Take note of the file path.
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.
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.
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.
...
2️⃣ Add the text alternative for the mobile-nav block
On the XML Block: mobile-nav page, click Edit. The advanced editor window will open.
Click on the Toggle Fullscreen Mode icon to expand the code view.
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.Copy the aria-label from the code block below and add it to the <a> tag.
Code Block aria-label="Visit NMSU homepage"
...
Click Preview Draft and then Submit to save to Cascade CMS.
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.
...
3️⃣ Verify successful remediation
Return to the Siteimprove to recheck the page.
You can recheck the page from the page report window or the list of pages in the issue overview page.
...