Set your Publisher ID in src/config/ads.ts to display live ads.
Accessible Forms, Inputs & Error Feedback
<label for="...">, aria-describedby for error messages, and autocomplete
Forms are the primary interactive transactional touchpoint on the web. Proper labeling and programmatic error associations are essential.
Connecting Labels and Error Messages
Explicit Label Association: Always match the <label for="inputId"> to <input id="inputId">. Clicking the label also focuses the input, expanding touch target area.
aria-describedby: Associates helper text or validation error messages with the input so screen readers read the error automatically upon focusing.
aria-invalid="true": Notifies assistive technology that the field currently contains an error.
autocomplete="email": Helps users with cognitive or motor difficulties autofill common inputs.
<div class="form-group">
<label for="user-email">Email Address <span aria-hidden="true">*</span></label>
<input type="email"
id="user-email"
name="email"
autocomplete="email"
required
aria-invalid="true"
aria-describedby="email-error">
<p id="email-error" class="error-text">
Please enter a valid email address (e.g. name@domain.com)
</p>
</div>Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
Which ARIA attribute connects an input field directly to its associated validation error message element?