Customer Feedback

Required fields are marked with an asterisk (*).

First Name * Last Name * Email Address * Your feedback

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>
        </div>
            <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
            </label>
            <textarea name="message" id="message" maxlength="50"></textarea>

            <button id="show-error" type="submit">
                Submit
            </button>
    </fieldset>
</form>