CODEWITHSUNDEEP
htmlpluginsaccessibilitybrowser-plugin
Christian Michael
Christian Michael

Reputation: 2316

Is there a browser tool to show a quick overview of headings information of a website?

Sometimes you need a quick overview of all used html headings (h1, h2, h3, ...) of a website. Yes actually you could take a look into the source code to get it but that's not really a quick overview.

Many webdeveloper know Chromiumbrowser's nice tool called "Web Developer". The tool enables you to outline the headings but the outlines colors does not allow a conclusion of the heading number or the heading hierarchy.

So that brings me to the question if there is a Firefox, Chromium or other Browser's tool to show a quick overview of headings information of a website ?

Upvotes: 4

Views: 9240

Answers (3)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You have Web Developer addon for Firefox and Web Developer extension for Chrome, that does your exact work. Also, there is one more tool called WAVE Toolbar, that does the heading count and many such things related to accessibility.

WAVE Toolbar


(source: mozilla.net)


(source: mozilla.net)


(source: mozilla.net)


(source: mozilla.net)

Upvotes: 4

Joshua Muheim
Joshua Muheim

Reputation: 13195

While there are many browser extensions and bookmarklets to display a headings outline the way it is defined in the pure HTML source code, none (as far as I know) of them displays the outline the same way a screen reader does (which actually is what we are interested in most of the times).

Some background: to maintain good accessibility in web pages, the whole web page has to be organised in a valid and meaningful headings structure. This could look like this:

H1 Navigation
H1 Content: Here comes the "real" title and content of the current page
  H2 Content sub section 1
  H2 Content sub section 2
    H3 Content sub section 2.1
  etc.
H1 Related
  H2 News
    H3 News 1
    H3 News 2
    H3 News 3

Often times, in a graphical design, many of these headings are omitted (e.g. Navigation or Related) and their meaning is transmitted through the graphical structure of the page. Nonetheless, non-graphical user agents (like e.g. a screen reader) rely on those headings, so they should still exist in the HTML source code and only hidden visually for graphical user agents ("normal" web browsers).

Now, there are two ways of hiding something visually from a web page:

First of all, we can use the CSS properties display: none or visibility: hidden. What some people don't know: Using these properties, screen readers also omit the hidden content. So this is not a good way to hide content that screen readers should still see, and so is not a suitable way of hiding headings for our purposes.

The second way is to move the content that is to be hidden out of the view port. This is typically done by something like position: absolute, left: 10000px, width: 1px; height: 1px; overflow: hidden (there are a lot of variations of this available on the net, but they all basically do the same). So typically you define a CSS class like .visually_hidden with the attributes above and assign this class to the headings that you want to hide visually (but not from screen readers).

H1 Navigation.visually_hidden
H1 Content
  H2 Content sub section 1
  H2 Content sub section 2
    H3 Content sub section 2.1
  etc.
H1 Related.visually_hidden
  H2 News
    H3 News 1
    H3 News 2
    H3 News 3

Now, back to the original topic!

As pointed out before, the mentioned headings outline tools/extensions all do not differentiate between visually and completely hidden elements (in fact, they don't care about CSS at all)! So they are only useful to a limited extent. (Please correct me if I'm wrong or if anybody knows an extension that implements this functionality.)

If you need to see the headings outline the way a screen user perceives it through a screen reader, you will have to install a screen reader yourself (e.g. NVDA which is free) and use its internal heading outline.

Update

It seems that the Web Accessibility Toolbar of Internet Explorer respects the afore mentioned display/visibility CSS attributes in its "Structure => Headings Structure" functionality, so it seems to be suitable for displaying heading hierarchies the way they really are.

Upvotes: 2

Code
Code

Reputation: 438

You could try and install firebug its a firefox addon the address is: http://getfirebug.com/

This is a powerfull web development tool. : )

Upvotes: -1

Related Questions