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.