After seeing how much attention my last post on Drupal and accessibility got, and how much time we've been spending with it I realized that we've developed something really worth sharing: a lot of experience with Drupal and accessibility, and a bag of tricks and good practices to go along with it. So I've decided to write more on the topic and hopefully develop a resource for others struggling with the same issues.

Thanks to my old friend PJ for giving me the nudge! I just got an email from him last night commenting about this blog - and I can only imagine that he found it by searching on Drupal and accessibility, and he mentioned that he's having some of the same issues at the agency where he works. So thanks PJ! I hope these bits help.

On to the topic at hand - 

I suspect that many others, like we do, use the Image module in Drupal, along with it's companion module 'img_assist'. Great stuff, and I could go on about how much I believe it's the 'right' approach to treat images as discrete objects within a content library rather than as simply assets in a folder with know 'knowledge' of them in the system - but that's not really the topic for today. The issue is that while it's a great module and it allows for easy placement of these images on the page via a 'filter tag' type of approach. When you add an image to a block of text you can specify the title, and the module will automatically put that title in the 'alt' attribute when rendering the HTML.

But we hardly ever want to display the title. The image almost always is standing on it's own as part of the page design - and so it has no 'alt' text. Definitely a problem as this then happens all over the site, and is detrimental to the site's overall accessibility. I poked around at the code, but don't know enough about the module to alter it. But I do know how to Google!

Enter ComputerMinds.co.uk. I found this snippet on a blog post from them last summer, and it works like a charm. It takes the 'title' element associated with the image (essentially the image node title) and inserts it in the 'alt' attribute whether or not you want the title to show on the page. This does then predicate that you need something meaningful in the node's Title field, but that's sort of the idea, right?

So add this bit of code to your theme's 'template.php' file and check it out. 

  function phptemplate_image_display($node, $label, $url, $attributes) {
     if (!$node->title){
          $node_temp = node_load($node->nid);
          $node->title=$node_temp->title;
     }
  return theme('image', $url, $node->title, $node->title, $attributes, FALSE);
  }

My apologies to the guys at ComputerMinds if showing your code here offends - I am including a link at right to the page on their site, but I wanted to make sure I had quick reference to the code in one place, so I hope that by giving attribution and a link that this will suffice to indicate proper credit for the resource.

Cheers all -

Jason