Floating vs. Static Labels – Which are More Accessible?
Table of Contents
Table of Contents
When considering the accessibility of an input element, you should focus on its implementation in the code. While the look and feel are quite important, they are secondary to implementation.
You can create a perfectly accessible input element with either a floating label or a static one. However, the UserWay team recommends floating labels for the reasons listed below.
Example of an animated label that floats above the focusable area
Animations Work
It is improbable that the animations typically applied to floating labels could be interpreted as disorienting or cause confusion.
They use upward floating movements that last 150-400ms, and this limited movement is unlikely to trigger conditions such as dizziness or epilepsy.
Example of an animate label that stays within the focusable area
Context Awareness
Many users with a visual impairment appreciate having floating labels. It helps them retain their context within the greater form and know exactly which field they are currently focused on.
In many cases, the floating label will use a different font style (size & color) to provide even greater clarity between the label that is in-focus and other input fields on the page. This also provides a more distinct feeling of which fields are filled (already floated) and those that are not yet filled (not yet floated).
Usability
Floating labels do allow for reduced vertical padding resulting in a form that takes up less vertical page real estate.
This translates into less scrolling (let’s not forget that scrolling also equals screen movement, and the less scrolling the better) and an increased probability that the form in its entirety will be visible in the viewport.
Do you have a question about usability or accessibility on your site? Set up a demo with one of our accessibility experts today and see which UserWay solutions will support your accessibility goals.
