Proper usage of headings is very important on the web. It helps you structure your content making it more readable, it makes it easier for visually challenged readers to navigate through the content and helps you optimize your content for search engines. And while it’s so important, it’s quite surprising that there is no standard mechanism available within SharePoint that would allow you to quickly verify that your page has a valid headings structure. However thanks to the great extensibility of SharePoint it’s history: proudly presenting Mavention Scan Page Headings!
What is Mavention Scan Page Headings?
Mavention Scan Page Headings is a SharePoint Sandboxed Solution that allows you to quickly verify the headings structure of a Publishing Page. It validates the page for probably the most common headings-related issues.
Each page should have a heading 1 title
The rule says is already: every page should have a title marked using the h1 tag. No matter the styling, which you can apply using CSS, there should be an h1 element on the page with the title of the page. Common issue here is that divs or others tags are used instead which is semantically incorrect.
There should be only one h1 element on the page
Very frequently people on the web use the h1 element for the title of the site. Additionally, just as the previous rule says, they use another h1 element to markup the title of the page. This is incorrect. According to the WCAG there should be only one h1 on the page and it should contain the title of the page.
When editing pages in SharePoint the title of the page is often edited using a separate control, other than the Rich Text Editor (RTE) used for editing the content of the page. Because of this, there should be no h1 elements in the RTE content, so every h1 element found within the RTE is reported as invalid.
Don’t skip heading levels
Just like in a proper table of contents you don’t have level 3 without level 2 header. Skipping header levels confuses readers, especially if they are visually challenged. Ensuring that no heading levels have been skipped, helps your visitors read your content more easily.
How does it work?
Upon installation a new button called Scan page headings is added to the Ribbon.
After clicking the button, the contents of the page are getting scanned.
Every headings-related issue is being reported in the Status Bar. It can happen that you can have multiple issues at the same time so read the message carefully! To make it easier to fix the issues all improper headings are marked:
After fixing the issues you should scan the page again to ensure that all issues have been fixed.
Using HTML headings correctly increases readability of your content and improves the way it’s being indexed by search engines. Manual verification of the headings structure can become a tedious process, especially with larger pages. Using the Mavention Scan Page Headings solution you can validate the structure of headings on your pages with a single mouse click.
Download: Mavention Scan Page Headings (2,51KB, WSP)