CrankShaft
CrankShaft copied to clipboard
Add Boolean and or wrapping class for HS forms to hide labels in an accessible way
I have been using this code to hide labels without killing accessibility completely, we can roll it into the framework's cs-defaults.css and make it optional via boolean in the theme-variables.css file as well as have a class that can trigger it as well if a site is supposed to only do it in specific scenarios.
If anyone feels like doing the honors of implementing this go for it! :)
form.hs-form label span {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
form.hs-form label.hs-form-radio-display span {
display: inline-block;
}
Note this would still require the marketer to manually set the placeholders. If we can find a way to even have an auto placeholder feature if labels are hidden and one doesn't exist - that'd be way cool Only concern is that react forms might clear the placeholder
Another Solution that's kinda better but may be harder to implement: https://allthingssmitty.com/2016/09/25/accessible-floating-labels/ recommended by Jon Eichler
I could build this with straight HTML and CSS I think - so no JS manipulation needed.
The problem with this though is it's definitely a stylistic thing. A designer may not want this. So this would definitely have to be optional.