Skip to content
Permalink
Browse files

[] (0) Add support for ARIA aria-level for headings; try confusing pe…

…ople less with <hgroup>.

git-svn-id: http://svn.whatwg.org/webapps@3726 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Sep 2, 2009
1 parent b21d940 commit 36e8cf93a3687ea2f9139d12b84f9593d49dd358
Showing with 49 additions and 26 deletions.
  1. +24 −13 index
  2. +25 −13 source
37 index
<td><code title=attr-aria-role-contentinfo>contentinfo</code> role

<tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
<td><code title=attr-aria-role-heading>heading</code> role
<td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

<tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
<td><code title=attr-aria-role-heading>heading</code> role
<td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

<tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
<td><code title=attr-aria-role-heading>heading</code> role
<td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

<tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
<td><code title=attr-aria-role-heading>heading</code> role
<td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

<tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
<td><code title=attr-aria-role-heading>heading</code> role
<td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

<tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
<td><code title=attr-aria-role-heading>heading</code> role
<td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

<tr><td><code><a href=#the-header-element>header</a></code> element
<td><code title=attr-aria-role-banner>banner</code> role

<tr><td><code><a href=#the-hgroup-element>hgroup</a></code> element
<td><code title=attr-aria-role-heading>heading</code> role
<td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>

<tr><td><code><a href=#the-hr-element>hr</a></code> element
<td><code title=attr-aria-role-separator>separator</code> role
multiple levels, such as subheadings, alternative titles, or
taglines.</p>

<p class=note>The point of <code><a href=#the-hgroup-element>hgroup</a></code> is to mask an
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element (that acts as a secondary title) from the
<a href=#outline>outline</a> algorithm.</p><!--
http://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895
-->

<p>For the purposes of document summaries, outlines, and the like,
the text of <code><a href=#the-hgroup-element>hgroup</a></code> elements is defined to be the text
of the highest <a href=#rank title=rank>ranked</a>
&lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
&lt;/hgroup&gt;</pre>

<p>The point of using <code><a href=#the-hgroup-element>hgroup</a></code> in these examples is to
mask the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element (which acts as a secondary title)
from the <a href=#outline>outline</a> algorithm.</p><!--
http://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895
-->

</div>


always takes the user to the top of the document, regardless of
where the first heading in the <code><a href=#the-body-element-0>body</a></code> is to be found.</p>

<p>The <dfn id=outline-depth>outline depth</dfn> of a <a href=#heading-content>heading content</a>
element associated with a <a href=#concept-section title=concept-section>section</a> <var title="">section</var>
is the number of <a href=#concept-section title=concept-section>sections</a> that
are ancestors of <var title="">section</var> in the
<a href=#outline>outline</a> that <var title="">section</var> finds itself
in when the <a href=#outline title=outline>outlines</a> of its
<code>Document</code>'s elements are created, plus 1. The
<a href=#outline-depth>outline depth</a> of a <a href=#heading-content>heading content</a> element
not associated with a <a href=#concept-section title=concept-section>section</a>
is 1.</p>

<div class=note>

<p>The following JavaScript function shows how the tree walk could
38 source
@@ -9349,35 +9349,35 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0

<tr>
<td><code>h1</code> element that does not have an <code>hgroup</code> ancestor
<td><code title="attr-aria-role-heading">heading</code> role
<td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <span>outline depth</span>

<tr>
<td><code>h2</code> element that does not have an <code>hgroup</code> ancestor
<td><code title="attr-aria-role-heading">heading</code> role
<td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <span>outline depth</span>

<tr>
<td><code>h3</code> element that does not have an <code>hgroup</code> ancestor
<td><code title="attr-aria-role-heading">heading</code> role
<td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <span>outline depth</span>

<tr>
<td><code>h4</code> element that does not have an <code>hgroup</code> ancestor
<td><code title="attr-aria-role-heading">heading</code> role
<td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <span>outline depth</span>

<tr>
<td><code>h5</code> element that does not have an <code>hgroup</code> ancestor
<td><code title="attr-aria-role-heading">heading</code> role
<td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <span>outline depth</span>

<tr>
<td><code>h6</code> element that does not have an <code>hgroup</code> ancestor
<td><code title="attr-aria-role-heading">heading</code> role
<td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <span>outline depth</span>

<tr>
<td><code>header</code> element
<td><code title="attr-aria-role-banner">banner</code> role

<tr>
<td><code>hgroup</code> element
<td><code title="attr-aria-role-heading">heading</code> role
<td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <span>outline depth</span>

<tr>
<td><code>hr</code> element
multiple levels, such as subheadings, alternative titles, or
taglines.</p>

<p class="note">The point of <code>hgroup</code> is to mask an
<code>h2</code> element (that acts as a secondary title) from the
<span>outline</span> algorithm.</p><!--
http://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895
-->

<p>For the purposes of document summaries, outlines, and the like,
the text of <code>hgroup</code> elements is defined to be the text
of the highest <span title="rank">ranked</span>
&lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
&lt;/hgroup&gt;</pre>

<p>The point of using <code>hgroup</code> in these examples is to
mask the <code>h2</code> element (which acts as a secondary title)
from the <span>outline</span> algorithm.</p><!--
http://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895
-->

</div>


always takes the user to the top of the document, regardless of
where the first heading in the <code>body</code> is to be found.</p>

<p>The <dfn>outline depth</dfn> of a <span>heading content</span>
element associated with a <span
title="concept-section">section</span> <var title="">section</var>
is the number of <span title="concept-section">sections</span> that
are ancestors of <var title="">section</var> in the
<span>outline</span> that <var title="">section</var> finds itself
in when the <span title="outline">outlines</span> of its
<code>Document</code>'s elements are created, plus 1. The
<span>outline depth</span> of a <span>heading content</span> element
not associated with a <span title="concept-section">section</span>
is 1.</p>

<div class="note">

<p>The following JavaScript function shows how the tree walk could

0 comments on commit 36e8cf9

Please sign in to comment.
You can’t perform that action at this time.