Learn how to improve the accessibility of text input elements in HTML by using ARIA attributes. This article covers various ARIA attributes that can be used to make text input elements more accessible, including aria-label, aria-labelledby, aria-describedby, aria-required, and more. By implementing these attributes, you can make your web forms and applications more inclusive and accessible to users with disabilities.

1. aria-label:

This property can be used to provide a label for the input element, which can be read by screen readers. It should be used when a visible label cannot be provided.

Example:

<input type="text" aria-label="Enter your name">

2. aria-labelledby:

This property can be used to associate the input element with a label in the page, which can be read by screen readers.

Example:

<label for="name">Enter your name:</label>
<input type="text" id="name" aria-labelledby="name">

3. aria-describedby:

This property can be used to associate the input element with additional descriptive text, such as a hint or a help message.

Example:

<input type="text" aria-describedby="name-help">
<span id="name-help">Enter your full name, including your last name.</span>

4. aria-invalid:

This property can be used to indicate whether the input value is invalid.

Example:

<input type="text" required aria-invalid="true" aria-describedby="error-message">
<span class="validation-message" id="">This field is required</span>

5. aria-autocomplete:

This property can be used to specify whether the input should provide suggestions, and what type of suggestions should be provided.

Example:

<input type="text" aria-autocomplete="list">

6. aria-expanded:

This property can be used to indicate whether the input's associated dropdown or list is expanded or collapsed.

Example:

<input type="text" aria-controls="dropdownList" aria-expanded="false">
<ul id="dropdownList">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>

7. aria-required:

This attribute can be used to indicate that the input is required, and that a value must be provided by the user.

Example:

<input type="text" aria-required="true">

8. aria-placeholder:

This attribute can be used to provide a hint or an example value for the input element.

Example:

<input type="text" aria-placeholder="Enter your email address">

9. aria-controls:

This attribute can be used to associate the input element with a related element, such as a dropdown or a list.

Example:

<input type="text" aria-controls="emailSuggestions">
<ul id="emailSuggestions">
  <li>example1@example.com</li>
  <li>example2@example.com</li>
  <li>example3@example.com</li>
</ul>

10. aria-selected:

This attribute can be used to indicate whether an option in a list or a dropdown is currently selected.

Example:

<input type="text" aria-controls="colorList">
<ul id="colorList">
  <li aria-selected="true">Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

11. aria-disabled:

This attribute can be used to indicate that the input element is disabled and cannot be interacted with.

Example:

<input type="text" aria-disabled="true">

These ARIA attributes can help improve the accessibility of input elements by providing additional information to assistive technologies such as screen readers and also help improve the accessibility of text input elements, making it easier for users with disabilities to understand and interact with them.

Follow me on

Twitter
Github
LinkedIn