Join the Webstudio community

Updated 2 months ago

Auto labels on inputs/select/text area/etc

At a glance

The post asks if there is a way to automatically create and link a label when adding form elements for accessibility. The comments discuss the challenges of this, such as how to handle labels added separately from the input, and the need to know which label belongs to which input. Community members suggest that automatically adding a label when an input is added could be valuable, but note that this may not be possible in all cases. One community member proposes an autocomplete feature for the labeledBy attribute as a potential solution to make it easier to associate labels with inputs. Overall, there is no explicitly marked answer, but the discussion explores the challenges and potential approaches to automatically linking labels and inputs.

Labels (or aria-label, labeled by, etc.) are required for accessibility. Is there a way to automatically create and link a label when adding these types of form elements?
O
J
8 comments
how would you do that if label is added separately?
we would need to know when label belongs to a certain input
If you added a label separately, you'd need to hook it up manually. If you add an input/select/etc I was thinking it would add a label automatically. Would you see any value in this suggestion?
we add a few example inputs with labels with the form, so we could potentially automate it there, but not in general, because you don't add an input component and then label component along with it
input is input, label is label
one thing we could do is to have autocomplete for labeledBy so that one doesn't need to create unique ids themselves
so that these are managed and on needs to select the right id only
I like that autocomplete idea.
Add a reply
Sign up and join the conversation on Discord