Cursor rule

1---
2description: Form component accessibility standards and WCAG compliance for form inputs, labels, instructions, and error handling
3globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
4alwaysApply: true
5---
6 
7# Form Accessibility Standards
8 
9Ensures form components follow WCAG compliance and provide proper accessibility for all users including screen reader users and keyboard-only users.
10 
11<rule>
12name: form_accessibility_standards
13description: Enforce form component accessibility standards and WCAG compliance for form inputs, labels, instructions, and error handling
14filters:
15  - type: file_extension
16    pattern: "\\.(vue|jsx|tsx|html|liquid|php|js|ts)$"
17 
18actions:
19  - type: enforce
20    conditions:
21      # Missing label association for form inputs
22      - pattern: "(?i)<(input|textarea|select)[^>]*>"
23        pattern_negate: "(<label[^>]*for|id.*for|aria-label|aria-labelledby|title=)"
24        message: "Form inputs must have programmatically associated labels via label/for, aria-label, aria-labelledby, or title attributes."
25 
26      # Empty or meaningless labels
27      - pattern: "(?i)<label[^>]*>\\s*(?:label|input|field|required)\\s*</label>"
28        message: "Form labels must contain meaningful text that describes the input purpose, not generic terms."
29 
30      # Placeholder as only label
31      - pattern: "(?i)<input[^>]*placeholder=\"[^\"]+\"[^>]*>"
32        pattern_negate: "(<label|aria-label|aria-labelledby|title=)"
33        message: "Placeholder text cannot be the only method of providing a label. Add a proper label element or aria-label."
34 
35      # Missing required field indicators
36      - pattern: "(?i)<(input|textarea|select)[^>]*required[^>]*>"
37        pattern_negate: "(data-required|aria-required=\"true\"|\\*|aria-describedby)"
38        message: "Required fields should use data-required='true' instead of native required attribute, with visual indicators and aria-required='true' for screen readers."
39 
40      # Missing fieldset for grouped inputs
41      - pattern: "(?i)<input[^>]*type=\"(radio|checkbox)\"[^>]*name=\"[^\"]+\"[^>]*>"
42        pattern_negate: "(<fieldset|<div[^>]*role=\"group\")"
43        message: "Radio button and checkbox groups should be wrapped in fieldset or have role='group' for proper grouping."
44 
45      # Missing legend for fieldset
46      - pattern: "(?i)<fieldset[^>]*>"
47        pattern_negate: "<legend"
48        message: "Fieldset elements must have legend elements to provide context for the group."
49 
50      # Missing input purpose identification
51      - pattern: "(?i)<input[^>]*type=\"(text|email|tel|url|password)\"[^>]*>"
52        pattern_negate: "(autocomplete|aria-describedby|aria-label|placeholder)"
53        message: "Text inputs should have autocomplete attributes or other methods to identify their purpose for personal data collection."
54 
55      # Missing error association
56      - pattern: "(?i)<[^>]*aria-invalid=\"true\"[^>]*>"
57        pattern_negate: "(aria-describedby|aria-errormessage)"
58        message: "Inputs with aria-invalid='true' should have error messages associated via aria-describedby or aria-errormessage."
59 
60      # Missing error message visibility
61      - pattern: "(?i)<[^>]*class=\"[^\"]*(?:error|invalid)[^\"]*\"[^>]*>"
62        pattern_negate: "(display.*none|visibility.*hidden|hidden|aria-hidden=\"true\")"
63        message: "Error messages should be visible to users and not hidden with CSS or aria-hidden."
64 
65      # Missing focus management for error summaries
66      - pattern: "(?i)<(div|section)[^>]*(?:error.*summary|summary.*error)[^>]*>"
67        pattern_negate: "(tabindex|focus|scrollIntoView)"
68        message: "Error summary containers should implement focus management to shift focus to the error banner heading when errors appear, improving user experience and accessibility."
69 
70      # Missing form instructions association
71      - pattern: "(?i)<(div|p)[^>]*(?:instruction|help|hint)[^>]*>"
72        pattern_negate: "(aria-describedby|aria-labelledby|id=)"
73        message: "Form instructions should be programmatically associated with their corresponding inputs via aria-describedby."
74 
75      # Missing success message
76      - pattern: "(?i)<form[^>]*>.*</form>"
77        pattern_negate: "(role=\"alert\"|aria-live|success|confirmation)"
78        message: "Forms should provide success confirmation messages, especially for critical operations like financial transactions."
79 
80      # Missing focus management for success messages
81      - pattern: "(?i)<(div|section)[^>]*(?:success|confirmation)[^>]*>"
82        pattern_negate: "(tabindex|focus|scrollIntoView)"
83        message: "Success message containers should implement focus management to shift focus to the success banner heading when messages appear, improving user experience and accessibility."
84 
85      # Missing focusable headings for error/success messages
86      - pattern: "(?i)<(h2|h3)[^>]*(?:error|success|confirmation)[^>]*>"
87        pattern_negate: "tabindex=\"-1\""
88        message: "Error and success message headings should have tabindex='-1' to make them programmatically focusable for focus management."
89 
90      # Missing time limit controls
91      - pattern: "(?i)<form[^>]*>.*(?:time.*limit|session.*expir|expir.*time)"
92        pattern_negate: "(extend|turn.*off|adjust|customize|20.*hour)"
93        message: "Forms with time limits must provide options to extend, turn off, or adjust the time limit, or allow at least 20 hours."
94 
95      # Missing error prevention for critical forms
96      - pattern: "(?i)<form[^>]*(?:legal|financial|transaction|payment|commitment)[^>]*>"
97        pattern_negate: "(confirm|review|reversible|check.*error)"
98        message: "Critical forms (legal/financial) must implement error prevention techniques like confirmation, review, or reversibility."
99 
100      # Missing disabled field alternatives
101      - pattern: "(?i)<input[^>]*disabled[^>]*>"
102        pattern_negate: "(aria-describedby|aria-label|title=|role=\"text\")"
103        message: "Disabled fields that are essential to understanding content must have alternative ways to communicate their information."
104 
105      # Missing data input restrictions communication
106      - pattern: "(?i)<input[^>]*(?:maxlength|pattern|min|max)[^>]*>"
107        pattern_negate: "(aria-describedby|title=|placeholder|aria-label)"
108        message: "Inputs with restrictions (maxlength, pattern, min, max) should communicate these restrictions in labels or instructions."
109 
110      # Help text using div instead of semantic small element
111      - pattern: "(?i)<div[^>]*class=\"[^\"]*help-text[^\"]*\"[^>]*>"
112        pattern_negate: "<small"
113        message: "Help text should use the semantic small element instead of div for better HTML5 compliance and accessibility."
114 
115      # Form sections nested within main element
116      - pattern: "(?i)<main[^>]*>.*<section[^>]*class=\"[^\"]*form-section[^\"]*\"[^>]*>"
117        message: "Form sections should be direct children of the container, not nested within the main element. Use main only for the form itself."
118 
119      # Missing proper section structure
120      - pattern: "(?i)<section[^>]*class=\"[^\"]*form-section[^\"]*\"[^>]*>"
121        pattern_negate: "(</section>|aria-labelledby)"
122        message: "Form sections must be properly closed with </section> tags and have aria-labelledby for accessibility."
123 
124      # Improper section nesting within main element
125      - pattern: "(?i)<main[^>]*>.*<section[^>]*class=\"[^\"]*form-section[^\"]*\"[^>]*>.*</section>"
126        message: "Form sections should not be nested within the main element. Move sections outside main and use main only for the form itself."
127 
128      # Missing container wrapper for form sections
129      - pattern: "(?i)<section[^>]*class=\"[^\"]*form-section[^\"]*\"[^>]*>"
130        pattern_negate: "<div[^>]*class=\"[^\"]*container[^\"]*\"[^>]*>"
131        message: "Form sections should be wrapped in a container div for proper organization and styling."
132 
133      # Missing proper heading structure in form sections
134      - pattern: "(?i)<section[^>]*class=\"[^\"]*form-section[^\"]*\"[^>]*>"
135        pattern_negate: "<h[1-6][^>]*>"
136        message: "Form sections must contain proper heading elements (h1-h6) for accessibility and content structure."
137 
138      # Missing redundant entry prevention
139      - pattern: "(?i)<form[^>]*>.*<input[^>]*name=\"(email|password|confirm)[^\"]*\"[^>]*>"
140        pattern_negate: "(autocomplete|auto.*populate|select.*previous)"
141        message: "Forms requiring redundant information entry should provide auto-population or selection of previously entered data."
142 
143      # Missing keyboard navigation support
144      - pattern: "(?i)<(input|textarea|select|button)[^>]*>"
145        pattern_negate: "(tabindex|onKeyDown|onkeydown|@keydown|v-on:keydown)"
146        message: "Form elements should support keyboard navigation and not interfere with tab order."
147 
148      # Missing focus indicators
149      - pattern: "(?i)<(input|textarea|select|button)[^>]*>"
150        pattern_negate: "(focus|:focus|outline|box-shadow)"
151        message: "Form elements must have visible focus indicators for keyboard navigation."
152 
153      # Missing focus indicators for error/success message headings
154      - pattern: "(?i)<(h2|h3)[^>]*tabindex=\"-1\"[^>]*>"
155        pattern_negate: "(focus|:focus|outline|box-shadow)"
156        message: "Focusable error and success message headings must have visible focus indicators for keyboard navigation."
157 
158      # Help text with insufficient color contrast
159      - pattern: "(?i)<[^>]*class=\"[^\"]*help-text[^\"]*\"[^>]*>"
160        pattern_negate: "(color:\\s*#[0-4][0-9a-fA-F]{5}|color:\\s*#[5-9a-fA-F][0-9a-fA-F]{5})"
161        message: "Help text must have sufficient color contrast (minimum 4.5:1 for normal text, 7:1 recommended). Use darker colors like #495057 for better accessibility."
162 
163      # Missing form validation feedback
164      - pattern: "(?i)<form[^>]*>"
165        pattern_negate: "(validate|check.*error|aria-invalid|aria-describedby)"
166        message: "Forms should provide validation feedback and error checking for user input."
167 
168  - type: suggest
169    message: |
170      **Form Accessibility Best Practices:**
171 
172      **Label Requirements:**
173      - **Programmatic Association:** Labels MUST be programmatically associated with inputs
174      - **Meaningful Text:** Labels MUST contain meaningful, descriptive text
175      - **Visible Labels:** Labels MUST be visible to users
176      - **No Sensory Dependencies:** Labels MUST NOT rely solely on visual characteristics
177      - **Icon Labels:** Icons can be used as visual labels if meaning is self-evident AND semantic label is provided
178 
179      **Label Implementation Patterns:**
180 
181      **Basic Label Association:**
182```html
183      <!-- Good: Label with for attribute -->
184      <label for="username">Username</label>
185      <input type="text" id="username" name="username">
186 
187      <!-- Good: aria-label for simple cases -->
188      <input type="text" aria-label="Search products" placeholder="Enter search term">
189 
190      <!-- Good: aria-labelledby for complex labels -->
191      <h3 id="address-heading">Shipping Address</h3>
192      <input type="text" aria-labelledby="address-heading" name="street">
193```
194 
195      **Required Field Indicators:**
196```html
197      <label for="email">
198        Email Address <span class="required" aria-label="required">*</span>
199      </label>
200      <input type="email"
201             id="email"
202             name="email"
203             required
204             aria-required="true"
205             aria-describedby="email-help">
206      <small id="email-help" class="help-text">
207        We'll use this to send you order confirmations
208      </small>
209```
210 
211      **Input Groups with Fieldset:**
212```html
213      <fieldset>
214        <legend>Contact Preferences</legend>
215        <label for="email-notifications">
216          <input type="checkbox" id="email-notifications" name="notifications[]" value="email">
217          Email Notifications
218        </label>
219        <label for="sms-notifications">
220          <input type="checkbox" id="sms-notifications" name="notifications[]" value="sms">
221          SMS Notifications
222        </label>
223      </fieldset>
224```
225 
226      **Input Purpose Identification:**
227```html
228      <!-- Personal data inputs should have autocomplete -->
229      <label for="full-name">Full Name</label>
230      <input type="text"
231             id="full-name"
232             name="fullName"
233             autocomplete="name">
234 
235      <label for="email-address">Email Address</label>
236      <input type="email"
237             id="email-address"
238             name="email"
239             autocomplete="email">
240 
241      <label for="phone-number">Phone Number</label>
242      <input type="tel"
243             id="phone-number"
244             name="phone"
245             autocomplete="tel">
246```
247 
248      **Error Handling and Validation:**
249 
250      **Error Message Association:**
251```html
252      <label for="password">Password</label>
253      <input type="password"
254             id="password"
255             name="password"
256             aria-describedby="password-requirements password-error"
257             aria-invalid="false">
258 
259      <small id="password-requirements" class="help-text">
260        Password must be at least 8 characters with uppercase, lowercase, and number
261      </small>
262 
263      <div id="password-error" class="error-message" role="alert" hidden>
264        Password does not meet requirements
265      </div>
266```
267 
268      **Real-time Validation:**
269```javascript
270      function validatePassword(input) {
271        const password = input.value;
272        const requirements = document.getElementById('password-requirements');
273        const error = document.getElementById('password-error');
274 
275        // Check requirements
276        const hasLength = password.length >= 8;
277        const hasUpper = /[A-Z]/.test(password);
278        const hasLower = /[a-z]/.test(password);
279        const hasNumber = /\d/.test(password);
280 
281        if (hasLength && hasUpper && hasLower && hasNumber) {
282          input.setAttribute('aria-invalid', 'false');
283          error.hidden = true;
284          requirements.className = 'help-text valid';
285        } else {
286          input.setAttribute('aria-invalid', 'true');
287          error.hidden = false;
288          requirements.className = 'help-text invalid';
289        }
290      }
291```
292 
293      **Form Instructions and Help:**
294 
295      **Input Instructions:**
296```html
297      <label for="zip-code">ZIP Code</label>
298      <input type="text"
299             id="zip-code"
300             name="zipCode"
301             maxlength="5"
302             pattern="[0-9]{5}"
303             aria-describedby="zip-help">
304      <div id="zip-help" class="help-text">
305        Enter 5-digit ZIP code (e.g., 12345)
306      </div>
307```
308 
309      **Form-level Instructions:**
310```html
311      <form aria-describedby="form-instructions">
312        <div id="form-instructions" class="form-instructions">
313          <p>All fields marked with * are required. Please review your information before submitting.</p>
314        </div>
315 
316        <!-- Form fields here -->
317      </form>
318```
319 
320      **Success and Error Messages:**
321 
322      **Success Confirmation:**
323```html
324      <div id="success-message"
325           class="success-message"
326           role="alert"
327           aria-live="polite"
328           hidden>
329        Your order has been successfully submitted! Order #12345
330      </div>
331```
332 
333      **Error Summary:**
334```html
335      <div id="error-summary"
336           class="error-summary"
337           role="alert"
338           aria-live="assertive"
339           hidden>
340        <h2 tabindex="-1">Please correct the following errors:</h2>
341        <ul>
342          <li><a href="#email">Email address is required</a></li>
343          <li><a href="#phone">Phone number format is invalid</a></li>
344        </ul>
345      </div>
346```
347 
348            **Focus Management for Error and Success Messages:**
349```javascript
350      function showErrorSummary(errors) {
351        const errorSummary = document.getElementById('error-summary');
352        const errorHeading = errorSummary.querySelector('h2');
353 
354        // Show error summary
355        errorSummary.classList.add('show');
356 
357        // Shift focus to error banner heading for better user experience
358        // Use requestAnimationFrame to ensure the element is fully visible before focusing
359        requestAnimationFrame(() => {
360          if (errorHeading) {
361            errorHeading.focus();
362            errorHeading.scrollIntoView({ behavior: 'smooth', block: 'start' });
363          }
364        });
365      }
366 
367      function showSuccessMessage() {
368        const successMessage = document.getElementById('success-message');
369        const successHeading = successMessage.querySelector('h3');
370 
371        successMessage.classList.add('show');
372 
373        // Shift focus to success message heading for better user experience
374        // Use requestAnimationFrame to ensure the element is fully visible before focusing
375        requestAnimationFrame(() => {
376          if (successHeading) {
377            successHeading.focus();
378            successHeading.scrollIntoView({ behavior: 'smooth', block: 'start' });
379          }
380        });
381      }
382```
383 
384      **Focus Management Benefits:**
385      - **User Experience:** Places cursor at beginning of error information
386      - **Accessibility:** Screen readers announce error content from the start
387      - **Navigation:** Users can easily navigate through error list
388      - **Context:** Provides clear starting point for error resolution
389 
390      **Implementation Considerations:**
391      - **Timing:** Use requestAnimationFrame to ensure elements are fully visible before focusing
392      - **Fallback:** Provide fallback focus management if headings aren't found
393      - **Smooth Scrolling:** Use smooth scrolling for better user experience
394      - **Focus Indicators:** Ensure focusable headings have visible focus indicators
395      - **Browser Behavior:** Prevent default browser focus behavior on form submission
396 
397      **CSS for Focusable Error and Success Message Headings:**
398```css
399      /* Make error and success message headings focusable */
400      .error-summary h2:focus,
401      .success-message h3:focus {
402        outline: 3px solid #0056b3;
403        outline-offset: 2px;
404        border-radius: 4px;
405      }
406 
407      /* High contrast mode support */
408      @media (prefers-contrast: more) {
409        .error-summary h2:focus,
410        .success-message h3:focus {
411          outline: 3px solid #000000;
412        }
413      }
414```
415 
416      **Form Structure and Semantic HTML:**
417 
418      **Proper Section Organization:**
419```html
420      <div class="container">
421        <!-- Form Instructions (standalone section) -->
422        <section class="form-section" aria-labelledby="instructions-heading">
423          <h2 id="instructions-heading">Form Instructions</h2>
424          <small id="form-instructions" class="help-text">
425            <!-- Instructions content -->
426          </small>
427        </section>
428 
429        <!-- Time Limit Warning (standalone div) -->
430        <div class="time-limit-warning" role="alert" aria-live="polite">
431          <!-- Timer content -->
432        </div>
433 
434        <!-- Error Summary (standalone div) -->
435        <div id="error-summary" class="error-summary" role="alert" aria-live="assertive">
436          <!-- Error content -->
437        </div>
438 
439        <!-- Main Form (contained in main landmark) -->
440        <main role="main" aria-labelledby="main-heading">
441          <h2 id="main-heading" class="sr-only">Form Content</h2>
442          <form id="main-form" onsubmit="handleFormSubmit(event)">
443            <!-- Form sections within the form -->
444            <section class="form-section" aria-labelledby="personal-info-heading">
445              <h2 id="personal-info-heading">Personal Information</h2>
446              <!-- Form fields -->
447            </section>
448          </form>
449        </main>
450 
451        <!-- Additional sections after the form -->
452        <section class="form-section" aria-labelledby="disabled-field-heading">
453          <h2 id="disabled-field-heading">Disabled Field Example</h2>
454          <!-- Content -->
455        </section>
456      </div>
457```
458 
459      **Help Text Semantic Elements:**
460```html
461      <!-- Good: Use small element for help text -->
462      <label for="email">Email Address</label>
463      <input type="email" id="email" name="email" aria-describedby="email-help">
464      <small id="email-help" class="help-text">
465        We'll use this to send you order confirmations
466      </small>
467 
468      <!-- Avoid: Using div for help text -->
469      <div id="email-help" class="help-text">
470        We'll use this to send you order confirmations
471      </div>
472```
473 
474      **Help Text Color Contrast Requirements:**
475```css
476      .help-text {
477        font-size: 0.875rem;
478        color: #495057; /* 7.0:1 contrast ratio on white */
479        margin-top: 4px;
480        margin-bottom: 8px;
481        display: block;
482        line-height: 1.4;
483      }
484 
485      /* High contrast mode support */
486      @media (prefers-contrast: more) {
487        .help-text,
488        small.help-text {
489          color: #000000; /* Maximum contrast */
490        }
491      }
492```
493 
494      **Structural Guidelines:**
495      - **Container Organization:** All sections should be direct children of the container div
496      - **Main Landmark:** Use main element only for the form itself, not for wrapper content
497      - **Section Semantics:** Use section elements for major content areas with proper headings
498      - **Help Text Elements:** Use small elements for supplementary text and instructions
499      - **Color Contrast:** Ensure help text meets minimum 4.5:1 contrast ratio (7.0:1 recommended)
500      - **Proper Nesting:** Avoid nesting sections within other sections or main elements
501 
502      **Time Limits and Error Prevention:**
503 
504      **Time Limit Controls:**
505```html
506      <div class="time-limit-warning" role="alert" aria-live="polite">
507        <p>Your session will expire in <span id="time-remaining">14:30</span> minutes</p>
508        <button type="button" onclick="extendSession()">Extend Session</button>
509        <button type="button" onclick="turnOffTimer()">Turn Off Timer</button>
510      </div>
511```
512 
513      **Critical Form Confirmation:**
514```html
515      <form onsubmit="return confirmSubmission()">
516        <!-- Form fields -->
517 
518        <div class="confirmation-section">
519          <h3>Review Your Information</h3>
520          <div id="order-summary" class="order-summary">
521            <!-- Order summary content -->
522          </div>
523 
524          <label for="confirm-checkbox">
525            <input type="checkbox" id="confirm-checkbox" required>
526            I confirm that all information is correct and I agree to the terms
527          </label>
528        </div>
529 
530        <button type="submit">Submit Order</button>
531      </form>
532```
533 
534      **JavaScript for Form Accessibility:**
535 
536      **Form Validation:**
537```javascript
538      function validateForm() {
539        const form = document.querySelector('form');
540        const inputs = form.querySelectorAll('input, textarea, select');
541        let hasErrors = false;
542 
543        inputs.forEach(input => {
544          if (input.hasAttribute('required') && !input.value.trim()) {
545            showError(input, 'This field is required');
546            hasErrors = true;
547          } else if (input.getAttribute('aria-invalid') === 'true') {
548            hasErrors = true;
549          }
550        });
551 
552        if (hasErrors) {
553          showErrorSummary();
554          return false;
555        }
556 
557        return true;
558      }
559 
560      function showError(input, message) {
561        const errorId = input.id + '-error';
562        let errorElement = document.getElementById(errorId);
563 
564        if (!errorElement) {
565          errorElement = document.createElement('div');
566          errorElement.id = errorId;
567          errorElement.className = 'error-message';
568          errorElement.role = 'alert';
569          input.parentNode.appendChild(errorElement);
570        }
571 
572        errorElement.textContent = message;
573        errorElement.hidden = false;
574        input.setAttribute('aria-invalid', 'true');
575        input.setAttribute('aria-describedby',
576          input.getAttribute('aria-describedby') + ' ' + errorId);
577      }
578```
579 
580      **Focus Management:**
581```javascript
582      function focusFirstError() {
583        const firstError = document.querySelector('[aria-invalid="true"]');
584        if (firstError) {
585          firstError.focus();
586          firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
587        }
588      }
589 
590      function focusSuccessMessage() {
591        const successMessage = document.getElementById('success-message');
592        if (successMessage) {
593          successMessage.hidden = false;
594          successMessage.focus();
595        }
596      }
597```
598 
599      **CSS for Accessibility:**
600 
601      **Focus Indicators:**
602```css
603      /* High contrast focus indicators */
604      input:focus,
605      textarea:focus,
606      select:focus,
607      button:focus {
608        outline: 3px solid #0056b3;
609        outline-offset: 2px;
610        border-color: #0056b3;
611      }
612 
613      /* Error states */
614      input[aria-invalid="true"] {
615        border-color: #dc3545;
616        border-width: 2px;
617      }
618 
619      /* Required field indicators */
620      .required {
621        color: #dc3545;
622        font-weight: bold;
623      }
624 
625      /* Help text styling */
626      .help-text {
627        font-size: 0.875rem;
628        color: #6c757d;
629        margin-top: 0.25rem;
630      }
631 
632      /* Error message styling */
633      .error-message {
634        color: #dc3545;
635        font-size: 0.875rem;
636        margin-top: 0.25rem;
637        font-weight: 500;
638      }
639 
640      /* Success message styling */
641      .success-message {
642        color: #198754;
643        background-color: #d1e7dd;
644        border: 1px solid #badbcc;
645        padding: 1rem;
646        border-radius: 0.375rem;
647        margin: 1rem 0;
648      }
649```
650 
651      **Testing and Validation:**
652 
653      **Accessibility Checklist:**
654      - All form inputs have associated labels
655      - Required fields are clearly indicated
656      - Error messages are associated with inputs
657      - Form can be completed with keyboard only
658      - Focus indicators are visible and clear
659      - Screen readers can access all form content
660      - Time limits have appropriate controls
661      - Critical forms have error prevention
662      - Success/error messages are announced
663      - Form instructions are accessible
664 
665      **Common Mistakes to Avoid:**
666      - Using placeholder text as the only label
667      - Missing required field indicators
668      - Not associating error messages with inputs
669      - Missing form-level instructions
670      - No success confirmation messages
671      - Insufficient time limit controls
672      - Missing error prevention for critical forms
673      - Poor focus management
674      - Inaccessible validation feedback
675      - Missing input purpose identification
676 
677metadata:
678  priority: high
679  version: 1.0
680</rule>
681