Tags: tumblr

64

sparkline

Friday, December 16th, 2016

Xaviera López

Beautiful animation work.

Wednesday, October 5th, 2016

First Time User Experiences

Krystal’s excellent annotated collection of onboarding examples.

Friday, September 30th, 2016

70s Sci-Fi Art

Sci-fi book covers and posters from the 1970s.

Tuesday, September 27th, 2016

Swear Trek

Slack ammo.

Yoda Cakes Gone Wrong

Disappointed in your cakes I am.

Sunday, July 3rd, 2016

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.

Thursday, May 19th, 2016

Bowiebranchia

Nudibranchia or other opisthobranchia compared to the various looks of David Bowie.

Thursday, April 14th, 2016

Classic Programmer Paintings

Painters and Hackers: nothing in common whatsoever, but this are classical painters depictions of software engineering.

Saturday, February 20th, 2016

The Secret Lives of Tumblr Teens | New Republic

A fascinating insight into some of Tumblr’s most popular accounts:

Some posts get more than a million notes—imagine a joke whispered in biology class getting a laugh from a city the size of San Francisco.

It’ll be a real shame when Tumblr disappears.

That’s “when”, not “if”. Remember:

In 2013, Yahoo bought Tumblr.

Friday, June 26th, 2015

2 Kinds of People

Dividing the world in two.

Thursday, April 2nd, 2015

Accessibility Wins

Marcy’s Tumblr blog of examples of accessibility in action on the web.

Monday, March 23rd, 2015

100 days: Archive

You might want to keep an eye on what the Clearlefties are doing here for the next hundred days.

One down, 99 to go.

Tuesday, October 28th, 2014

Beautiful Maps

Cartography porn.

Saturday, September 20th, 2014

High Street Shops In Sci Fi Films

I’m not quite sure why this is funny, but I am quite sure that it is.

Wednesday, August 20th, 2014

Pop Sonnets

Modern pop songs retold as Shakespearian sonnets.

Saturday, July 26th, 2014

Panorama Fail

The image-stitching algorithm is trying its best.

The Camera in the Mirror

Kubrickian pictures taken by the Google robot wherein it captures its own reflection.

Sunday, June 29th, 2014

Hamburger Fancy: Archive

This Tumblr blog has the grandiose ambition of being “a showcase of the hottest hamburger icons on the web”, but amazingly, they’ve actually succeeded in documenting every single example of a cool hamburger icon.

Wednesday, June 25th, 2014

Signs from the near future

We better get used to them…

Friday, January 3rd, 2014

Screen shots of computer code

There’s something very satisfying about this televisual sleuthing:

Images of the computer code appearing in TV and films and what they really are.