October 2008 Archives

Today I have a totally quick tip for you. Let's take a look at something that most of us should recognize:

Subscribe to my feed

This is a feed icon, followed by explanatory text. Looks fine, right?

Not quite. We know that images should have "alt text" that provide a text alternative for people who are listening to the blog with screen reader software, often used by people who are blind or have vision impairments. This feed icon DOES have alt text, which honestly I'm not sure if I added in a fit of thoughtlessness or if Feedburner generated it for me back in the day. But it needs to go, because it's exactly the same as the text that comes after it.

So what does a screen reader user hear?

Subscribe to my feed
Subscribe to my feed

I don't know about you, but that sounds a little needy to me. It's probably more dignified to just ask once.

So I'm leaving the alt piece of the code for the image, but I'm turning it into alt="" so the screen reader just passes it by without a sound.

If you generate a feed icon today using Feedburner, it does include a blank alt attribute. But I've seen plenty of funky feed stuff on blogs, so I suspect that it and other feed services, and even the defaults in various templates, have evolved over time.

So when you get a second, check on your feed icon and see if it needs a little sprucing up.

(Hat tip to the Accessibility Institute at the University of Texas for their article
Accessible Graphics.)

Friday I talked about the DePo Masthead theme for WordPress.com blogs, but now I'm going to talk about something close to my heart - Movable Type!

I've been using Movable Type, made by Six Apart, for several years. It's often lagged behind WordPress in the number and variety of styles and templates that were available. In the last few months, things have started to look up, especially with a lovely new template set called Mid-Century. Mid-Century was designed by Six Apart lead designer Jim Ramsey, who is using it on his blog right there if you want to take a look.

Ramsey had previously designed and Six Apart released the Professional Website template set for Movable Type, which honestly was a badly needed breath of fresh air in the Movable Type community. As soon as I upgraded to the version of Movable Type that I needed to try it out, I actually installed that template set on on my professional website.

I was sorely disappointed.

Again, like DePo Masthead, lovely. Again, like DePo Masthead, links not underlined in posts. And it was actually worse. The Professional Website template set comes in three colors. Using two of them, I couldn't even find the links in my own posts without hovering over them. The dark green / black and dark blue / back combinations of links and text just did not work for me.

As a Movable Type user, of course, I have the power to change my link color and decoration whenever I want. I was sad, though, that Six Apart chose to release this template set in a way that made users work to make it accessible, rather than leaving it up to the user to de-accessify their site should they so choose.

So when the beta of Mid-Century came out, I looked at the screen shots. Again, no link underlining. So I pulled together all of my courage and commented on Six Apart's post. Seriously, y'all, I feel completely intimidated by my imaginary vision of the "Movable Type community" full of hackers, coders, and CSS jockeys. I'm just me. So I was really nervous about it. This is what I said:

The mid-century template, like the universal template, is quite professional and I appreciate seeing these templates/styles coming from 6A.

I do wonder, though, whether Jim Ramsey has bionic eyes. These templates come with links not underlined or decorated in any way in the text of posts and pages - and the color combinations are really low in contrast. Anyone with red/green color blindness would be out of luck with a couple of them, and I realized as I was using one of the UTS templates that even I couldn't tell where my links were without mousing over.

I know that the links can be made underlined with an edit or two in the CSS, but since 6A prides itself in being "serious about design" it does leave me scratching my head as to why designs are released that by default are fairly unfriendly to anyone with impaired vision or color vision (especially as the population of the U.S. ages). One of the things I've always appreciated about TypePad, unlike WordPress.com, is that the themes have links underlined by default. It's friendlier and more accessible that way.

As I am a tiny fish, I just congratulated myself for the act of speaking up and didn't think anything would come of it.

Imagine my surprise when I saw this appear later that day, directed at me, from Byrne Reese - the product manager for Movable Type:

thank you so much for your feedback. I will see to it that Jim sees this. I was hoping that my post made it clear that this was a preview and not an official release. As a "preview" it is kind of like a "beta" meaning it has bugs we should probably fix. I know that Jim has already made a lot of enhancements to the theme even after I have posted this download. Stay tuned!

When Mid-Century was officially released, the links were underlined. You can't see it in the screenshots, but I installed it on a test blog, and it's true.

I have no idea if it was me. For all I know, it was already changed before I even saw it. However, I'm quite happy that it happened. Six Apart released a beautiful template set that includes a key element to make it accessible to people with color blindness, anyone whose color perception has diminished as they've grown older, and even people new to the web or with cognitive disabiities who are looking for that tell-tale underline to know when something's a link.

Now I have to start a new blog so I can use it, right?

Though I don't maintain a blog at WordPress.com, I do have an account there for testing its accessibility. One area where it's always failed pretty badly is the color schemes of its themes.

Many of the WordPress.com themes don't underline links within posts or even make them bold. Color combinations like green links with either black text or dark grey text, dark blue links with dark grey text, red links with black text, and light orange links with dark red text are just a few of the combinations in various themes that may cause problems even for people with "normal" color vision - let alone people with red-green color blindness or older folks who may be finding it more difficult to perceive differences between colors.

DePo Masthead, the new magazine-style theme released a couple of weeks ago, isn't much of an improvement in that regard. Is it gorgeous? Sure. I'm tempted to print it out and put it up as wallpaper. But is it accessible and user-friendly? No. Red and black combined are never a good choice without also designating links with some kind of underlining or bold... unless you know you don't have any readers who are among the 8% of the American male population with some color blindness.

I guess many designers are starting to feel that underlining links in text makes their design less elegant. A blog I very much enjoy, EcoWorldly, suffers from this affliction. (Disclosure: I blog for another site owned by the same company.) EcoWorldly's dark blue links in black text just aren't easy to see even for a 34 year old woman with eyesight that corrects to 20/20.

I don't have a quarrel with non-underlined links in navigation, since most web users - even newer ones who are still fumbling around with this whole "internet" thing - can probably figure out that something that looks like a menu might be clickable. DePo Masthead seems to be relying on this familiarity when it attempts to differentiate the Category link on each post from the surrounding text by making it dark grey instead of light grey.

Links in posts, though, are presumably included because you want your readers to see them and click on them. DePo Masthead's red and black combo isn't a safe one for making sure that all visitors can easily distinguish text from links.

If you can be sure that your audience doesn't include anyone who is color blind, new to the web, older, or has cognitive disabilities, then do as you will. But if you can't rule out those populations and you care about whether your readers can use your blog without squinting or having to think really, really hard, then you may want to think twice about jumping on this web design trend. As far as I know, WordPress.com users don't have the option of changing their link colors or underlining without paying for an upgrade, so I wish WordPress would ensure that the themes they provide these users contribute to a better web experience for everyone.