/    Sign up×
Bounties /Pin to ProfileBookmark

Does using a div to add units next to an input field compromise accessibility?

+ 3,000
Copy linkTweet thisAlerts:
Sep 18.2023

In my project, I’ve been implementing text fields by placing the <input> element inside a <label>. Now, I have a requirement to add units after the input fields. I considered using the ::after pseudo-element, but it doesn’t work well with input elements. So I’m thinking of wrapping the <input> in a <div> and using CSS ::after to add the units. Is this approach going to affect accessibility or cause any other issues?  

to post a answer
Front-endHTML

1 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.

Was this helpful?

×

Success!

Help @cosmic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...