10 Replies
No, for can only contain a single target
But there is 3 input for 1 label. How should i do it?
I'd probably label the first one and call it a day, but I don't know about the accessibility implications of that
Ok
Ok. Thanks a lot.
When people have inputs they don’t want a visual label for, it’s common to give a label for each input that describes it then add the class “sr-only” or “visually-hidden” to the labels you don’t want to be seen on the page. And add the styles to your stylesheet
Screen readers have trouble with forms when there isn’t a label for every input
pinging in case you miss hart's answer, this is important to get right
Thanks for the tip, hart. It's been a while since I had a form where I needed to do that, but it's good to know how to handle it when I do! 🙂
of course! its a class i keep in my css reset so i can always throw it on when i need it. KP actually recommends using "visually-hidden" which does make sense to name , it describes more whats going on if someone is exhausted and is like "sr... whats sr-only?". but yes thats a helpful one to keep things more accessible but still hide labels on form elements if you dont want them. basically the same as using an aria-label but since screen readers seem to freak without an actual <label /> it just ensures everyones happy.
Also, don’t do first and last names, allow whoever is giving you their name to choose how to give it. You almost never need to know someone’s split up name and it also makes it easier for people who’s names don’t neatly fit into “first” and “last” to be free to enter it
That's a very good point too. I don't have a middle name and a lot of people in the Netherlands have what's called a "tussenvoegsel", which is usually something like "of" or "the". Like, Joe the Baker would be a common Dutch name. There's no proper way to enter that into a first/last or first/middle/last setup