Quick link: Making Facebook Accessible for Everyone.
It describes an ongoing partnership between Facebook and the American Foundation for the Blind to make sure that Facebook can be enjoyed by everyone regardless of how they access the web - including with screen magnification software or screen readers.
Very cool!
In Glenda Watson's accessibility review of WordPress 2.7, she had a few things to say about the dialogue box used to upload an image:
The thing that really bugs me is, in the “Add an Image” dialog box, the Title is marked as a required field, not the Caption that becomes the ALT: a crucial piece in web accessibility.
It is the ALT text that enables an individual using a text-to-speech screen reader to hear what an image is; not the TITLE. It is the ALT text that appears on the webpage when an image does not load; not the TITLE.
Confusion about the difference between ALT and TITLE already abounds, and Glenda is right that the WordPress scrambling of all these elements does not help.
The "title" that the WordPress dialogue box is asking for does not perform the same function as the TITLE attribute in HTML. WordPress uses the title as an internal label for the image to help you find it again if you want to re-use it. That's why the default value is the filename. Using that field automatically as the TITLE in the HTML makes little sense, since the purpose of the TITLE attribute in HTML is to convey extra information about the image.
"Caption" is a word that most people associate with print publication captions that appear under photographs, and there is an HTML tag called CAPTION which is for something totally different than what happens with the caption in the WordPress dialogue box, which becomes the ALT text.
The logical place to ask for something that would turn into the ALT text would be in the "description" field, except that it's too long. And why in the world would you need to fill out three separate fields for one image, anyway?
There are similar issues in my beloved Movable Type as well. In Movable Type 3, there wasn't a prompt in the default File Upload process for the ALT attribute, and the filename was used as the ALT text by default. In Movable Type 4, using the asset manager, whatever you include in the Name field becomes the ALT text, but there's no indication that this is the case in the dialogue box. Leaving the Name field blank produces a blank alt attribute and the asset manager uses the filename as the asset's name within the system. If you use the Better File Uploader plugin (which is awesome), you can configure it to ask for alt text during the upload process, but it will still fill in the image's filename by default and you have to replace it with something meaningful.
The beauty of using HTML and CSS together is to separate content from presentation. I would argue that the way both WordPress and Movable Type handle image uploading fails to separate two other things that should be separate: the content added by the user and the internal functions of the blogging tool. When a blogger is presented with a dialogue box because she or he is adding content to their blog, in this case an image, that blogger should be prompted to add the information that will make that image work for the readers and the blogger. The needs of the software for a label to use when filing the image should be secondary, and yet they seem to drive the design of the upload process.
It's a disservice to people with disabilities, but also to bloggers, who aren't being given the information they need to set up their images with full understanding of the consequences for certain decisions. Given that a properly labeled dialogue box would go a long way toward conveying the needed information, it just doesn't seem that hard to fix.
So how about it, Automattic and Six Apart? Care to tweak your tools to encourage accessible blogs with proper use of attributes? There's a pumpkin muffin in it for you.
November means it's time for National Blog Posting Month (NaBloPoMo). I'm blogging daily on my personal blog, Flooded Lizard Kingdom, but not without some reservations.
Last year, as I recounted in NaBloPoMo and CAPTCHA (and covered on BlogHer by Virginia DeBolt) I came across a blog post by a blind blogger named Ginny who wanted to participate in National Blog Posting Month, also known as NaBloPoMo.
Ginny had tried to create an account on the NaBloPoMo site at social network site Ning.com. However, she was unable to get past those dreaded squiggly letters Ning.com uses to verify that you're a human and not a computer - otherwise known as a visual CAPTCHA. Blogger Umm Zaid, a friend of Ginny's, searched Ning.com's website looking for more information. She found a blog post from July of 2007 saying that Ning.com was interested in adding an audio alternative to their CAPTCHA, and in the meantime they provided an email address to use if anyone needed help setting up an account.
Once Umm Zaid posted about it, a Ning.com staff person left a comment on her blog restating that they were glad to help people sign up, but noted that the email address listed in the July blog post was no longer valid and now the request should be submitted through the help center.
So basically, anyone who couldn't create an account on Ning.com due to the CAPTCHA and wanted concrete and current information about what to do for help if you can't see the darn thing... had to basically search the web and find Umm Zaid's blog post. Neither Umm Zaid nor I could find a lick of info on the topic in the Ning.com help center. And even if they managed to find Umm Zaid's post and the instructions in a comment to that post, anyone with visual or other disabilities that prevent them from getting past the CAPTCHA are stuck waiting on someone else to do for them what the rest of us can do for ourselves in a matter of minutes.
So where are we a year later?
Ning.com still uses the CAPTCHA, and there isn't an audio alternative or even a button to reload it if you can see it but you get one that you can't read. There is a link that says "Problems Signing Up?" The information on that page covers forgotten passwords and system requirements, but not the CAPTCHA. There is also a link to the Help Center. Searching the Help Center for CAPTCHA, though, returns no results. Searching for "create account" returns 26 pages of results, and there isn't anything immediately apparent on the first page of results that would explain what to do.
So I would say that Ning.com not only continues to have an accessibility problem, they also have a bit of an attitude problem. It's nice that Ning.com staff offer to individually assist people who need help to create an account. It's not nice that they can't get rid of an artificial barrier to people doing things for themselves. Have you ever had to wait on someone to fix your computer, at home or at work? Can't do anything until they call you back or get to your desk to figure out why your email is no longer downloading or your document is frozen? It's annoying to wait on someone else, isn't it?
The CAPTCHA issue was brought to their attention more than a year ago. They got email from at least two people. They told me, at least, that it was something they were working on. I realize that they are vulnerable to spam submissions, just like Blogger, LiveJournal, Wordpress.com, and other blogging platforms that don't require payment. Spam is a huge issue. However, alternatives to visual CAPTCHA do exist, and it's time for Ning.com to start checking around. At the very least, they could manage to add a link to the login help page that gives instructions for what to do if you can't read the CAPTCHA!
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.
