Pope Tech: Run an Accessibility Scan on a UMN Website

Pope Tech is a website accessibility scanning tool that can crawl websites and report back on accessibility errors and issues.

Logging in to Pope Tech

If you need access to Pope Tech, contact the Group Manager(s) for your unit. If you do not know who your Group Manager is, please email [email protected].

1. Go to the Pope Tech login page.
2. Type your UMN email address. 
   • System Campus users must enter their email address as "@umn.edu" (e.g. [email protected] would be entered as [email protected] in Pope Tech). 
   • A radio button to log in with SSO will appear:
     
3. Keep the SSO radio button selected and click the Login button. Pope Tech will authenticate with Shibboleth and you should be directed to your Dashboard view:
   

Understanding Your Role Permissions in Pope Tech

There are two roles in the UMN Pope Tech instance. Each role has access to do certain tasks:

• Content Contributors
  • Add Your Website(s) to Pope Tech
  • Run crawls and scans of websites
  • View scan results
    • Can dismiss individual results
  • Create reports
  • Schedule website scans 
• Group Manager
  • All of the above access and tasks Content Contributors can do
  • Bulk dismiss a result everywhere it appears on a website
  • Create and manage groups
  • Manage Pope Tech access for your unit

For questions or issues with Pope Tech, please contact your Group Manager or [email protected].

Additional Resources

Learn more about digital accessibility for websites.

• Enroll in Digital Accessibility: Foundations to begin your learning. Once you have taken Digital Accessibility: Foundations, you will be eligible for any of the other courses in the program.
• If you have already taken the Digital Accessibility: Foundation course, you can enroll in Digital Accessibility: Web Content to learn specific aspects of digital accessibility to use when creating websites.

Group Managers have access in Pope Tech to create and organize content contributors into groups. Groups are used to organize your websites. Users can be assigned to groups, so they only have access to the websites in their group. Read Create and Manage Groups to learn how groups work, potential group strategies, and how to set up and manage your groups.

You can also watch Groups overview (video) or Create, manage, and use groups (video).

You will need to add your website to Pope Tech before the tool can crawl and scan your site. First time users are encouraged to add their websites individually to see the entire process more quickly. Websites can be added to Pope Tech through a mass import with a CSV file. 

Website Regions separate a website into two region types: Template regions and Content regions.  

• Template region -  Elements that are repeated on multiple pages (such as headers, footers, etc) and often cannot be modified by contributors.

• Content region -  Elements that are different on each page (often the body of the page).

Table of Contents:

• About Website Templates
  • What are the use cases for this feature?
  • Who has permissions for this feature?
  • What does this feature do?
• Creating Website Templates
• Adding or Removing Web Pages from Website Templates
• Additional Information

About Website Templates

What are the use cases for this feature?

This feature is helpful for two reasons:

1. Users who can only change content on a website, but not headers/footers and other Template region content, can specifically view accessibility issues that are within their control.
2. Site owners and developers can hone in on accessibility issues that are part of your website's Template region, which affect multiple pages. Addressing these issues can have a big impact on the overall accessibility of your site.

Who has permissions for this feature?

Both Content Contributors and Group Managers have access to setup and modify website templates within Pope Tech.

What does this feature do?

Creating a website template is how you tell Pope Tech what part of your website is the template region, or what's the same on multiple pages, and what part of your website is the content region, or what changes on every page.  Setting up website templates in Pope Tech allows you to filter results of future scans based on whether errors are in the template region or content region.

You can set up multiple website templates for a single website within Pope Tech if the wrapper around the content region is not consistent on all of your pages.

For example, in the screenshot below, there are two website templates: a College template and a Calendar template. The wrapper, or template, around the content is different on college and calendar pages, so each has its own template for the Template region. The college template may be using the ID "content" for the content region whereas the calendar pages may be using the ID "calendar" for the content region.

Creating Website Templates

To create a website template, you need to know the following:

• The Content Area - The HTML class or ID of the container that wraps around the content region. If your website doesn't have a defined wrapper for your content, the Website Region feature will not work.
  • For most Drupal sites, this is "content" (without the quotes).  If your site is highly customized, you may need to consult your developer(s).

• The Page Matcher - Page Matcher(s) tell Pope Tech what pages or directories the website template is on. Is the template applied to all pages on your website or does it only apply to pages in a specific part of your website like the calendar template example above?
  • For most Drupal sites, the template can typically be used for all pages.  If your site is highly customized, you may need to consult your developer(s).

Once you have these, you're ready to create your website template:

1. In the left main menu, select Websites.
2. Select the Actions (>>) icon for the website you want to create a website template for.
3. Scroll to the bottom of the page to see the Pages and Templates widget.
4. Select the Templates tab and select New.
   
5. Enter the required Name for your template.
6. Under Content Areas, select the Type (class or id) and enter the identifier. You won't include "." or "#" before the identifier.  
   • On most Drupal sites, you can typically choose ID as the type and then type "content" (without the quotes) in the Identifier field.  If your site is highly customized, you may need to consult your developer(s). 
7. Under Page Matchers, select the Type (pattern or exact) and enter in the path. For pattern type paths:
   • "/" would apply this template to the entire website.
     • For most Drupal sites, select Pattern and then enter "/" (without the quotes) in the path field. If your site is highly customized, you may need to consult your developer(s).
   • "/calendar" would apply this template to all the pages that have the "/calendar" path.
8. Select Add existing pages that match? to add pages that existed before the template was created.
   

You've created a website template that separates accessibility results by template region and content region.  

• The scans you did before will not sort the results into these regions. You will need to rescan any previous data to see results separated out by template and content.

Adding or Removing Web Pages from Website Templates

To manually add already existing web pages to a website template:

1. On the Edit Website page for that website, scroll down to the Pages and Templates widget. Make sure you're on the Pages tab.
2. Using the Template Filter drop down, select Not in Template or the specific template.
3. Select the Apply Filter button.
4. Select the checkbox next to the web pages that need to be added or removed.
5. Select either the Add to Template  or Remove from Template  buttons.

Additional Information

• Pope Tech: Filter Your Accessibility Results by Content Region and Template Region
• Pope Tech: Troubleshoot Scan Results for Regions On Your Site

Once you have added your website to Pope Tech, you are ready to crawl and scan your site to find accessibility errors. Sites added to Pope Tech are automatically crawled on a monthly basis. You can also manually initiate a crawl for your site. The crawling step is how Pope Tech find the webpages on your site; the scanning step produces the report on accessibility errors and issues found on those pages.

Note: Sites behind authentication cannot be crawled. 

You can also watch the Quick Start: Crawl and Scan video tutorial (2:51).

Scheduling scans automatically keeps accessibility data up-to-date and automatically catches any issues. Recurring scans can also be automatically emailed to proactively get everyone on the same page and increase conversations about web accessibility.

You can also view this content by watching Schedule a Scan (video).

After you have crawled and scanned your website, you are ready to view your dashboard with the results of the scan. In the linked article you will learn how to:

• View the result types of a scan
• Drill into the data by result type
• Drill into the data by page

Watch Drilling into results by result type (3:56) for a video presentation of this information.

Reports are a great way to share accessibility data with your organization without using the dashboard reports. See Create and Email Reports to learn how to create and email reports for past scans.

You can also view Create and email reports (video) to see this content in a video format.

After you have setup regions and templates and re-scanned your website, you can filter accessibility results by content and template regions.  This allows users with different roles on your website to focus on the results for the elements of the website that they can control:

• Contributors and content editors can focus on results for the Content Region
• Developers and site owners can focus on results for the Template Region

Template Regions contain elements that are repeated on multiple pages (such as headers, footers, etc) and often cannot be modified by contributors.  Content Regions contain the elements that are different on each page (often the body of the page).   

If you are not seeing what you expect when you filter your results, proceed to troubleshoot scan results for regions on your site.  

Pope Tech can crawl and scan your site for accessibility errors, but automated testing does not find all accessibility issues on a site. Conducting regular manual accessibility tests for your website is a best practice. Manual testing helps you find and fix issues that automatic scans can miss. 

The Pope Tech Blog has a beginner's guide to manual accessibility testing. The University has an Accessibility Testing Canvas course that guides you through manual accessibility testing protocols. 

After you have conducted a manual accessibility test on your website, you can track those manual tests to help keep a record of manual tests for your site. You can also schedule manual tests for your website on various intervals so that you can see when it is time to conduct another test.

Once your site has been crawled and scanned by Pope Tech, locate specific common errors to address. Fixing these accessibility issues will make your site less confusing and more friendly to navigate for your visitors.

Displaying the Locations of the Accessibility Errors

1. Log in to Pope Tech. 
   • If you have not used Pope Tech on your UMN site before, refer to Pope Tech: Log in and Get Started. 
2. From your Dashboard, use the Website dropdown filter to select the desired website if you have access to multiple sites.
   
3. Select Errors to view the types of errors found on your site.
   
4. Review your Results list to check if your site has the common error you want to resolve.
   
   • Note: If your site does not have any errors, you may stop here. If it does, proceed to step 5.
5. Select the arrows button on the right under the Details column, then select the arrow button under Details again on the next screen.
6. Select the button in the WAVE (Web Accessibility Evaluation tool) column on the right for the page you want to inspect.
   • Note: For Google Sites, WAVE button does not work. Use the Inspect button instead. The buttons give the same information.
7. Select the Details tab in the left-hand sidebar and scroll to find the error you are working on.
   
8. Select the error icon for the error of your choice and the location(s) of the error will be revealed on the page to the right.
   • If nothing happens when you select the error icon under Details, the issue is located inside of an accordion or tab. You will need to expand your accordions or click through your tabs until you find the location of the error. Once you have expanded all accordions, selecting the icon again will reveal the location.

Additional Information

• You can dismiss an error so it won't flag that error on that site in the future.
  • Pope Tech keeps track of dismissed errors. So you can bring them back if you want that error flagged on the site again.
  • Group Managers of a site can "bulk dismiss" errors.

Use Pope Tech on your OIT-hosted Drupal website to find empty spaces labeled with heading tags. Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may cause confusion. You can read more about the importance of the proper use of headings for digital accessibility on the AccessibleU website.

1. Display the locations of the accessibility errors on your site.
2. In a separate browser tab, log into your website and navigate to the page that has the error you want to correct.
3. Depending on the type of field where the empty heading is located, you will either need to select Edit or Layout in order to fix the issue.
   • Content fields must be edited via the Edit button.
   • Custom blocks that were added via Layout Builder must be edited from the Layout tab.
     1. Mouse over the appropriate block.
     2. Select the pencil button that appears in the upper-right corner of the block.
     3. Select Configure to edit the block.
   • If you are not sure how this content was added, check Edit first to see if you can find the content there.
4. Find the precise location of the empty header and remove it via one of two methods:
   1. Option A - using no source code.
      1. Move your cursor in the text field while looking for the empty space where the paragraph dropdown in the WYSIWYG toolbar switches to a heading format when occupied by your cursor.
         
      2. Use the dropdown to change the paragraph format to Normal or delete the space entirely if it's unneeded.
   2. Option B - using source code.
      1. Select the Source button to switch to source code mode.
      2. Find the header tags around  
         
      3. Change the header tags to paragraph tags or delete that line entirely if the space is not needed.
         
5. Save your changes. The next time your site is crawled and subsequently scanned by Pope Tech, this empty heading error will no longer appear in your scan results.

Use Pope Tech on your OIT-hosted Drupal website to find links that don't have any text. If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users. For more information on creating accessible links, refer to the guide on the AccessibleU website.

1. Display the locations of the accessibility errors on your site.
2. In a separate browser tab, log into your website and navigate to the page that has the error you want to correct.
3. Depending on the location of the link and how that content was added to the page, you will either need to select Edit or Layout in order to fix the issue.
   • Content fields must be edited via the Edit button.
   • Custom blocks that were added via Layout Builder must be edited from the Layout tab.
     1. Mouse over the appropriate block.
     2. Select the pencil button that appears in the upper-right corner of the block.
     3. Select Configure to edit the block.
   • If you are not sure how this content was added, check Edit first to see if you can find the content there.
4. Empty links often take the form of an extra link tag in front of a link. In that case you will need to edit the source code to delete the extra link tag. Select the Source button in the WYSIWYG toolbar to view the source code.
   
5. Locate and remove the extra link tag.
   • Before example:
     • <p><a href="https://arb.umn.edu" rel="nofollow">&nbsp;</a><a href="https://arb.umn.edu">UMN Landscape Arboretum</a></p>
   • After example:
     • <p><a href="https://arb.umn.edu">UMN Landscape Arboretum</a></p>
6. Save your changes. The next time your site is crawled and subsequently scanned by Pope Tech, this particular Empty link error will no longer appear in your scan results.

Use Pope Tech on your OIT-hosted Drupal website to find images that are missing alternative text. If you don't include alternative text with an image, a visually impaired person who disables image loading or encounters a broken image won't know what the image is meant to convey. Alternative text should accurately and succinctly describe the content and function of the image. For more information on writing alternative text, refer to the guide on the AccessibleU website.

1. Display the locations of the accessibility errors on your site.
2. In a separate browser tab, log into your website and navigate to the page that has the error you want to correct.
3. Depending on how the image was added to the page, you will either need to select Edit or Layout in order to fix the issue.
   • Content fields must be edited via the Edit button.
   • Custom blocks that were added via Layout Builder must be edited from the Layout tab.
     1. Mouse over the appropriate block.
     2. Select the pencil button that appears in the upper-right corner of the block.
     3. Select Configure to edit the block.
   • If you are not sure how this content was added, check Edit first to see if you can find the content there.
   • Note: If your image was added using the Add Media button in the WYSIWYG toolbar, an Edit Media button will appear above the image when editing the text field. Select this button to reveal the alternative text field.
     
4. Once you find the image, enter appropriate alternative text and save your changes. The next time your site is crawled and subsequently scanned by Pope Tech, this particular Missing alternative text error will no longer appear in your scan results.

After running a scan and filtering the results by Template Region or Content Region, if the results of the scan are not adding up as expected then you can troubleshoot the regions on your website.

 In the linked article you will learn how to:

• Navigate to versions and pages not included in the results of the scan
• Use versions in Pope Tech for troubleshooting
• View pages in each version
• Use pages not included to troubleshoot