Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyUsing a div to add units next to an input field does not inherently compromise accessibility, but it does depend on how you implement it.
If you simply add a div with text next to the input field, screen readers may not associate the unit with the input field, which could lead to confusion for users who rely on these assistive technologies.
To ensure accessibility, you should use the aria-describedby attribute on the input field to reference the id of the div containing the unit. This way, screen readers will read out the unit when the user focuses on the input field.
Here's an example:
In this example, when a user focuses on the input field, a screen reader will read out something like "text input, kg". This makes it clear to the user that the input field is expecting a weight in kilograms.
Does using a div to add units next to an input field compromise accessibility?
In my project, I’ve been implementing text fields by placing the <input><label>::after<input><div>::after
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyUsing a div to add units next to an input field does not inherently compromise accessibility, but it does depend on how you implement it. If you simply add a div with text next to the input field, screen readers may not associate the unit with the input field, which could lead to confusion for users who rely on these assistive technologies.
To ensure accessibility, you should use the aria-describedby attribute on the input field to reference the id of the div containing the unit. This way, screen readers will read out the unit when the user focuses on the input field.
Here's an example:
<div>
<input type="text" id="weight" aria-describedby="weightUnit">
<div id="weightUnit">kg</div>
</div>
In this example, when a user focuses on the input field, a screen reader will read out something like "text input, kg". This makes it clear to the user that the input field is expecting a weight in kilograms.