DubBot How-To Guide

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.

Another example of incorrect heading usage:

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

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

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!)

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.

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.

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. 

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.

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