This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Accessible custom radio buttons and checkboxesRuss Weakley
Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
Building accessible web components without tearsRuss Weakley
Slides from #Respond16, Sydney Melbourne 2016
So, you've built an amazing new web application. It uses all the latest frameworks and libraries. It's beautiful to behold.
But is it accessible? Many web applications these days are built on top of pre-existing frameworks or code bases and there is little thought to how well these components will work for different assistive devices.
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows, drop-down menus, in-page tabs and other commonly used we components. You will leave this talk ready and eager to enhance your application, and in the process, make it available to entirely new audiences.
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows and adding additional information for screen reader users.
What are accessible names and why should you care?Russ Weakley
This presentation will look at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There will be a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
aria-live: the good, the bad and the uglyRuss Weakley
Almost all web sites and web applications today are heavily reliant on JavaScript to provide rich interactions for the user. But how can we make these interactions accessible for assistive technologies such as screen readers? The answer is WAI-ARIA – and in many cases, the aria-live property. The presentation will explore the use of WAI-ARIA and the aria-live property to alert screen readers to changes in the DOM. The presentation will also look at support for aria-live across various screen readers and how the property can be most effectively used today.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Accessible custom radio buttons and checkboxesRuss Weakley
Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
Building accessible web components without tearsRuss Weakley
Slides from #Respond16, Sydney Melbourne 2016
So, you've built an amazing new web application. It uses all the latest frameworks and libraries. It's beautiful to behold.
But is it accessible? Many web applications these days are built on top of pre-existing frameworks or code bases and there is little thought to how well these components will work for different assistive devices.
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows, drop-down menus, in-page tabs and other commonly used we components. You will leave this talk ready and eager to enhance your application, and in the process, make it available to entirely new audiences.
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows and adding additional information for screen reader users.
What are accessible names and why should you care?Russ Weakley
This presentation will look at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There will be a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
aria-live: the good, the bad and the uglyRuss Weakley
Almost all web sites and web applications today are heavily reliant on JavaScript to provide rich interactions for the user. But how can we make these interactions accessible for assistive technologies such as screen readers? The answer is WAI-ARIA – and in many cases, the aria-live property. The presentation will explore the use of WAI-ARIA and the aria-live property to alert screen readers to changes in the DOM. The presentation will also look at support for aria-live across various screen readers and how the property can be most effectively used today.
Creating accessible modals and autocompletesRuss Weakley
In this two-part presentation, Russ will guide us on a deep dive into how to create accessible modals and accessible autocomplete search functions. Along the way, we will look at the problem for different types of users as well as explore how ARIA can be used to improve these experiences. There will be blood, sweat and tears (Russ' words!) but hopefully a happy outcome for all.
Presentation for the Sydney Web Accessibility & Inclusive Design - 30 August 2019
This presentation was fro the AllyBtyes event on 21 May 2020. The presentations looks at a pattern for building or reviewing any new UI component – semantics, focusable, keyboard interaction, visible states, accessible name and relationships.
This presentation covers the basics of how users of screen readers interact with widgets. The goals of this presentation are:
1) Make you comfortable enough with using screen readers so that you have a basic understanding of the types of information users need/expect to hear for widgets.
2) Make you familiar with the common keyboard patterns used for existing widgets on the web and the desktop.
Use the information in this presentation as a foundation for implementing expected keyboard shortcuts for custom widgets as well as for learning how test custom widgets you develop for the web using JavaScript.
Accessibility in Design systems - the pain and gloryRuss Weakley
Slides from CodeHeart Design 2018: Building a design system is a painful enough, but how do you add accessibility into the mix? Is it an "up-at-dawn, pride-swallowing siege", or can it become part of the normal work flow. We'll look at accessibility for different roles - such as UX, UI and devs, as well as where accessibility should be injected into the process.
This ID24 2019 talk will look at a the importance of states (visited, focus, active, checked/selected, open and more) when building design systems. We will explore their relevance, how to maintain consistency and how to systemise when designing at scale.
Presentation for A11yCamp Melbounre 2018. It all seems so easy, adding a hint or an error to a form field. But what happens when you’re suddenly asked to add pop-up tool tips? Or, even worse, additional information as modals? This presentation will take you through the highs and lows of tool tips and error messages. Along the way, we’ll look at some new ARIA 1.1 attributes like aria-errormessage.
Presentation for OZeWAI Sydney 2018. A walk through of four different methods for making inline error messages programmatically associated. Also covers aria-invalid and aria-live.
OTS Solutions is a Software Development Company provides a wide range of software application outsourcing development services in .NET, ASP.NET, C#, Winforms, WPF, Silverlight, WCF etc, by their skilled developers to all around the world.
This is the simple guide which helps even the beginners to develop an android app which gets the attention of the market. Build your basic app in few steps
Creating a Simple, Accessible On/Off SwitchRuss Weakley
Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.
Creating accessible modals and autocompletesRuss Weakley
In this two-part presentation, Russ will guide us on a deep dive into how to create accessible modals and accessible autocomplete search functions. Along the way, we will look at the problem for different types of users as well as explore how ARIA can be used to improve these experiences. There will be blood, sweat and tears (Russ' words!) but hopefully a happy outcome for all.
Presentation for the Sydney Web Accessibility & Inclusive Design - 30 August 2019
This presentation was fro the AllyBtyes event on 21 May 2020. The presentations looks at a pattern for building or reviewing any new UI component – semantics, focusable, keyboard interaction, visible states, accessible name and relationships.
This presentation covers the basics of how users of screen readers interact with widgets. The goals of this presentation are:
1) Make you comfortable enough with using screen readers so that you have a basic understanding of the types of information users need/expect to hear for widgets.
2) Make you familiar with the common keyboard patterns used for existing widgets on the web and the desktop.
Use the information in this presentation as a foundation for implementing expected keyboard shortcuts for custom widgets as well as for learning how test custom widgets you develop for the web using JavaScript.
Accessibility in Design systems - the pain and gloryRuss Weakley
Slides from CodeHeart Design 2018: Building a design system is a painful enough, but how do you add accessibility into the mix? Is it an "up-at-dawn, pride-swallowing siege", or can it become part of the normal work flow. We'll look at accessibility for different roles - such as UX, UI and devs, as well as where accessibility should be injected into the process.
This ID24 2019 talk will look at a the importance of states (visited, focus, active, checked/selected, open and more) when building design systems. We will explore their relevance, how to maintain consistency and how to systemise when designing at scale.
Presentation for A11yCamp Melbounre 2018. It all seems so easy, adding a hint or an error to a form field. But what happens when you’re suddenly asked to add pop-up tool tips? Or, even worse, additional information as modals? This presentation will take you through the highs and lows of tool tips and error messages. Along the way, we’ll look at some new ARIA 1.1 attributes like aria-errormessage.
Presentation for OZeWAI Sydney 2018. A walk through of four different methods for making inline error messages programmatically associated. Also covers aria-invalid and aria-live.
OTS Solutions is a Software Development Company provides a wide range of software application outsourcing development services in .NET, ASP.NET, C#, Winforms, WPF, Silverlight, WCF etc, by their skilled developers to all around the world.
This is the simple guide which helps even the beginners to develop an android app which gets the attention of the market. Build your basic app in few steps
Creating a Simple, Accessible On/Off SwitchRuss Weakley
Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.
In the world of development, accessibility (also known as universal usability) is something that tends to be overlooked in between design iterations, feature implementation, and the rush to meet deadlines. The reality is that larger clients and corporations need developers who are able to meet the needs of all their users -- including ones with disabilities or on mobile devices. At the end of the day, accessibility benefits all users.
In this talk, we’ll cover:
• The different types of users with accessibility needs
• The levels of accessibility compliance and what those entail
• Basic design principles for meeting standards
• Basic HTML structures to meet compliance
• Handling dynamic elements or elements added to the DOM
• Tools for testing your website’s accessibility
About the Speaker:
Sarah Hudson is a UI Developer at Cardinal Solutions. With a background in product development, she has worked with companies big and small to build their projects from sketch to launch. Coding is basically her entire life, but when she's not hacking, she's geeking out over 80's music or scheming her next big adventure.
HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language; HTML describes the structure of Web pages using markup; HTML elements are the building blocks of HTML pages; HTML elements are represented by tags; HTML tags label pieces of content
I found this website to be useful for learning several courses. Have a look at the site. Hope it helps.
http://professional-guru.com/
How to use a blog for publishing scientific research: A training guide part 2AfricanCommonsProject
The African Commons Project ran a two-day training workshop with the Academy of Science of South Africa in August 2009. We set up a basic Wordpress blog for them, and then led through intensive training on how to use the platform and the basics of blogging: from content to marketing.
An in depth introduction to the BEM methodology and how to use it in the wild. The slides cover the key concepts of Block-Element-Modifier as well as their usage in HTML and CSS. Furthermore the presentation covers on how BEM can solve well-known CSS challenges.
Vskills certified HTML designer Notes covers the following concepts.
1. HTML and XHTML
1.1 Introduction
1.2 History
1.3 HTML Versions
1.4 Elements, Tags and Attributes
1.5 Head and body tags
1.6 HTML Editor
1.7 Create a web page
1.8 Viewing the Source
1.9 White Space and Flow
1.10 HTML Comments
1.11 HTML Meta Tags
1.12 HTML Attributes
1.13 XHTML First Line
1.14 DTD (Document Type Declaration)
1.15 Special Characters
1.16 Capitalization
1.17 Quotations
1.18 Nesting
1.19 Spacing and Breaks
Get complete e-book on HTML Designer.
http://www.vskills.in/certification/Web-Development/Certified-html-designer
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...
In this session we'll review the checks you must go through before deciding whether to use an ARIA role or attribute, reveal our favorites, discuss the ones that need more user agent support, and show you how you can help us make it happen.
Similar to Creating Acessible floating labels (20)
This presentation will look at how to build accessible chat windows. Along the way we will explore: how they differ from traditional modals, how to manage focus, how to manage dynamically updating content for assistive technologies and more. The session is designed for developers and coders.
This presentation for AllyCamp 2020, looks at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There is also a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
What is WCAG 2 and why should we care?Russ Weakley
A presentation for IAG staff for the "Future is here" event on 6 May 20202. This presentation covers three topics - "What are our legal responsibilities around accessibility?", "What is WCAG?", and "What is inclusive design?"
Building an accessible progressive loaderRuss Weakley
This presentation for A11y Bytes May 2019, takes you through how to mark up a progress loader using the progress element. Then, eight tips for making the progress loader accessible.
This presentation covers; different types of disabilities, assistive technologies, legal and ethical responsibilities as well as a range of terms such as W3C, WAI and WCAG.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Building an accessible auto-complete - #ID24Russ Weakley
This presentation will take a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
This presentation for A11yBytes Camp Sydney 2017 takes a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
At first glance, CSS line-height seems very simple, but there is a lot going on below the surface. Line-height is important for any designer or front end developer to understand as it can impact almost every aspect of our layouts.
Understanding the mysteries of the CSS property value syntaxRuss Weakley
This presentation will reveal the wonders of the W3C CSS property and value syntax. Along the way we will explore the mysterious double pipes, pound signs, double ampersands and more. You will come away a CSS syntax expert, able to understand any CSS property / value syntax no matter how complex... or your money back!
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Embracing GenAI - A Strategic ImperativePeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Francesca Gottschalk - How can education support child empowerment.pptxEduSkills OECD
Francesca Gottschalk from the OECD’s Centre for Educational Research and Innovation presents at the Ask an Expert Webinar: How can education support child empowerment?
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
9. This often includes a minimalistic
approach to the design of the form
controls.
10. This means that input and
textarea elements are often
displayed with a border-bottom
only, so that they appear more like
lines to write on rather than inputs
to enter data into.
14. Generally speaking, I am not a fan
of floating labels - except in some
specific circumstances.
15. The solution has some advantages
but also has potential User
Experience and Accessibility
issues.
16. The obvious question is: if you’re
not a fan, why give a presentation
about them?
17. Recently, the team I work with
suggested looking into floating
labels as an option. So, I decided to
try to create a non-JavaScript
version that was usable and
accessible.
18. Hopefully this presentation will
provide you with some things to
consider before using floating
labels, or help you make them more
usable and accessible.
23. This lack of clear identification could
be problematic for a range of
different audiences including
cognitive impaired and those that
are “technology challenged”.
29. At the other end of the spectrum, if
the label has a strong contrast it
could then be mistaken for a value
- as if the form control has already
been filled in.
40. Bottom line, if you are thinking
about using a floating label solution,
make sure you test with real users
to make sure it is suitable in the
proposed environment before going
too far!
41. And of course, make sure that any
solution is accessible to the widest
possible range of audiences and
assistive technologies.
45. In the static state, the label is
displayed on top of the input.
When the input receives focus, the
label is animated upwards so that it
sits above the input.
49. In the static state, the placeholder
is displayed inside the input. When
the input receives focus, the
placeholder becomes invisible, and
the label is animated into view,
above the input.
54. We will be looking at how to achieve
a usable and accessible version of
the second method because it
allows us to display a separate
placeholder and label value.
55. This means we can display more
detailed instructions via the
placeholder, and then simpler
information via the label.
56. Add your first name
Example of a Floating Label showing placeholder
66. If a user hovers over the form
control, the placeholder and form
control should change in
appearance to indicate that the
form control is interactive.
67. Ideally, the form control could
change in hover state so that the
border appears on all sides of the
element - to help make it more
discoverable.
88. My final desired outcome was to try
to make a version that did not use
any JavaScript - unlike most of the
other examples I’d seen.
89. I think JavaScript plays an important
role in modern web development,
but it concerns me that developers
are relying on JavaSCript for
simple things like positioning and
animated form labels.
90. In order to meet all of the desired
outcomes, I’ve had to use one
experimental CSS selector. This
means that this one aspect of the
solution will only work in more
modern browsers.
91. However, the solution does use
basic progressive enhancement,
so almost all of the functionality
should be stable for older browsers.
94. For this method, I needed the label
information to appear after the
form control in source order.
95. This allowed me to style the label
based on the state of the input.
For example, I was then able to
change the style of the label when
the control was in focus.
97. In an ideal world, label content
should be placed before all form
controls in source order - except
for radio buttons and checkboxes.
98. However, I used the “for” and “id”
attributes to explicitly associate
the label to the form control.
99. <div class="floating-‐label">
<label for="input1">
<input class="floating-‐label__control" type="text"
placeholder="Add your first name" id="input1" required>
<span class="floating-‐label__label">First Name</span>
</label>
</div>
100. I also wrapped the label around the
form control and label content.
101. <div class="floating-‐label">
<label for="input1">
<input class="floating-‐label__control" type="text"
placeholder="Add your first name" id="input1" required>
<span class="floating-‐label__label">First Name</span>
</label>
</div>
102. Finally, I placed the label content
inside a span element, so that I
could style the label content
separately to the overall label and
the form control.
103. <div class="floating-‐label">
<label for="input1">
<input class="floating-‐label__control" type="text"
placeholder="Add your first name" id="input1" required>
<span class="floating-‐label__label">First Name</span>
</label>
</div>
105. For this solution I used a BEM-like
naming conversion to make the
solution day to understand for other
developers. This meant writing the
selectors as modules, sub-modules
and modifiers.
BEM = Block, Element, Module
106. // module -‐ or parent element
.floating-‐label { }
// sub-‐module -‐ or child elements
.floating-‐label__control { }
.floating-‐label__label { }
// modifier
.floating-‐label__control-‐-‐disabled { }
107. <div class="floating-‐label">
<label for="input1">
<input class="floating-‐label__input" type="text"
placeholder="Add your first name" id="input1" required>
<span class="floating-‐label__label">First Name</span>
</label>
</div>
109. I’m going to quickly show some of
the SCSS used to create the final
floating label solution. I won’t
show all of it, but you can check out
the repo for the finer details if
interested.
110. Also, I am using SCSS rather than
CSS as it gives me a little bit more
control - allowing me to set some
variables that can be used multiple
times across the various rules.
120. I then need to style the various
states of the control - in this case
hover and focus.
121. // control when in hover
.floating-‐label__control:hover {
border: 1px solid $color-‐border;
}
122. // control when in focus
.floating-‐label__control:focus {
border: 1px solid $color-‐border;
border-‐bottom: 1px solid $color-‐border-‐focus;
outline: none;
}
123. I can also style the input once it has
been filled in using the valid
pseudo-class. Keep in mind that
this is only supported by the latest
browsers.
124. // control when in focus and valid -‐ filled in
.floating-‐label__control:valid {
border: 1px solid transparent;
border-‐bottom: 1px solid $color-‐border;
padding-‐left: 0;
}
126. Next, I need to set position:
absolute on the label content and
initially position it down over the
top of the input. It also has an initial
opacity of “0”.
131. Finally, I am styling the
placeholders in their various
states. I’ve only included some of
the rules used in the final product as
they are quite extensive.
136. Floating labels are problematic
Adam Silver
https://medium.com/simple-human/floating-labels-are-a-bad-
idea-82edb64220f6
137. Are Float Labels Really That
Problematic After All?
Matt D. Smith
https://blog.prototypr.io/are-float-labels-really-that-
problematic-after-all-da7ffe7d5417