Testing subheadings using HeadingsMap

Overview

The extension generates an index (or map) of any web document structured with headings. There are some differences from other, for example:

  • It shows the headings structure of the main content and of other document embedded through IFRAME element or those which are part of a series of FRAMES (FRAMESET).
  • It shows the level of the headings and the errors in the structure (for example, incorrect levels).

So this is useful not only to facilitate navigation to anyone, but also to help webdevelopers, consultants and auditors.

HeadingsMap is a Firefox plug-in extension. When installed and viewed, a column will expand on the left side of the Firefox browser showing the hierarchy and content of h1-h6 tags being rendered. If tags are not nested properly, the out of order headings will appear highlighted in red.

Strengths

  • Easy view of out of order heading tags
  • Select a heading in HeadingsMap list to scroll to that heading on the web page and highlight heading text
  • Fast to load, review, and turn off

Weakness

  • Does not provide any evaluation of the content of heading tags
  • Does not provide any character length information for heading tags
  • Can not always view the full text of a heading

Step 1: Example: Web page with proper heading structure

Procedure

  • HeadingsMap available for view from browser Tools menu or from ”<h/>” icon in lower left corner of browser window
  • Shows hierarchy and text of heading
  • In this case, heading structure is properly nested

Screenshot

Screen shot of Example: Web page with proper heading structure

Step 2: Example: Web page with improper heading structure

Procedure

  • In this case, heading structure is not properly nested (missing h1) so out of order headings highlighted in red
  • Also shows that some headings do not contain text

Screenshot

Screen shot of Example: Web page with improper heading structure

Rules Evaluated with this Technique

Rules evaluated with HeadingsMap
Test
Type
Description
Undefined

Each section of a web page must have a heading and the heading must describe content of the section.

Automatic

Heading elements that follow the last h1 element must be properly nested.

Manual

All subheadings (h2…h6) must contain text content.

Undefined

Sub haedings of the same level should have content between the headings

Manual

The text content of headings of the same level within the same section should be unique.

Undefined

The text content of an subheading element (h2-h6) should not only come from the alt attribute value of img elements.

Undefined

The text content of headings should be concise (less than 65 characters).