SiteLint documentation and guidelines

Misused required attribute

Description

The required attribute in HTML is used to indicate that a form field must be filled out before submitting the form. Proper use of the required attribute enhances accessibility and ensures that users understand which fields are mandatory. Misusing this attribute can lead to confusion and accessibility issues, especially for users relying on assistive technologies.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need clear indications of required fields to avoid submitting incomplete forms.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and consistent form requirements to avoid confusion and ensure they provide all necessary information.
  • Motor impairments: users with motor impairments who navigate forms using keyboards or other assistive devices need to understand which fields are required to avoid unnecessary interactions.

Why it matters

Properly using the required attribute ensures that users can successfully complete forms by providing all necessary information. Misusing this attribute can lead to incomplete form submissions, user frustration, and accessibility barriers, particularly for users relying on assistive technologies.

Coding problems and solutions

Common coding problems

  • Marking non-essential fields as required: indicating that non-essential fields are required, leading to unnecessary form validation errors.
  • Failing to mark essential fields as required: not using the required attribute on fields that are necessary for form submission, causing incomplete data collection.
  • Inconsistent application of the required attribute: applying the required attribute inconsistently across similar fields, causing confusion.

How to Fix It

Use the required attribute only for essential fields

Ensure that only fields that are absolutely necessary for form submission are marked as required. Don’t use required or aria-required attributes on the following HTML elements: input type hidden, image, and button type submit, reset, and button.

Consistently mark essential fields

Apply the required attribute consistently across all essential fields in the form.

Incorrect example
<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    
    <label for="confirm-password">Confirm Password:</label>
    <input type="password" id="confirm-password" name="confirm-password">
</form>
Correct example
<form>
    <label for="username">Username (required)</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">Password (required)</label>
    <input type="password" id="password" name="password" required>
    
    <label for="confirm-password">Confirm Password (required)</label>
    <input type="password" id="confirm-password" name="confirm-password" required>
</form>
Use the pseudo-element ::after or ::before to add (required) and hide it from the assistive technologies to avoid reading required twice: from the required attribute and the text required in the label. Read the article: Hide content in CSS pseudo elements from screen readers.

Provide clear instructions

Use clear labels and instructions to indicate required fields, and ensure that screen readers can convey this information effectively.

Known limitations

  • Dynamic forms: for dynamically generated forms, ensure that the required attribute is correctly applied and updated as needed.
  • Browser compatibility: different browsers may handle the required attribute and validation differently. Test across multiple browsers to ensure consistency.
  • User feedback: provide immediate and clear feedback when users attempt to submit a form with missing required fields.

Resources