Tag Archives: label

Float Label Pattern – Building Better Interfaces

Float Label Pattern

The Float Label Pattern was originally conceived by Matt D. Smith, where he needed to solve the issue of input field labels and space issues on mobile forms.  … the Float Label Interaction, which combines the idea of using both placeholder text and a label to identify form fields.

The challenge with form field labels on mobile devices is that they take up a lot of space.  If you left align a label, the input field would have limited horizontal length, and a top aligned label would increase the vertical length of the page. Using placeholders (or inline labels) does not completely solve the problem either, once they the placeholder disappears the user will lose the defining context around the input field.

In Mobile Form Usability: Never Use Inline Labels, Jamie Appleseed has a detailed study of the usability problems with inline labels.

The Float Label Interaction proposed by Matt, is a compromise between field label visibility and maximizing the space available.

Floating the label element over an empty input field defines the input expected, upon user input the label is shrunk and placed above the input.  This pattern allows the user never to lose context around the input field, while allowing the form to maximize the space of the viewable screen area.

Curated by (Lifekludger)
Read full article at Source: Float Label Pattern – Building Better Interfaces

Accessible Names – Label All the Things! (Part 2) | Mediacurrent

LABEL THE REST OF THE THINGS!Native accessible name properties that we discussed in part 1 are all great, but there are situations where these don’t suffice – where either no method for providing an accessible name exists in HTML5 or a situation arises where standard HTML5 methods aren’t enough. Enter aria-label and aria-labelledby. Aria-label and aria-labelledby are global WAI-ARIA attributes which means they can be used on all HTML5 elements although they have widest support by screen readers when used on focusable elements. Let’s look at some use cases.

Source: Accessible Names – Label All the Things! (Part 2) | Mediacurrent