Hidden information in Twitter background images

Here's something that's really starting to annoy me. It's not new, but it does seem to be becoming more prevalent, particularly with large brands who I'm sure wouldn't dream of doing it on their own websites.

Twitter allows its members to customise their profile pages. As well as limited control over the colour palette, members are able to choose from a small selection of background images, or upload their own image.

Take a look at Domino's (US) for example. They've got a whacking great column of text describing how to detect and stop 'puffery'. It includes an explanation of the term, examples of tweets and provides instructions for using a special hashtag. They also display their Facebook address. All of this information is part of the background image.

Vodafone uses the same space to introduce its 'Web Relations' team and to provide links to its Facebook and YouTube profiles. There is also an email address to contact the web relations team and an invitation to follow a separate Twitter account for access to the best deals. Again, all of this information is part of the background image.

This Honda profile displays some basic company statistics, the URL of an RSS feed, a list of other Honda accounts on Twitter and the addresses of its other profiles on YouTube, Flickr, Facebook and Friendfeed.

Pizza Hut uses both sides of the screen to display information. As well as Facebook and YouTube, there are a two calls-to-action, prompting visitors to download an iPhone app for the opportunity to save 20% on every order.

Air New Zealand's main profile displays a list of its other accounts, including regional versions and an account dedicated to sharing special offers.

Poor Accessibility

The minimum level of conformance to WCAG includes the following requirement:

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose...

Information contained within an image is only accessible if you can see, and unlike the img element in HTML, there is no inherent way to provide an accessible text alternative for background images in CSS. Using CSS to include images that convey important information is specifically listed as a failure of this checkpoint.

If I were using a screen reader or a refreshable braille display, or set an alternative background to increase legibility, I wouldn't know about the 'puffery' campaign being run by Domino's. I wouldn't know that Vodafone had a web relations team, that I could contact them by email or that I was missing out on all the deals being advertised through a second twitter account. I wouldn't know about Honda's RSS feed or the other places I can interact with them. I wouldn't know that Pizza Hut had an iPhone app or that I could save 20% on my orders. I wouldn't find Air New Zealand's other Twitter accounts.

This information is important because not knowing it would limit my ability to take part.

Poor Usability

All of the examples above (Pizza Hut in particular) include what appear to be links or buttons. It's no accident – they've clearly been designed to look like that. But of course these things don't really do anything because it's still just a background image! You can't even copy and paste the links.

Making things look interactive when they aren't or implying that a function exists when it doesn't is extremely detrimental to usability. Known as false affordance, it destroys a user's faith in the functional ability of the website and in their own ability to use it.

People are used to certain conventions on the web; they know that buttons can be pushed, links can be clicked and text can be highlighted and copied. They expect things to work the same everywhere. When they don't, it causes frustration and confusion that detracts from the real message.

The bottom line

Basically, don't use background images to display information.

If you feel that you really must provide information in a background image, you should at the very least make sure that the same information is available (and easy to find) in text, elsewhere. On Twitter, this would mean providing the same information either in the bio field, or if that's not long enough, on a separate web page linked to from the web address field.

Don't make things look interactive when they aren't. If you include what looks like a button in a background image, people will try to push it. If you display a URL or an email address, people will click on it or attempt to copy/paste it. It's not because they're stupid; they just expect things to work like they normally do.