[html5] r3726 - [] (0) Add support for ARIA aria-level for headings; try confusing people less w [...]

whatwg at whatwg.org whatwg at whatwg.org
Tue Sep 1 18:04:08 PDT 2009


Author: ianh
Date: 2009-09-01 18:04:07 -0700 (Tue, 01 Sep 2009)
New Revision: 3726

Modified:
   index
   source
Log:
[] (0) Add support for ARIA aria-level for headings; try confusing people less with <hgroup>.

Modified: index
===================================================================
--- index	2009-09-02 00:18:02 UTC (rev 3725)
+++ index	2009-09-02 01:04:07 UTC (rev 3726)
@@ -9066,28 +9066,28 @@
      <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
@@ -12934,12 +12934,6 @@
   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>
@@ -12979,6 +12973,12 @@
  <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
 </hgroup></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>
 
 
@@ -13638,6 +13638,17 @@
   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

Modified: source
===================================================================
--- source	2009-09-02 00:18:02 UTC (rev 3725)
+++ source	2009-09-02 01:04:07 UTC (rev 3726)
@@ -9349,27 +9349,27 @@
 
     <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
@@ -9377,7 +9377,7 @@
 
     <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
@@ -13820,12 +13820,6 @@
   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>
@@ -13865,6 +13859,12 @@
  <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
 </hgroup></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>
 
 
@@ -14594,6 +14594,18 @@
   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




More information about the Commit-Watchers mailing list