Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
TheWebTech opened this issue Jun 11, 2019 · 1 comment
Labels
enhancement New feature or request

Comments

@TheWebTech
Copy link
Owner

TheWebTech commented Jun 11, 2019

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
Copy link
Owner Author

TheWebTech commented Jun 12, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant