Customer Feedback

Required fields are marked with an asterisk (*).

UX / Accessibility Requirements

  • A form element consists of a fieldset and it has a legend.
  • Helper text at the top of the form indicating how required fields are marked with an asterisk *
  • The helper text is programmatically associated with the fieldset via aria-describedby.
  • Submit button is always interactive [avoid disabled submit buttons to indicate the form is not complete].
  • Submit button has a type="submit".
  • Inline errors can appear dynamically but they should not own aria-live or role="alert". This helps reduce screen reader announcement collision or interruptions.
  • Upon submission, keyboard focus moves to the first field with the error.
  • Errors are programmatically associated with aria-describedby pointing to a unique ID found on the element wrapping the error message.
  • Required fields have the required attribute.
  • Form fields with errors have aria-invalid="true".
  • When errors are fixed by the user, automatically remove those errors from the page and remove aria-invalid="true" and reference to the error in aria-describedby.
  • Form fields own autocomplete attributes with appropriate values which is a requirement for 1.3.5 Identify Input Purpose (Level AA).
  • Note: The alert popup upon successful submission is for demo purposes only and real-world confirmations should not follow this pattern.
    <form id="demo-form-validation" novalidate>
    <fieldset aria-describedby="form-desc">
        <legend><h2>Customer Feedback</h2></legend>
        <div class="hint" id="form-desc">
            <p>Required fields are marked with an asterisk (*).</p>
            <label for="first-name">First Name *</label>
            <input type="text" name="first-name" id="first-name" autocomplete="given-name" required>

            <label for="last-name">Last Name *</label>
            <input type="text" name="last-name" id="last-name" autocomplete="family-name" required>

            <label for="email-address">Email Address *</label>
            <input type="email" name="email-address" id="email-address" autocomplete="email" required>

            <label for="message">
                Your feedback
            <textarea name="message" id="message" maxlength="50"></textarea>

            <button id="show-error" type="submit">