remove duplicate html spin button example and switch the order of ind…

…eterminate progress bar example to the end

aria-practices.html

@@ -6633,21 +6633,19 @@ <h3>Range properties with progress bars</h3>
     &lt;/svg&gt;
   &lt;/span&gt;
 &lt;/div&gt;</code></pre>
-
-      <p>
-        To represent an indeterminate progress bar where the value range is unknown,
-        omit the <code>aria-valuenow</code> attribute.
-      </p>
-
-      <pre><code>&lt;img role="progressbar" src="spinner.gif" alt="Loading..."&gt;</code></pre>
-
       <p>
         The progress bar example can also be made using the native HTML <code>progress</code> element.
       </p>
 
       <pre><code>&lt;label for="loadstatus"&gt;Loading:&lt;/label&gt;
 &lt;progress id="loadstatus" max="100" value="33"&gt;&lt;/progress&gt;
       </code></pre>
+      <p>
+        To represent an indeterminate progress bar where the value range is unknown,
+        omit the <code>aria-valuenow</code> attribute.
+      </p>
+
+      <pre><code>&lt;img role="progressbar" src="spinner.gif" alt="Loading..."&gt;</code></pre>
     </section>
 
     <section id="range_related_properties_scrollbar_role">
@@ -6737,10 +6735,6 @@ <h3>Range properties with spin buttons</h3>
       <p>
         The spin button example above can be made using the native HTML <code>&lt;input type="number"></code> element.
       </p>
-
-      <pre><code>&lt;input type="number" min="0.01" value="0.5" max="2" aria-labelledby="paperclip-label"&gt;
-&lt;span id="paperclip-label"&gt;Price per paperclip&lt;/span&gt;:
-$&lt;output id="price" aria-labelledby="paperclip-label"&gt;0.50&lt;/output&gt;</code></pre>
       <pre><code>&lt;label&gt;Price per paperclip: $&lt;input type="number" min="0.01" value="0.5" max="2" step="0.01"&gt;&lt;/label&gt;</code></pre>
     </section>
   </section>