updated headings and example labels

content/practices/high-contrast/high-contrast-practice.html

@@ -538,7 +538,6 @@ <h4>CSS Media Query Code</h4>
           </code>
         </pre>
 
-
         <h3 id="color-scheme-wikipedia">Color Scheme Example: Wikipedia Page</h3>
 
         <p>The following example illustrates how Wikipedia supports color scheme media query.  The example includes showing the "Appearance" sidebar allowing the user to choose the light or dark scheme and other rendering options for text size and column width.</p>
@@ -601,12 +600,12 @@ <h3 id="system-colors">System Colors</h3>
         </table>
 
 
-        <h3 id="forced-colors-example">Rating Slider Example</h3>
+        <h3 id="forced-colors-example">System Color Example: Rating Slider</h3>
 
         <p>The <a href="../../patterns/slider/examples/slider-rating.html">Rating Slider Example</a> uses CSS <code>forced-colors: active</code> media query to change the styling of SVG elements used for the rating scale, thumb and labels.  The <code>buttontext</code> system color value is used for <code>stroke</code> and <code>fill</code> properties of the range and thumb elements and <code>canvas</code> system color is used for the label elements (e.g. "Extremely Unsatisfied" and "Extremely Satisfied").   The following table shows how the graphical rendering changes for some high contrast options. </p>
 
-        <h4 id="forced-colors-example-screenshots">Rating Slider Example with Selected High Contrast User Settings</h4>
         <table aria-labelledby="forced-colors-example-screenshots" class="data">
+          <caption>Rating Slider Example with Selected High Contrast User Settings</caption>
           <thead>
             <tr>
               <th>Operating System</th>
@@ -662,19 +661,18 @@ <h3 id="table-forced-colors">Examples in using <code>forced-colors</code></h3>
       </section>
 
 
-      <section id="currentcolor">
-        <h2><code>currentcolor</code> Keyword</h2>
+        <h3><code>currentcolor</code> Keyword</h3>
 
         <p>The <code>currentcolor</code> keyword provides a means for components to use the color value of ancestors to set the color properties of an element.   When the user chooses a high contrast setting the browser changes the <code>color</code> and <code>background-color</code> values of text content.   The <code>currentcolor</code> value is set to the text color for use in setting the color of other properties including: <code>border</code> and <code>outline</code> on HTML elements, and <code>stroke</code> and <code>fill</code> properties on SVG elements.  Note: There is no equivalent value for using the background color, so when using this technique it is important for the background of the element to be transparent to allow the background color to be visible. </p>
 
         <p>Using <code>currentcolor</code> is the most popular technique in the ARIA APG examples for supporting user theme and high contrast settings.</p>
 
-        <h2 id="currentcolor-example">Button Switch Example</h2>
+        <h3 id="currentcolor-example">Current Color Example: Switch</h3>
 
         <p>The <a href="../../patterns/switch/examples/switch-button.html">Button Switch Example</a> uses <code>currentcolor</code> value to style the SVG <code>rect</code> elements used as the switch container and to indicate the on and off states.  Current color applied to the <code>stroke</code> and <code>fill</code> properties of the <code>rect</code> elements.   The following table shows how the graphical rendering changes for some high contrast options. </p>
 
-        <h3 id="currentcolor-example-screenshots">Button Switch Example with Selected High Contrast User Settings in Windows 11</h3>
         <table aria-labelledby="currentcolor-example-screenshots" class="data">
+          <caption>Button Switch Example with Selected High Contrast User Settings in Windows 11</caption>
           <thead>
             <tr>
               <th>Setting</th>
@@ -697,7 +695,7 @@ <h3 id="currentcolor-example-screenshots">Button Switch Example with Selected Hi
           </tbody>
         </table>
 
-        <h2 id="currentcolor-examples">Examples using <code>currentcolor</code> keyword</h2>
+        <h3 id="currentcolor-examples">Examples using <code>currentcolor</code> keyword</h3>
         <ul>
           <li><a href="../../patterns/checkbox/examples/checkbox-mixed.html">Checkbox (Mixed-State)</a></li>
           <li><a href="../../patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>