Add idref to step 3 of landmark section and link to it from within doc

aria-practices.html

@@ -2900,7 +2900,7 @@ <h3>General Principles of Landmark Design</h3>
         <li>Landmark roles can be nested to identify parent/child relationships of the information being presented.</li>
       </ul>
 
-      <p><strong>Step 3: Label areas</strong></p>
+      <p id="aria_lh_step3"><strong>Step 3: Label areas</strong></p>
 
       <ul>
         <li>If a specific landmark role is used more than once on a web page, it should have a unique label.</li>
@@ -2938,7 +2938,7 @@ <h4 class="widget-name">Banner</h4>
           <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and <code>frame</code> elements), each <code>document</code> or <code>application</code> role may have
             one <code>banner</code> landmark.</li>
 
-          <li>If a page includes more than one <code>banner</code> landmark, each should have a unique label (see Step 3 above).</li>
+          <li>If a page includes more than one <code>banner</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
         </ul>
 
         <section class="notoc">
@@ -2982,7 +2982,7 @@ <h4 class="widget-name">Complementary</h4>
 
           <li>If the complementary content is not related to the main content, a more general role should be assigned (e.g. <code>region</code>).</li>
 
-          <li>If a page includes more than one <code>complementary</code> landmark, each should have a unique label (see Step 3 above).</li>
+          <li>If a page includes more than one <code>complementary</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
         </ul>
 
         <section class="notoc">
@@ -3016,7 +3016,7 @@ <h4 class="widget-name">Contentinfo</h4>
           <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and <code>frame</code> elements), each <code>document</code> or <code>application</code> role may have
             one <code>contentinfo</code> landmark.</li>
 
-          <li>If a page includes more than one <code>contentinfo</code> landmark, each should have a unique label (see Step 3 above).</li>
+          <li>If a page includes more than one <code>contentinfo</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
         </ul>
 
         <section class="notoc">
@@ -3062,7 +3062,7 @@ <h4 class="widget-name">Form</h4>
 
           <li>A label for the <code>form</code> landmark should be visible to all users (e.g. an <code>h1-h6</code> element).</li>
 
-          <li>If a page includes more than one <code>form</code> landmark, each should have a unique label (see Step 3 above).</li>
+          <li>If a page includes more than one <code>form</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
 
           <li>
             Whenever possible, controls contained in a <code>form</code> landmark in an HTML document should use native host semantics:
@@ -3108,7 +3108,7 @@ <h4 class="widget-name">Main</h4>
           <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and <code>frame</code> elements), each <code>document</code> or <code>application</code> role may have
             one <code>main</code> landmark.</li>
 
-          <li>If a page includes more than one <code>main</code> landmark, each should have a unique label (see Step 3 above).</li>
+          <li>If a page includes more than one <code>main</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
         </ul>
 
         <section class="notoc">
@@ -3134,7 +3134,7 @@ <h4 class="widget-name">Navigation</h4>
         <p><a href="https://www.w3.org/TR/wai-aria-1.1/#navigation"><code>Navigation</code></a> landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation.</p>
 
         <ul>
-          <li>If a page includes more than one <code>navigation</code> landmark, each should have a unique label (see Step 3 above).</li>
+          <li>If a page includes more than one <code>navigation</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
 
           <li>If a <code>navigation</code> landmark has an identical set of links as another <code>navigation</code> landmark on the page, use the same label for each <code>navigation</code> landmark.</li>
         </ul>
@@ -3165,7 +3165,7 @@ <h4 class="widget-name">Region</h4>
         <ul>
           <li>A <code>region</code> landmark must have a label.</li>
 
-          <li>If a page includes more than one <code>region</code> landmark, each should have a unique label (see Step 3 above).</li>
+          <li>If a page includes more than one <code>region</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
 
           <li>The <code>region</code> landmark can be used identify content that named landmarks do not appropriately describe.</li>
         </ul>
@@ -3195,7 +3195,7 @@ <h4 class="widget-name">Search</h4>
         <ul>
           <li>Use the <code>search</code> landmark instead of the <code>form</code> landmark when the form is used for search functionality.</li>
 
-          <li>If a page includes more than one <code>search</code> landmark, each should have a unique label (see Step 3 above).</li>
+          <li>If a page includes more than one <code>search</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
         </ul>
 
         <section class="notoc">