Logical Content Flow

Quickly discover and identify issues with the Logical Content Flow of the heading elements on any page.

The natural hierachy of heading elements and content on a webpage is not only extremely import for accessibility but the structure of your content matters for visibility in search.

Try the Logical Content Flow Tool

Simply enter an URL and hit generate to create your logical content flow report!

Note: This might take a minute depending on current usage.

.

Logical Content Flow Report

Results

URL

Date

Overall

pass Logical Content Flow

Breakdown

?

pass Primary Heading

pass Missing Headings

pass Empty Headings

pass Hidden Headings

pass Heading Font Size

pass Heading Length

Headings

Support

If my fun web experiments brighten your day, my tools save your bacon, or you simply want to say thanks for the work that goes into SEOslides.page, consider supporting me on Ko-fi by buying me a coffee.

Even a small amount will go a long way to covering the costs of running and maintaining my projects.

Buy Me A Coffee

What is Logical Content Flow?

Logical Content Flow is a phrase I've coined to describe the natural hireachal flow when headings are applied to HTML content correctly as per the Web Content Accessibility Guidelines.

This tool is designed identify opportuntities to improve the flow of your site and highlight illogical incosistencies.

Web Content Accessibility Guidelines

Nest headings by their rank (or level). The most important heading has the rank 1 (h1), the least important heading rank h6). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.

Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a h2 is not followed directly by an h4, for example. It is ok to skip ranks when closing subsections, for instance, a h2 beginning a new section, can follow an h4 as it closes the previous section.

Understanding The Results

There are currently six checks which compromise the Logical Content Flow report:

Primary Heading

The existance of a single primary H1 heading is checked for. If there are multiple H1 headings or none at all then this check will fail.

Missing Headings

If any headings are skipped in the natural heirachy as defined by the Web Content Accessibility Guidelines this check will fail.

Empty Headings

If there are any empty headings with no content this check will fail.

Hidden Headings

Each heading will be checked to see if it's visually available to the browser. If the check identifies that it can't see the heading then it will issue a warning for you to double check the heading doesn't have any issues being displayed.

Heading Font Size

The size of the fonts used for headings are analyised any if any are 16px or under then this check will issue a warning.

You should check these elements to make sure they're actually headings, as having a such as a small font size is a good indicator that headings are being used for styling and not for their intended purpose.

Heading Length

This checks to ensure your heading is under 70 characters in length. If a longer heading is found it will issue a warning.

You should check these elements to make sure they're actually headings, as this check will often flag up instances where paragraphs have been wrapped in a heading element by mistake.

Visibility In Search

Ensuring your content has been correctly structured helps crawlers to parse your content easier and understand its context.

Ancedotally I've seen sites failing to gain visibility in organic rankings with a content flow that simply doesn't make any logical sense. Simply by rearranging the content structure so that it conforms to the WCAG guidelines (and keeps my tool happy) I've seen huge improvements.

Frequently Asked Questions

My site is amazing but fails your tool, what's going on?

The Logical Content Flow tool is simply a utility in your toolbox to help identify potential issues with your site.

It will flag up things that might need attention as a warning, such as font size and heading length. It's up to you to determine if these are genuine issues or the site is working as intended.

What device setting is used for crawling?

Currently a desktop viewport is used for crawling the URLs entered into this tool.

Can you make a white labelled version of this for me or my agency?

It depends. Reach out and send me a message.

Changelog

1.0.0

- All the changes.

Contact

Send me an email via hello@defaced.dev or you can find me on Twitter at @defaced.

Follow @defaced

For more tools and fun projects checkout the defaced.dev homepage.

back to defaced.dev