Updated to labledby

clmedders · Aug 22, 2024 · e8d17cc · e8d17cc
1 parent fd67352
commit e8d17cc
Showing 1 changed file with 29 additions and 26 deletions.
diff --git a/accessability-testing/index.html b/accessability-testing/index.html
@@ -12,6 +12,20 @@
 fieldset + legend
 div + role="group" + aria-label="name of group" -->
 
+<!-- Create a standalone html page with a form in it that can be tested by Amy, maybe using github pages.
+
+The test should include 2 things:
+
+1. The USWDS inline alert that has attributes:
+
+role="region" aria-live="polite" aria-label="informative alert"
+
+2. A form that used the different grouping methods listed here
+https://www.w3.org/WAI/tutorials/forms/grouping/
+
+fieldset + legend
+div + role="group" + aria-label="name of group" -->
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -35,43 +49,32 @@
 <!-- uswds inline alert that has role="region" aria-live="polite" aria-label="informative alert" -->
 <div class="usa-alert usa-alert--info usa-alert--no-icon" role="region" aria-live="polite" aria-label="informative alert">
   <div class="usa-alert__body">
-    <p class="usa-alert__text">
-      Lorem ipsum dolor sit amet, elit, sed do eiusmod.
+    <p class="usa-alert__text" id="alert-text">
+      Below is a form that will take in info!
     </p>
   </div>
 </div>
 <br>
 <br>
 <br>
 <br>
-<fieldset>
-  <legend>Output format</legend>
-    <div>
-      <input type="radio" name="format" id="txt" value="txt">
-      <label for="txt">Text file</label>
-    </div>
-    <div>
-      <input type="radio" name="format" id="csv" value="csv">
-      <label for="csv">CSV file</label>
-    </div>
-  </fieldset>
-<br>
-<br>
 <br>
 <br>
-<div role="group" aria-labelledby="shipping_head">
-	<div id="shipping_head">Shipping Address:</div>
-	<div>
-		<label for="shipping_name">
+<div role="group" aria-labelledby="alert-text">
+    <div id="shipping_head">Shipping Address:</div>
+    <div>
+        <label for="shipping_name">
         Name:
-    </label><br>
-		<input type="text" name="shipping_name" id="shipping_name">
-	</div>	<div>
-		<label for="shipping_address">
+    </label>
+
+        <input type="text" name="shipping_name" id="shipping_name">
+    </div>	<div>
+        <label for="shipping_address">
         Address:
-    </label><br>
-		<input type="text" name="shipping_address" id="shipping_address">
-	</div>
+    </label>
+
+        <input type="text" name="shipping_address" id="shipping_address">
+    </div>
 </div>
 </div>
 </body>