SiteLint documentation and guidelines

Invalid definition of input purpose

Description

Identifying the purpose of input fields in a form enhances accessibility by helping assistive technologies understand and convey the role of each input to users. Using the autocomplete attribute and ARIA roles can significantly improve the user experience, particularly for users with disabilities who rely on screen readers and other assistive technologies.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to understand the purpose of each input field. Proper identification ensures that screen readers can announce the correct purpose of the fields.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive input purposes, helping them understand what information is required.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices can fill out forms more efficiently when input purposes are clearly identified.

Why it matters

Correctly identifying input purposes improves the usability and accessibility of forms by providing context and guidance to all users. This practice ensures that users understand what information is required and can interact with forms more effectively. It also helps meet accessibility standards, making web content more inclusive.

Coding problems and solutions

Common coding problems

  • Missing autocomplete attribute: input fields lack the autocomplete attribute, making it harder for assistive technologies to identify their purpose.
  • Incorrect use of ARIA roles: ARIA roles are used incorrectly or not at all, leading to confusion for assistive technologies.
  • Lack of descriptive labels: input fields do not have descriptive labels, making it difficult for users to understand their purpose.

How to fix it

Use the autocomplete attribute

Add the autocomplete attribute to input fields to specify their purpose.

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

Use ARIA roles and properties

Apply appropriate ARIA roles and properties to enhance the identification of input purposes.

Incorrect example
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Correct example
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email" aria-label="Email address">

Provide descriptive labels

Ensure that input fields have clear and descriptive labels.

Incorrect example
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
Correct example
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">

Known limitations

  • Complex forms: for complex forms, ensure that each input field has a specific and accurate purpose identified.
  • Dynamic content: when adding dynamic form fields, ensure that their purposes are correctly identified and conveyed to assistive technologies.
  • Testing across devices: test forms across different devices and screen readers to ensure that input purposes are correctly identified and announced.

Resources

Rule

  • ID: identify-input-purpose