WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: H1 header in iframe


From: Jason Kiss
Date: Aug 25, 2010 3:06PM

On 26/08/10 02:32, John Foliot wrote:
> As an additional point to Jared's, HTML5's<hgroup> element will be of
> significant importance here (I believe) as the browser will be
> 're-interpreting' headings based on the total document's hierarchal
> structure (see: http://html5doctor.com/the-hgroup-element/ for a good
> over-view)
> In effect, mark up each document as appropriate if it were a stand-alone
> document (so yes, include at least 1<h1>) but when a 'container' document
> imports such secondary documents (inside the<hgroup> element) the browser
> "knows" that even though the imported document starts with an<h1>,
> because it is inside a document that already has an<h1> that this second
> instance, in this context, is actually a sub-heading (ergo<h2>) of the
> parent document, and adjusts its hierarchal semantic to reflect this.
> (Yes, it's kind of mind-bending at first, but actually quite intelligent
> and useful. - Read the article, it does a much better job than I of
> explaining it)

John, are you referring to HTML5's outlining algorithm and sectioning
content? I thought that the <hgroup> element can only contain headings
(H1-H6) and is primarily for title and subtitle or tag line groupings.

On the other hand, your account of marking up headings in container and
secondary documents sounds like the way that HTML5 deals with sectioning
content and headings and implied sections and subsections when coming up
with the document outline.

From what I can figure out, and similar to what you describe, if the
stand-alone secondary document begins with an H1, and is imported into a
<section> element within the container document (and an <iframe> could
be loaded within a <section> element, I believe), the hierarchical
semantic of the H1 in the secondary document will be adjusted to fit in
with the document outline and heading structure of the surrounding
container document. In fact, no matter what level heading the secondary
document starts with, if loaded within another HTML5 sectioning element,
its position in the document outline will be accounted for based on the
position and nesting of its section.

Of course, that this works will depend on users having HTML5 supporting
technology, so, as you indicated, Jared's suggestion to mark up the
<iframe> document with headings that will fit in properly with the
heading structure of the container document is still the way to go
(though this could be probably be combined with an approach using HTML5
sectioning elements).

The info and examples at
http://www.w3.org/TR/html5/sections.html#headings-and-sections are
actually pretty helpful, I found, especially considering it's a spec.

Jason Kiss