Dubbot dashboard and navigation

A site dashboard in DubBot provides a quick overview and snapshot of the activity and scores of the website. It also highlights the issues that need to be addressed.

screenshot of dubbot dashboard with the 5 top items highlighted — (1) Accessibility; (2) Broken Links; (3) Web Governance; (4) Best Practices; (5) Spell Check; (6) Quick Wins

The common items DubBot looks to address on a website is Accessibility (1), Broken Links (2), Web Governance (3), Best Practices (4), and Spell Check (5). You can click the hyperlinks in any one of these boxes on the DubBot homepage to navigate to the errors. DubBot also looks at SEO and overall Readability.

Additionally, the Quick Wins section (6) displays a menu that allows you to jump to specific errors on specific pages. If you click to a page with errors, you’ll be presented with a preview of the page, and a toolbar on the left side highlighting the errors. You can click on each one with a numeric value next to it to see what the issue is that’s been flagged.

screenshot of page analyzer in dubbot menu

If you’ve corrected an item or feel that it doesn’t need correcting (certain spellchecks) you can click the item in question, and from the Actions drop-down menu select Mark Resolved or Ignore on this Page.

screenshot of the spell check menu in dubbot with red arrow pointing towards the "action menu"

Common DubBot flags


Heading Hierarchy (H1–H6)

Headings are ordered by both size and importance, and it’s important for accessibility that you use them in the proper order, rather than choosing them for the way they look on the page. You should never skip a heading in the hierarchy!

The Main Heading (H1) is reserved for page titles only — you should not use it for other purposes. The next level of heading is called a Section Heading (H2). The additional heading levels — Section Subheading (H3) and Detailed Subheading (H4) are the most commonly used, but there’s also an H5 and H6 available if you really need them.

The following report flagged a page for having an incorrect heading, this is because the page title “Keys” is H1 and the “Key Pickup” headline was set to H3 when it should be H2.

screenshot of flagged headline misuse in dubbot report

Another example of incorrect heading usage:

There are correct H2 section headings on the site, however, the sidebar jumps to H4, bypassing H3.

screenshot of headline hierarchy issue in dubbot

Alternative Text

All too often we see the alternative text the same as the title and caption of the image. Very rarely is the alternative text the same as the title and/or caption. Instead, the alt text should describe the image. 

The following photo was flagged by DubBot as being inaccessible because the alt text, “AGH 225”, was not sufficient — alt text should be more than 12 characters. 

Instead of “AGH 225” as the alt text, it should read something like “two twin beds in AGH room 225”.

Screenshot of a DubBot flagged issue: image requiring better alt text

Additionally, if your image is missing alt text entirely it will be flagged, be sure to edit the image to include alt text (this is a legal requirement, not just a nice-to-have!)

Bad Links

If a page is flagged for a bad link, it means there is a link on the page that leads to a 404 error (a dead end). The link will be highlighted in the report so you can easily locate the link and edit it.

screenshot of broken links report in dubbot

Spelling Errors

Spelling errors typically need to be addressed on a case-by-case basis for each page. If you list someone’s Carleton NetID it’s always going to flag that as a spelling error. You can choose to ignore this on the page or you can edit the content to read the user’s full name and then link their NetID. For example, instead of listing “Contact sscofield for information”, you should put “Contact Sarah Scofield for information” linking the name to the email address.

Additionally, DubBot may flag other items such as jargon or acronyms. For example, “A cappella” is a word that gets flagged — just the “cappella” part — and this can be ignored.

iFrame Titles

DubBot may flag an embedded video highlighting the iFrame code as incorrect because it’s missing a title attribute. If you inspect the iFrame code, you’ll notice at the very end of the code there’s a section labeled title=”Video” >. This iFrame “title” section should reflect the title of the video.

The following video embeds were flagged because the title attribute for each video was simply, “title”, providing screen reader users no way of knowing how each video differs from the next. A screen reader will look for the title listed in the iFrame to read aloud to notify the user of the content so they can decide if it is something they’re interested in navigating to. 

screenshot of iFrame title attributes

Tips for writing good iFrame title:

  1. Titles should be short so they can be quickly heard and understood.
  2. Titles should accurately describe the contents of the iFrame element in a way that will help users decide whether or not they want to navigate to the iFrame.
  3. If there are multiple iFrames on the same page, each frame should have a unique title. For example, don’t write “YouTube video” three times, instead, write the name of the video in each iFrame.

Flags you can IGNORE

Site maintainers can ignore these flags since they generally apply to the footer (or the Carleton WordPress theme in general) and site maintainers don’t have control over these items:

  • ARIA role should be appropriate for the element
  • Google Analytics script
  • Document should not have more than one contentinfo landmark
  • Ensures landmarks are unique