Fixing Alt - 6 Reasons Bacon Is Better Than True Love

This is the next blog in a series titled "Fixing Alt" where I supply alternative text to graphics on the web that badly need it (cartoons and infographics).
The Oatmeal has great comics, but badly needs alt text. One of their most successful comics is 6 Reasons Bacon Is Better Than True Love (you can even order a poster) and deserves to be enjoyed by everyone! So here is the text version:

6 Reasons Bacon Is Better Than True Love

Illustration: 3 strips of bacon, greater-than symbol, heart.

1. True love happens once in a lifetime. Bacon can happen seven times a day, if you want it to. Illustration: Man, drooling, with bacon in hand says "You are my everything".
2. Bacon you can keep in the fridge. True love you cannot. Illustration: Woman trying to get out of fridge says "Oh God oh God, let me out of here! Man holds door back with heart in a thought cloud.
3. Love is fleeting, but bacon stays in your arteries for all eternity. Illustration: Man laying down with bacon strips falling in his open mouth.
4. It will always be there for you. Illustration: Man with tears in eyes says "nobody loves me except my bacon".
5. Bacon won't divorce you over a little misunderstanding. Illustration: Wife gasping; man in skimpy underwear with goat on leash and 2 nearly naked women says "This isn't what it looks like. These aren't hookers, they are my 'consultants'".
6. Bacon does not nag or complain. Illustration: Woman says "You've been sitting in that goddamn chair for 8 weeks, go mow the lawn! Soiled man in lounge chair says "Shut up, more bacon please".

Fixing Alt - Social Media Definition by Peeing

Social Media Definition by Peeing by Mindjumpers is a pretty funny cartoon. Like most, unfortunately, there is no alternative text provided. So in the second of the "Fixing Alt" series, I've taken the liberty of providing it. The cartoon is one large graphic with multiple images. Here's the alt text, with each image in a bullet point:

• Man in Twitter t-shirt, holding crotch, face strained: "I need to pee."
• Man in Facebook t-shirt, hands on hips, pee on floor: "I just peed."
• Man in Foursquare t-shirt pointing at pee on floor: "I'm peeing here."
• Man in Slideshare t-shirt, arms raised: "Why I am Great at Peeing."
• Man in Delicious t-shirt with arms crossed: "I collect my pee."
• Man in YouTube t-shirt, holding and pointing to cup of pee: "Watch this pee!"
• Man in LinkedIn t-shirt peeing into cup on floor: "I pee well."
• Man in Digg t-shirt, kneeling to 4 cups of pee: "I digg my pee."
• Man2 in StumbleUpon t-shirt, man slipping in his pee: "Ups! Discover my pee"
• Man in Quora t-shirt, scratching chin: "Why am I peeing?"
• Man in Wikipedia t-shirt, man2 in Wiki t-shirt, woman with pants off, all with arms raised: "Together, we pee-dia!"

Created by MindJumpers.com

Fixing Alt - If Web Browsers Were Celebrities

A humorous infographic was recently published and twittered about, If Web Browsers Were Celebrities (full image). I've noticed more than several of these in the last few months, and one big issue about them continues to nag me: there's no sufficient alternative text! (Also a good case for the longdesc attribute!)

So I decided to to my typing skills to work and provide the alternative text. Hopefully there will be more of these to come on this blog. So here it is, the alt text from the If Web Browsers Were Celebrities infographic:

Browser Compatibility; If Web Browsers Were Celebrities

[Each item includes a nice, large browser icon and a cartoon-style avatar of the celebrity's face.]

Firefox - Can do no wrong, though not as spry as it once seemed. Would be: Morgan Freeman.

Chrome - The new hotness. People love it so much they're nervous it will go wrong and embarrass them later. Would be: Christopher Nolan.

IE6 - Everyone thought it died a long time ago, but still seems to crop up all over the place. Would be: Betty White. [LOL!]

IE7 - After years of giving it chance after chance, performance never gets better. Would be: Matthew McConaughey.

IE8 - Trying desperately to stay relevant, even though it's still the same thing. Would be: The Shatner. [William Shatner]

Safari - Reliable performance, seems to be everywhere. Would be: Samuel Jackson. (Just wait til he collaborates with "Chrome")

Flock - Hip, but people don't take it seriously anymore. Would be: Michael Cera.

Netscape - When it died, everyone said "Oh yea, that one!" and then forgot all about it. Would be: Walter Matthau.

Opera - Only ever used if you already have 100 tabs open in IE, Firefox isn't available, and you have no toher choice. Everyone agrees it looks nice, though. Would be: J-Lo. [Jennifer Lopez]

IceWeasel - Who? You mean that weird one? Would be Kristen Schaal (AKA Mel on Flight of the Conchords)

Requires No Browser - Is unquestionably Keanu Reeves. [Avatar of Keanu says "Wo"]

Podcast #83: Fate of Longdesc in HTML5

What's the fate of the "longdesc" attribute in HTML5? Can or should the "aria-labelledby" ARIA attribute replace it? These are some of the controversial issues discussed by Dennis and guests John Foliot (@johnfoliot), Everett Zufelt (@ezufelt), and Joe Dolson (@joedolson).

Download Web Axe Episode 83 (Fate of Longdesc in HTML5)

[transcript of podcast 83]

Related Links

• WCAG 2 longdesc technique
• W3C HTML 4.01 longdesc Specification
• Creating Accessible Images - Long Descriptions (WebAIM)
• What should be the minimum / maximum length of alternate text? (see comments)
• Firefox Longdesc add-on by Patrick Lauke

Walmart's Poor Alt Text and Use of Flash

Yesterday, Steve Faulkner of The Paciello Group wrote a tweet quoting an alt attribute on the Walmart.com home page. My first reaction was disbelief, frustration, and outrage.

I replied to the tweet, then found the following code (line 2421) which Steve was referencing:

<img src="http://i2.walmartimages.com/i/if/spacer.gif" alt="The Walmart.com site includes Flash technology. To avoid interruption of software designed to aid visually-impaired people, please turn off your Flash player." border="0" height="1" width="1" />

The message was designed for screen reader users. But just this one line of code is so wrong on so many levels including the following.

1. A spacer GIF? What is this, 1998? This is a badly outdated and poor practice.
   
2. Alt text is too long; I suggest under 15 words. Or, include the text as part of the main page or use some kind of "D" link.
3. This message was meant to be vital to the user (particularly if blind), and thus should not be stuffed in an ALT attribute.
4. Many people with visual impairments may not be blind, but have "low vision", and thus may not use a screen reader. These individuals could use a screen magnifier or simply enlarge text with their browser.
5. Law: Walmart is a very large corporation providing sale of goods nationally; this means that they are a great "Target" for a lawsuit, excuse the pun! (If you don't get the joke, read about the NFB vs. Target lawsuit.)
6. The use of Flash in itself is highly debatable. One can write a book about this point, but basically, Flash requires a proprietary plug-in, usually not developed with accessibility, and is not supported on many modern user agents such as the iPhone/iPad (not to mention many others including text-only browsers).
7. How does one turn off his Flash player, anyway?

Solutions

Immediate: Provide HTML alternative to content.

Better: Use accessible Flash and provide an HTML alternative to content.

Best: Use HTML only for content. Implement with web standards, progressive enhancement, and DOM scripting, to create the same visual effect as the original Flash. This will not only make your content accessible, but will also make the site lighter and faster and is also good for SEO.