Tags: tumblr

4

sparkline

Unlabelled search fields

Adam Silver is writing a book on forms—you may be familiar with his previous book on maintainable CSS. In a recent article (that for some reason isn’t on his blog), he looks at markup patterns for search forms and advocates that we should always use a label. I agree. But for some reason, we keep getting handed designs that show unlabelled search forms. And no, a placeholder is not a label.

I had a discussion with Mark about this the other day. The form he was marking up didn’t have a label, but it did have a button with some text that would work as a label:

<input type="search" placeholder="…">
<button type="submit">
Search
</button>

He was wondering if there was a way of using the button’s text as the label. I think there is. Using aria-labelledby like this, the button’s text should be read out before the input field:

<input aria-labelledby="searchtext" type="search" placeholder="…">
<button type="submit" id="searchtext">
Search
</button>

Notice that I say “think” and “should.” It’s one thing to figure out a theoretical solution, but only testing will show whether it actually works.

The W3C’s WAI tutorial on labelling content gives an example that uses aria-label instead:

<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>

It seems a bit of a shame to me that the label text is duplicated in the button and in the aria-label attribute (and being squirrelled away in an attribute, it runs the risk of metacrap rot). But they know what they’re talking about so there may well be very good reasons to prefer duplicating the value with aria-label rather than pointing to the value with aria-labelledby.

I thought it would be interesting to see how other sites are approaching this pattern—unlabelled search forms are all too common. All the markup examples here have been simplified a bit, removing class attributes and the like…

The BBC’s search form does actually have a label:

<label for="orb-search-q">
Search the BBC
</label>
<input id="orb-search-q" placeholder="Search" type="text">
<button>Search the BBC</button>

But that label is then hidden using CSS:

position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);

That CSS—as pioneered by Snook—ensures that the label is visually hidden but remains accessible to assistive technology. Using something like display: none would hide the label for everyone.

Medium wraps the input (and icon) in a label and then gives the label a title attribute. Like aria-label, a title attribute should be read out by screen readers, but it has the added advantage of also being visible as a tooltip on hover:

<label title="Search Medium">
  <span class="svgIcon"><svg></svg></span>
  <input type="search">
</label>

This is also what Google does on what must be the most visited search form on the web. But the W3C’s WAI tutorial warns against using the title attribute like this:

This approach is generally less reliable and not recommended because some screen readers and assistive technologies do not interpret the title attribute as a replacement for the label element, possibly because the title attribute is often used to provide non-essential information.

Twitter follows the BBC’s pattern of having a label but visually hiding it. They also have some descriptive text for the icon, and that text gets visually hidden too:

<label class="visuallyhidden" for="search-query">Search query</label>
<input id="search-query" placeholder="Search Twitter" type="text">
<span class="search-icon>
  <button type="submit" class="Icon" tabindex="-1">
    <span class="visuallyhidden">Search Twitter</span>
  </button>
</span>

Here’s their CSS for hiding those bits of text—it’s very similar to the BBC’s:

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

That’s exactly the CSS recommended in the W3C’s WAI tutorial.

Flickr have gone with the aria-label pattern as recommended in that W3C WAI tutorial:

<input placeholder="Photos, people, or groups" aria-label="Search" type="text">
<input type="submit" value="Search">

Interestingly, neither Twitter or Flickr are using type="search" on the input elements. I’m guessing this is probably because of frustrations with trying to undo the default styles that some browsers apply to input type="search" fields. Seems a shame though.

Instagram also doesn’t use type="search" and makes no attempt to expose any kind of accessible label:

<input type="text" placeholder="Search">
<span class="coreSpriteSearchIcon"></span>

Same with Tumblr:

<input tabindex="1" type="text" name="q" id="search_query" placeholder="Search Tumblr" autocomplete="off" required="required">

…although the search form itself does have role="search" applied to it. Perhaps that helps to mitigate the lack of a clear label?

After that whistle-stop tour of a few of the web’s unlabelled search forms, it looks like the options are:

  • a visually-hidden label element,
  • an aria-label attribute,
  • a title attribute, or
  • associate some text using aria-labelledby.

But that last one needs some testing.

Update: Emil did some testing. Looks like all screen-reader/browser combinations will read the associated text.

Not tumbling, but spiralling

Tumblr is traditionally the home of fun and frivolous blogs: Moustair, Kim Jong-Ill Looking At Things, Missed High Fives, Selleck Waterfall Sandwich, and the weird but wonderful Consume Consume (warning: you may lose an entire day in there).

But there are also some more thoughtful collections on Tumblr:

  • Abondonedography documents the strangely hypnotic lure of abandoned man-made structures, as does Abandoned Playgrounds.
  • Adiphany shows some of the cleverer pieces from the world of advertising.
  • Histories Past is a collection of fascinating historical photographs.
  • Found is also a collection of photographs, all of them from the archives of National Geographic, many of them hitherto-unpublished.

It’s going to be real shame when Tumblr shuts down and deletes all that content.

Of course that will never happen. Just like that never would’ve happened to Posterous or Pownce or Vox or GeoCities — publishing platforms where millions of people published a panoply of posts from the frivolous to the sublime, all of them now destroyed, their URLs purged from the web.

That reminds me: there’s one other Tumblr-hosted blog I came across recently: Our Incredible Journey documents those vile and disgusting announcements that start-ups make when they get acquired by a larger company, right before they flush their user’s content (and trust) down the toilet.

Oh, and I’ve got a Tumblr blog too. I just use it for silly pictures, YouTube videos, and quotes. I don’t want it to hurt too much when it gets destroyed.

Finding five numbers

I like Tumblr. I like Pownce. They both make it very quick and easy to post discrete quanta of information. I use Pownce for posting audio files and links to videos. I use Tumblr to post quotations. But both services suffer from the same problem: refindability.

Magnolia and Delicious encourage tagging. Those tags can then surface some pretty interesting aggregate behaviour but first and foremost, they’re useful for the individual doing the tagging. It’s pretty easy for me to track down something I bookmarked on Magnolia even if it was quite a while back. I don’t need to keep a list of all the tags I’ve ever used: I just need to search for a word that I think I might have used when I was tagging a bookmark. While it would be very difficult for me to try to second-guess how someone else might describe something, it’s usually pretty easy to put myself in the shoes of my past self.

As my store of data on Pownce and Tumblr increases, I’m starting to miss tagging (or any kind of search) more and more. Then again, I can understand why both services would resist that kind of scope creep. Both services rely on their simplicity. Adding another field to fill in could potentially be a road block between the user and the task they want to accomplish (although it doesn’t feel that way with Delicious or Magnolia). Update: it turns out that you can tag in Tumblr but it’s hidden behind the “advanced” link. Thanks to Keith Bell for pointing that out.

Here’s a case in point. Over time I’ve been posting MP3 files to Pownce of a series of radio programmes by Simon Singh, author of The Code Book — a superb piece of work. The audio from the radio programmes is available from the BBC website but only in Real Audio which, let’s face it, is complete pants. I originally got the MP3 files from Brian but after a catastrophic hard drive crash, I realised that it would be better to store them at an addressable URL. Besides, I wanted to geek out with my mathematically-minded friends. Pownce’s raison d’être is sharing stuff with friends so it seemed like the perfect home for the Singh files.

But without any kind of tagging or search, there’s no easy way for me or anyone else to revisit just those files at a later date. As a temporary patch, I’m listing the URLs for the Pownce posts that correspond to each episode. If you want to download the files, you’ll need to log in to Pownce.

  1. Five Numbers

    1. A Countdown to Zero
    2. Simple as Pi
    3. The Golden Ratio
    4. The Imaginary Number
    5. Infinity
  2. Another Five Numbers

    1. The Number Four
    2. The Number Seven
    3. The Largest Prime Number
    4. Kepler’s Conjecture
    5. Game Theory
  3. A Further Five Numbers

    1. 1 — The Most Popular Number!
    2. 2 — At the Double
    3. 6 Degrees of Separation
    4. 6.67 x 10-11 — The Number that Defines the Universe
    5. 1729 — The First Taxicab Number

adactumblr

I tend to compulsively sign up to just about every new web-based tool or social networking site that comes along. Most of my accounts then languish unused because the service turns out to suck in a fairly fundamental manner.

I signed up for Tumblr a while back. On the face of it, it doesn’t really have anything new to offer; it’s basically just a blogging tool but one designed for micro-content rather than long posts. But there’s something about it that’s—forgive the nineties term—sticky.

Tumblr allows you to pull in feeds from other places. At first, this is what I did but I realised that there wasn’t much point in that because I already have a lifestream. The lifestream aspect of Tumblr just made it harder to filter the Tumblr-specific content. Jaiku does a better job of that, allowing not just the author, but also the reader, to filter content by source.

I don’t use Tumblr for posting links—I’ve got del.icio.us for that. And I don’t use it for photos—that’s what Flickr is for. So I focus on the things that Tumblr is particularly good at handling: videos and quotes.

The Tumblr bookmarklet is pretty clever. If I click it when I’m on YouTube, it guesses that I probably want to post that video. If I highlight some text on a page and then click the bookmarklet, the selected text will be added as a quote. Most importantly of all, the process of posting is very fast and unobtrusive; one or two clicks and I’m done. That means there’s no tagging, which might make refindability difficult, but the speed and ease of posting makes me more likely to click that bookmarklet.

Tumblr has a kind of casual throwaway feel to it and that’s how I’ve been using it: videos and quotes that don’t quite warrant a blog post or a del.icio.us link. Tumblr isn’t the most fully-featured service out there but that’s also its strength. If you’re interested, you can look at my Tumblr account.