SiteLint documentation and guidelines

Misused attribute on the input HTML element

Description

The input element in HTML is used to create interactive controls for web-based forms to accept data from the user. Misusing input attributes can lead to accessibility issues, usability problems, and data validation errors. Proper use of input attributes ensures that forms are accessible, user-friendly, and function correctly.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on assistive technologies to understand and interact with form elements. Incorrect or missing attributes can prevent screen readers from conveying the necessary information.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear, consistent, and well-labeled form controls. Misused attributes can lead to confusion and errors.
  • Motor impairments: users with motor impairments who navigate forms using keyboards or assistive devices need correctly configured input fields to interact effectively.

Why it matters

Properly using input attributes ensures that users can complete forms efficiently and accurately. Misusing these attributes can lead to incomplete submissions, user frustration, and accessibility barriers. Adhering to best practices for input attributes helps maintain form functionality and accessibility for all users.

Coding problems and solutions

Common coding problems

  • Incorrect type attribute: using an incorrect type attribute for input fields, leading to improper validation and user input issues.
  • Missing label associations: failing to associate input fields with labels, making it difficult for users to understand the purpose of each field.
  • Lack of required attributes: missing necessary attributes like name, id, or value, leading to data submission and accessibility issues.

How to fix it

Use the correct type attribute

Ensure the type attribute matches the expected input data.

Example
<!-- Correct -->
<input type="email" id="email" name="email" placeholder="Enter your email">

<!-- Incorrect -->
<input type="text" id="email" name="email" placeholder="Enter your email">

Associate Labels with Input Fields

Use the for attribute on <label> elements to associate them with corresponding input fields.

Incorrect example
<label>Username:</label>
<input type="text" id="username" name="username">
Correct example
<label for="username">Username:</label>
<input type="text" id="username" name="username">

Include necessary attributes

Ensure all necessary attributes like name, id, required, and value are included and properly configured.

Incorrect example
<label for="password">Password:</label>
<input type="password" id="password">
Correct example
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

Use ARIA attributes for enhanced accessibility

When needed, use ARIA (Accessible Rich Internet Applications) attributes to provide additional context.

Incorrect example
<label for="search">Search:</label>
<input type="search" id="search" name="search">
Correct example
<label for="search">Search:</label>
<input type="search" id="search" name="search" aria-label="Search for articles">

Known limitations

  • Complex forms: for complex forms, ensure that all input fields are correctly configured and validated.
  • Dynamic content: when adding dynamic form fields, ensure they are properly labeled and include necessary attributes.
  • Browser compatibility: different browsers may handle input attributes and validation differently. Test across multiple browsers to ensure consistency.

Resources

Rule

  • ID: misused-input-attribute