AccessU-JavaScript/aria-live-forms.html at main · offsetChris/AccessU-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Errors: AccessU Accessible JavaScript</title>
  <style>
     body { font-family: Arial, sans-serif; margin: 0; padding: 20px; font-size:1.2em;}
     /* Add an error class that looks different */

  </style>
</head>

<body>
  <h1>Form errors test</h1>

  <!-- Add an aria-live region that will be filled with error messaging -->

  <!-- Create a form with text search fields, maybe a fieldset of radio buttons! -->


  <script>

    // Add an event listener to the form submit

    // add a function that validates the input fields in some way (maybe # of characters in a text field)
    // If validation fails add a class that changes the appearance of the field
    // If validation fails add aria-invalid="true" to the field
    // If validation fails append a text error message after the invalid field
    // If validtion fails append text to the aria-live error region

  </script>
</body>
</html>