WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: html sectioning elements

for

From: Steve Faulkner
Date: Apr 3, 2015 11:58AM

When <header> elements are not contained within article or section they are
scoped to the document, this is fine to do, but it is recommended that they
are used to identify the the document header/footer only.

Note that <header> and <footer> have different accessibility mappings in
HTML5 dependent on whether they are contained within <article> or <section>
elements. (and this is reflected in how most browsers expose the semantics
via accessibility APIs.)

header element that is not a descendant of an article or section element.

[=] banner role


footer element that is not a descendant of an article or section element.
> [=] contentinfo role


http://www.w3.org/TR/html/dom.html#sec-strong-native-semantics

When used outside of article and section (as the main header and footer of
a document) they are exposed as landmarks, otherwise they are not. They are
usually exposed as grouping elements that are not conveyed to AT unless
they have an explicit accessible name, for example

<footer aria-label="footnote">...</footer>



--

Regards

SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;

On 3 April 2015 at 18:28, Angela French < <EMAIL REMOVED> > wrote:

> Hello,
> I'm trying to wrap my head around the html 5 sectioning elements,
> specifically - header, section, article. I am seeing articles that
> contradict each other in the proper usage and order of these elements. I
> am interested in your opinions on:
>
> Should the <header> element be nested within a <section> or preceding it?
> For example:
>
> <header>
> <h1>This is my top level heading</h1>
> </header>
> <section><p>paragraphs of content here</p></section>
>
> Or:
>
> <section>
> <header><h1>top level heading</h1></header>
> <p>paragraphs of content here</p>
> </section>
>
> In either case, the use of <header> seems redundant to be since <h1> seems
> to adequately communicates its purpose.
>
> Thank you,
>
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> www.checkoutacollege.com<;http://www.checkoutacollege.com>;
> www.sbctc.edu<;http://www.sbctc.edu>;
>
> > > > >