Despite being an older design pattern, Floating Form Labels continue to be widely implemented today, making them just as relevant as ever.
You might wonder why I’m revisiting this topic, but the reality is that this pattern was originally developed to address real user needs—and understanding its accessibility impact remains crucial.
Floating Labels, a design pattern from Google’s Material Design, assist users in recognizing form fields—or so the pattern claims.
This pattern places labels inside form fields when they’re empty, allowing users to quickly understand what’s expected. As data is entered, the label shifts above the field, making space for input—or so the pattern claims.
Google’s usability study found that 600 participants found Floating Labels helpful, so there is merit to the pattern. However, Material Design’s own guidelines outline certain drawbacks, offering a balanced perspective on its effectiveness.
Why do accessibility issues arise with Floating Labels? Is it a lack of awareness among designers, or is there a deeper flaw in the pattern? Unfortunately, both.
Form Labels and the Myth of Keeping It Short
Google suggests keeping labels short to prevent text from wrapping onto multiple lines, but this isn’t always within our control.
The floating effect requires placing elements over other content, which introduces the risk of obscuring important information on the page.
Floating labels present challenges due to text dynamically adjusting in size. Users with low vision or cognitive disabilities may increase text size or adjust spacing to suit their reading needs, while others may switch to languages with longer words. These modifications often cause text to flow onto multiple lines, and when that happens, the floating label can obscure the form field beneath it.
On a website’s account creation form, I encountered this issue while using my iOS device with Larger Text settings enabled. The label “First Name (you may need to add a middle name)” wrapped onto two lines, obscuring the field and preventing me from seeing what I was typing.
In an ideal scenario, the instruction “you may need to add a middle name” wouldn’t have been part of the label. However, this example effectively illustrates how Floating Labels can create accessibility challenges, especially when text expands and wraps onto multiple lines.
How Serious Is The Issue?
Floating labels often use opaque white backgrounds to enhance their floating effect while keeping text legible. However, this opacity can obstruct the form field beneath it, making it difficult for users to verify their input. Without clear visibility, people may struggle to confirm whether their entries are accurate or formatted correctly. This can lead to frustrating trial-and-error processes or even submission of incorrect information.
The impact is especially significant for users with disabilities who may be unable to adjust their devices to compensate. Some lack the ability to rotate their screens for a larger view, while others rely on magnification or large text sizes to navigate interfaces effectively. For these users, floating labels can present an insurmountable barrier.
Ensuring Accessibility with Floating Labels
Google has laid the foundation for the floating label pattern by recognizing and addressing a user need, but there’s still more to be done.
To achieve this, we need to extend user studies to include individuals with low vision and cognitive disabilities, ensuring accessibility remains a priority.
By working inclusively, this pattern could undergo a fundamental transformation. It may evolve beyond floating labels altogether, adapting to better meet the diverse needs of users. What remains paramount is achieving the ultimate goal: helping people easily and effectively identify form fields.
WCAG Supports Accessible Form Labels
The Web Content Accessibility Guidelines (WCAG) provide essential principles, guidelines, and criteria to ensure people with disabilities are considered in design. These are crucial, as anyone—including individuals with compound disabilities—could be interacting with our form at any time.
We should pay special attention to the following success criteria (SC) to better support individuals with low vision and cognitive disabilities:
- Resize text (SC. 1.4.4)
- Reflow (SC. 1.4.10)
- Text spacing (SC. 1.4.12)
- Headings or labels (SC. 2.4.6)
- Labels or instructions (SC. 3.3.2)
Ultimately, it’s up to us to ensure that the patterns we implement are well-suited to the needs of our audiences.
Image Credits
The featured image used in this article is credited to Pramod Tiwari.