added additional elements

w3c · Feb 1, 2025 · f3eed1d · f3eed1d
1 parent 22a275e
commit f3eed1d
Showing 1 changed file with 50 additions and 18 deletions.
diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html
@@ -677,14 +677,12 @@ <h2>Contrast Themes (Forced Colors)</h2>
           <caption>Contrast Themes Effects for Windows 11 on HTML Content</caption>
           <thead>
             <tr>
-              <th rowspan="2" style="vertical-align: bottom">Elem.</th>
-              <th colspan="2">Style</th>
+              <th rowspan="2" style="vertical-align: bottom">Element</th>
               <th rowspan="2" style="vertical-align: bottom">Sample</th>
-              <th colspan="3">Contrast Themes Windows 11</th>
+              <th colspan="4">Contrast Themes Windows 11</th>
             </tr>
             <tr>
-              <th>Color</th>
-              <th>Background</th>
+              <th>Aquatic</th>
               <th>Desert</th>
               <th>Dusk</th>
               <th>Night Sky</th>
@@ -693,16 +691,13 @@ <h2>Contrast Themes (Forced Colors)</h2>
           <tbody>
             <tr>
               <td>
-                <code>P</code>
+                <code>p</code>
               </td>
               <td>
-                <code>#000</code>
+                <p>Sample Text</p>
               </td>
               <td>
-                <code>#fff</code>
-              </td>
-              <td>
-                <p>Sample Text</p>
+                <img src="images/p-element-aquatic-theme.png" alt="screen shot of paragraph with no styling in Auquatic Contrast theme">
               </td>
               <td>
                 <img src="images/p-element-desert-theme.png" alt="screen shot of paragraph with no styling in Desert Contrast theme">
@@ -716,25 +711,62 @@ <h2>Contrast Themes (Forced Colors)</h2>
             </tr>
             <tr>
               <td>
-                <code>P</code>
+                <code>a</code>
               </td>
               <td>
-                <code>#385170</code>
+                <p><a href="#">Sample Link</a></p>
               </td>
               <td>
-                <code>#ececec</code>
+                <img src="images/a-element-aquatic-theme.png" alt="screen shot of link in Aquatic Contrast theme">
               </td>
               <td>
-                <p style="color:  #385170; background-color: #ececec">Sample Text</p>
+                <img src="images/a-element-desert-theme.png" alt="screen shot of link in Desert Contrast theme">
               </td>
               <td>
-                <img src="images/p-element-desert-theme.png" alt="screen shot of paragraph with no styling in Desert Contrast theme">
+                <img src="images/a-element-dusk-theme.png" alt="screen shot of link in Dusk Contrast theme">
               </td>
               <td>
-                <img src="images/p-element-dusk-theme.png" alt="screen shot of paragraph with no styling in Dusk Contrast theme">
+                <img src="images/a-element-desert-theme.png" alt="screen shot of link in Night Skiy Contrast theme">
               </td>
+            </tr>
+            <tr>
               <td>
-                <img src="images/p-element-desert-theme.png" alt="screen shot of paragraph with no styling in Night Skiy Contrast theme">
+                <code>button</code>
+              </td>
+              <td>
+                <p><button>Sample Button</button></p>
+              </td>
+              <td>
+                <img src="images/button-element-aquatic-theme.png" alt="screen shot of button in Aquatic Contrast theme">
+              </td>
+              <td>
+                <img src="images/button-element-desert-theme.png" alt="screen shot of button in Desert Contrast theme">
+              </td>
+              <td>
+                <img src="images/button-element-dusk-theme.png" alt="screen shot of button in Dusk Contrast theme">
+              </td>
+              <td>
+                <img src="images/button-element-desert-theme.png" alt="screen shot of button in Night Skiy Contrast theme">
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <code>input<br>[type="text"]</code>
+              </td>
+              <td>
+                <p><input type="text" value="Sample value"></p>
+              </td>
+              <td>
+                <img src="images/input-text-element-aquatic-theme.png" alt="screen shot of text box in Aquatic Contrast theme">
+              </td>
+              <td>
+                <img src="images/input-text-element-desert-theme.png" alt="screen shot of text box in Desert Contrast theme">
+              </td>
+              <td>
+                <img src="images/input-text-element-dusk-theme.png" alt="screen shot of text box within Dusk Contrast theme">
+              </td>
+              <td>
+                <img src="images/input-text-element-desert-theme.png" alt="screen shot of text box in Night Skiy Contrast theme">
               </td>
             </tr>
           </tbody>