Issue: Page zoom is restricted

If it isn't possible to zoom in, visitors with low vision may be unable to read your content. According to WCAG, visitors should be allowed to increase text size from their browser to at least 200%. This issue may be found on every page in your website. Fixing this issue and republishing your site will improve your score substantially.

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

Defining viewport parameters is set in the <meta> tags 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 page zoom issue in the head files. Click Head Files. The block “head-files” will appear.
   
   

4. Each mapped region is hyperlinked to the asset. Click the head-files block to go to the asset in your site.
   
   

    

   
   Note the breadcrumb trail for the head-files block. 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.

Update the Meta Tag

1. On the XML Block: head-files 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 3 of the code, locate the content meta tag highlighted in the Siteimprove page report and select in your Cascade CMS advanced editor.

4. Copy the content meta tag code block below and replace the meta tag in Cascade CMS.

   <meta content="width=device-width, initial-scale=1, shrink-to-fit=yes, user-scalable=yes" name="viewport"/>

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

    

6. Verify that your XML block was saved. If your XML block includes the Draft button next to the title, this means you have an error in your code. Usually, this means you have forgotten a closing quote or slash.
   
   

   1. If your XML was not saved correctly, you will see an error message that states “asset failed validation” when you click the Submit button.
      
      

   2. Click Edit.

   3. Correct your code and repeat step 5.

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