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
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 CoffeeWhat 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 [email protected] or you can find me on Twitter at @defaced.
Follow @defacedFor more tools and fun projects checkout the defaced.dev homepage.
back to defaced.dev