CrankShaft icon indicating copy to clipboard operation
CrankShaft copied to clipboard

Add Boolean and or wrapping class for HS forms to hide labels in an accessible way

Open TheWebTech opened this issue 6 years ago • 1 comments

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

TheWebTech avatar Jun 11 '19 15:06 TheWebTech

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.

TheWebTech avatar Jun 12 '19 13:06 TheWebTech