DubBot Accessibility Reports

Hello and welcome to the first video in the DubBot training series. In this video, we'll explore the Accessibility Reports in DubBot. We'll also take a brief tour of the Site Dashboard because many of the concepts we'll discuss here apply throughout the rest of the platform.

After signing in, you can access your Site Dashboard.

Depending on your permissions, your dashboard may look slightly different than mine. Most Tulane users are assigned either the Viewer or Manager role. I'll be using a Manager account for this demonstration.

At the top of the page, you'll see the Site Score. This score combines information from Accessibility, Broken Links, Web Governance, Spell Check and SEO reports.

We should try not to focus on achieving a perfect score. Instead, use the score to monitor trends over time and aim for continuous improvement.

Next, notice the latest crawl date. DubBot typically scans sites about every seven days. If you've fixed an issue in Drupal but still see it reported here, check the crawl date first. You may simply be looking at information from a previous crawl.

You'll also see the page inventory and PDF inventory if there are any. DubBot can only report on content it can discover through links or your sitemap. If a page isn't linked anywhere, the bot may not be able to find it.

This video will focus on Accessibility Reporting.

If I click the chart icon here, we can view accessibility trends over time. One of the most valuable features of DubBot is the ability to demonstrate continuous improvement. Here we can see a significant decrease in accessibility issues over time as issues were identified and resolved.

Accessibility Reports help identify barriers that may prevent users from successfully accessing content on your website. DubBot tests many WCAG 2.1 and 2.2 success criteria and organizes issues by priority and compliance level.

By default, we're looking at issues that were found on the site.

Issues Tested shows every accessibility test available in DubBot, including checks that didn't find problems on your website.

One of the most useful tools in Accessibility Reports is filtering by WCAG level. Accessibility issues are categorized as Level A, Level AA and Level AAA.

At Tulane, our primary goal is WCAG Level AA compliance, so I recommend focusing on Level A and Level AA issues first.

In this example, we have a Level AA color contrast issue. This is the highest priority issue currently shown and would be the first issue I would work on.

We also have Level AAA issues. These are still valuable improvements but generally should be addressed after A and AA issues.

Another way to work through accessibility issues is by page.

DubBot automatically sorts pages by the number of issues found, making it easy to prioritize pages with the most issues.

This is where DubBot becomes especially helpful. Rather than simply listing an issue, DubBot highlights the exact content that triggered it in a more detailed page report.

Here, the "More Resources" heading is highlighted. DubBot determined that the text color and background color do not provide sufficient contrast.

DubBot explains why this issue matters. It tells us that adequate contrast is necessary for users with low vision and mobile users. It provides the WCAG criterion that is not being met and links to additional learning resources.

This heading was manually changed to Tulane Blue on a white background. DubBot calculated a contrast ratio of about 1.9 to 1, while WCAG requires a minimum of 3 to 1 for this heading size.

You'll also find Element Location and Element Source. These sections identify the exact HTML element responsible for the issue.

You don't need to understand HTML to resolve most content issues. However, these details can be extremely useful when you're trying to determine exactly what content DubBot is referencing, especially on complex pages.

If you are having difficulty finding an issue, the Disable CSS option can be very helpful. Disable CSS removes the page styling and shows the underlying structure of the page. This can make it easier to locate content that is hidden in menus, accordions or other interface elements.

To fix this issue, I'll open the page directly in Drupal by selecting View in Drupal. For many pages, View in Drupal takes you directly to the edit screen for that content.

In this case, the heading was manually assigned a color. I'll remove the custom formatting and allow the heading to use the default theme styles.

As a general rule, we recommend using the default Drupal theme styles whenever possible. The UCM web team continuously improves those styles to support accessibility requirements.

Even though we fixed the page, DubBot is still showing the version from the last crawl. At this point, you can simply wait until the next crawl, or use Refresh Content.

Refresh Content tells DubBot to retrieve a new copy of the page from the live website. If you've recently fixed content and want to verify the results immediately, Refresh Content is usually the button you'll use.

Analyze is slightly different. Analyze reruns DubBot's tests against content it already has stored. You won't use Analyze as frequently for accessibility issues. It's most commonly used when policies are created or changed and you need DubBot to reevaluate existing content.

A simple way to remember the difference is that Refresh Content retrieves new content while Analyze reruns tests.

Now let's look at one final example. DubBot identified an issue called "Links with the same name must have a similar purpose." In this example, there are two links labeled "UCM Support Request," but the links point to different destinations.

This is a WCAG Level AAA issue. For many users, especially screen reader users, link text serves as the primary description of where a link will go.

If multiple links use identical text but lead to different destinations, that experience can become confusing.

DubBot highlights the links and explains why they were flagged. It also provides the relevant WCAG criterion and additional resources.

Although this is a lower priority than the Level AA color contrast issue we reviewed earlier, it is still a useful improvement and demonstrates how DubBot helps identify opportunities to create clearer, more consistent content.

That concludes our overview of Accessibility Reports in DubBot.

Remember the key takeaways from this session. Focus on Level A and Level AA issues first. Use the issue details to understand exactly what DubBot is reporting. Use the default Drupal theme styles whenever possible.

Use Refresh Content after making changes in Drupal. And most importantly, remember that accessibility is an ongoing process of continuous improvement.

You don't need to fix everything at once. Work through issues steadily, prioritize the most impactful items first, and contact the UCM web team whenever you need help understanding or resolving an issue.

Thanks for watching, and we'll see you in the next video where we'll take a closer look at Broken Links reports.

In this video, I will demonstrate the Accessibility Reports in DubBot and show you how the reports can help you identify and prioritize potential barriers on your website.

From the Site Dashboard, the Accessibility section summarizes the issues found during the most recent crawl. If I select the chart icon, I can also view accessibility trends over time.

The goal is not a perfect score. The value of this chart is that it can show continuous improvement as issues are identified and resolved.

DubBot tests many WCAG 2.1 and 2.2 requirements and organizes findings by conformance level. Level A issues are the highest priority. Level AA issues are also high priority and represent Tulane’s primary compliance goal. Level AAA findings are useful enhancements that should generally be addressed after working on Levels A and AA.

You can review findings by issue, which is useful when you want to correct the same problem across several pages, or by page, which is useful when you want to work through one page at a time.

I will open the DubBot Accessibility Example Page. It has one potential issue at each WCAG level. I’ll start with the Level A finding: Images must have alternative text.

When I expand it, DubBot outlines the image and explains why the issue matters. Screen readers use alternative text to communicate an image’s purpose or information to people who cannot see it.

DubBot also provides the WCAG criterion, supporting resources, and the element location and source. You do not need to understand HTML to resolve most content issues, but these details can help you find an element on a complex page.

To resolve this issue in Drupal, I would add concise, meaningful alternative text for this image. A useful question to ask yourself is: What information would someone miss if they could not see it?

Once I add that alternative text, this issue should be cleared from the report the next time the page is checked.

Next is the Level AA finding: Elements must meet minimum contrast ratio thresholds. DubBot highlights the sentence, “This text is Tulane Blue.”

Tulane Blue on white does not provide enough contrast for everyone to read easily, including people with low vision.

This text was styled with a custom color in Drupal. To resolve this issue, I removed that formatting and let the default theme display black text on a white background.

In general, using the default Drupal theme styles whenever possible will support consistent, accessible content across Tulane’s websites. DubBot also provides the related WCAG criterion and learning resources.

The Level AAA finding says links with the same name must have a similar purpose. Two links use the label “this is a link” but point to different destinations. Screen reader users may navigate through links without hearing the surrounding sentence, so labels such as “click here,” “read more,” or “visit” may not explain where a link goes.

I would use descriptive labels such as “Tulane University homepage” and “Drupal Guide homepage” instead.

This report may identify links in the page content or in the site’s navigation and theme, so it is important to check all areas of the page.

After updating the content in Drupal, DubBot shows the older version until it retrieves new content. Wait for the next crawl or select Refresh Content to retrieve and test the live page again.

DubBot can also inventory PDFs linked from a site and perform basic accessibility checks. Whenever possible, we recommend presenting information as web content instead of a PDF, although we understand some materials may still need to be shared as PDFs.

From the Site Dashboard, I can select the PDF count to view the inventory. This can help you find old files to remove and current files that may need remediation.

Here, DubBot identifies potential issues with document tags, alternative text, and bookmarks. It also prompts you to manually review some items that automation cannot fully evaluate, such as consistent headers and footers.

These checks are a starting point, not a complete PDF accessibility evaluation, and DubBot does not remediate the file. Corrections will need to be made in an appropriate PDF authoring or remediation tool.

Accessibility is an ongoing process, and DubBot helps content creators prioritize the issues with the greatest impact and make steady progress over time. If you need help interpreting a report or resolving an issue in Drupal, contact the UCM web team through the UCM Support Request form.