Guidelines for text fields design

Text fields are probably one of the most used interface components; contact forms, payment details, account creation, lead generation. Users definitely need to interact with text fields when using your product. The purpose of this post is to highlight some of the key guidelines which I follow when it comes to designing better text fields.

It’s pretty basic things that, unfortunately, a lot of people seem to forget.

Guidelines for text fields design →

💵 This linked article is stuck behind Medium’s metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium’s ridiculous reading limit.

Styling Ordered Lists with CSS Counters

Using CSS Counters, Josh W Comeau injects his own number in ordered lists. That way he can style the number itself separately.

ol li {
  counter-increment: muffins;
}

ol li:before {
  content: counter(muffins) ". ";
  color: hotpink;
}

ol {
  list-style: none;
  counter-reset: muffins;
}

Apart from styling, I find this technique come in handy to assign the sequence numbers to an element contained somewhere inside the <li>

See the Pen CSS Counter by Bramus (@bramus) on CodePen.

Something that was new to me in his article was the counters (not counter) function, to play nice with nested ordered lists.

Styling Ordered Lists with CSS Counters →

Methods for assigning an accessible name to a form control

Adrian Roselli:

Too often folks will grab ARIA first to provide an accessible name for a thing. Or they may sprinkle hidden content around a form. In most cases the impact of those decisions is unknown. The assumption that they do the same thing, give the same output to all users, is wrong.

In short, here’s the priority he follows when assigning an accessible name to a control:

  1. Native HTML techniques,
  2. aria-labelledby pointing at existing visible text,
  3. Visibly-hidden content that is still in the page,
  4. aria-label.

Good ole’ HTML first, the rule of least power in action 😉

My Priority of Methods for Labeling a Control →

<ol>‘s start and reversed attributes (and more)

Handy for those end-of-year lists 😉

~

Apart from overriding the list style using CSS’s list-style-type (which you should set it on the <ul>/<ol> element, not the <li>), you can also set the list style for unordered lists it from your HTML using the type attribute.

  • a for lowercase letters
  • A for uppercase letters
  • i for lowercase Roman numerals
  • I for uppercase Roman numerals
  • 1 for numbers (default)

⚠️ Do note that this type attribute only is allowed on the <ol> element – not the <ul> element – according to the spec.

~

Additionally, you can also override the value of an <li> element inside an <ol> element using its value attribute:

See how it jumps from 5 to 10? That’s value in action.

Embracing Modern Image Formats

Josh W. Comeau, on embracing modern image formats to ship less bytes to browsers. As not all browsers understand all image formats (Apple/Safari for example doesn’t support .webp, an image format developed by Google) he resides to the picture element with various sources set.

<picture>
  <source srcset="/images/cereal-box.webp" type="image/webp" />
  <source srcset="/images/cereal-box.jp2" type="image/jp2" />
  <img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />
</picture>

On his own blog he chose to use only .webp (for Chrome & Firefox) with a fallback to a .jpg (for Safari, IE, and other browsers that don’t speak WebP)

<picture>
  <source srcset="/images/cereal-box.webp" />
  <img src="/images/cereal-box.jpg" />
</picture>

Using a (premium) service like imgix you can easily automate this, through its fm parameter. Alternatively you could roll your own image transform service on AWS/GCP/Azure.

Embracing modern image formats →

Fun with browsers: how to get an image into the current page

Christian Heilmann created a demo page where a user can add an image to the page through various ways.

I gave myself the task to build an interface to make it as easy as possible for a user to add an image into the document. I wanted to support:

  • Image upload
  • Drag and Drop
  • Copy and Paste

Each scenario requires a small tad of JS. Here’s a pen with the final result:

Fun with browsers: how to get an image into the current page →

HTML: The Inaccessible Parts

Dave Rupert:

I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up. But that’s not always the case. There are some cases where even using plain ol’ HTML causes accessibility problems.

I’m going to start rounding up those HTML shortfalls in this here post as a little living document that I can personally reference every time I write some HTML.

Let this be an actionable list for browser vendors/spec writers to work on.

HTML: The Inaccessible Parts →

Why you should probably avoid using <input type="number" />

The fine folks at GOV.UK:

Until now, the GOV.UK Design System date input component used the HTML element <input type="number" /> to provide a number keypad when a user enters dates.

However, we recently moved away from <input type="number"> to <input type="text" inputmode="numeric" pattern="[0-9]*">

Why the GOV.UK Design System team changed the input type for numbers →

Sounds familiar? That’s because the same recommendation was done in the HTML attributes to improve your users’ two factor authentication experience post 🙂

You shall not open links in a new window or tab

Something we already knew, but that’s now written down by Adrian Roselli in a nice post:

Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text.

Great to see that the statement is backed by the Web Content Accessibility Guidelines (WCAG):

WCAG Link targets fall under Guideline 3.2: Predictable, and state that web pages must appear and operate in predictable ways. Specifically, Success Criterion 3.2.5: Change on Request states that changes of context (such as new pages or windows) must be initiated only by users and that users can disable them otherwise.

And if you do need to use a new window/tab also add rel="noopener noreferrer" for security reasons.

Link Targets and WCAG 3.2.5 →

A Complete Guide to Data Attributes

I like using data attributes in my markup (data-*), CSS ([data-*]), and JS (el.dataset). This post on CSS-Tricks writes down exactly how I use them.

Especially the different type of attribute selectors are really powerful:


// Seven different types of CSS attribute selectors

// This attribute exists on the element
[value]

// This attribute has a specific value of cool
[value='cool'] 

// This attribute value contains the word cool somewhere in it
[value*='cool'] 

// This attribute value contains the word cool in a space-separated list
[value~='cool'] 

// This attribute value starts with the word cool
[value^='cool'] 

// This attribute value starts with cool in a dash-separated list
[value|='cool'] 

// This attribute value ends with the word cool
[value$='cool'] 

The contains selector becomes really powerful when building a JavaScript filter: such a CSS selector can be passed directly into document.querySelectorAll. The yielded result will immediately contain to correct selection, instead of looping over all items that and checking them one-by-one.

A Complete Guide to Data Attributes →