Adding a CSS Markup Detective to Drupal

I ran across Holmes by Red Root thanks to Sean Yo and decided to check out how well it would work within a Drupal environment. Turns out that this clever markup detective will dig through & quickly highlight improper HTML markup with quite a lot of accuracy. There's so much power in CSS 3 it's exciting to see how it can be used to enhance accessibility. You can see the full testing suite in action, but I've also deliberately added some errors within this page.

One of the challenges with accessibility is that even when you have a great theme & have evaluated the modules and plugins your site uses, you still have to grapple with user generated content. Holmes, the CSS Markup Detective, is a very simple tool which provides a great way to double check that your content is written effectively. It's also trivial to add this into your existing Drupal theme and have it only loaded when an editor is viewing the site. Use of automated testing tools like WAVE&FAE need to be included in any accessible site and the holmes.css file is a great addition to this suite of validators. None of them will ensure that your site is without barriers, but it will at least alert you to the easy stuff that is often overlooked.

The code is now GPL and all you need to do is download the CSS file. In our case we're using the Genesis theme & so have placed it in our sub-theme's css directory. Then it's simply a matter of editing your template.php and adding this to your YOUR_THEME_preprocess_html() function:

  // if a user then add CSS warnings for known accessibility issues
  if (user_access('access administration pages')) {
    drupal_add_js('jQuery(function ($) { $(document.body).addClass("holmes-debug") });', array('type' =>'inline', 'weight' => 9));
    drupal_add_css(path_to_theme() . '/css/holmes.css', array('weight' => CSS_THEME, 'preprocess' => FALSE));
  }

I would really like to see this added as an option to default themes like Genesis. Since it is released under a GPL license it would be easy to just include it by default in existing Drupal themes so that people can enable this in their theme's settings when they are ready to review the accessibility of a new theme before a site launches. It could then just be left on to evaluate content as an administrator edits their site.

Now there are some things that I wanted to do a bit differently in my implementation. I don't think that links need title tags & really didn't want to be given a warning when a link doesn't include on. I also wanted to add in a way to highlight invisible positive practices like adding in abbreviations. Thankfully it is clearly GPL code, I can now safely, use, modify & distribute it. However, the developer is still continuing to extend this page, so if I want to keep up I'm either going to need to keep re-applying patches or I'll have to contribute my code back to the developer. I've done this, and had a great response from the developer who has adopted some of my suggestions already. However, there may well be times when I want to develop something that is slightly different than the main contributor does. In this case GitHub also offers a really nice way for me to easily fork the code while allowing me to still benefit from enhancements in the core project.

I do hope that some of my suggestions to make their way into the main Holmes repository, but I may be able to extend it in ways that is either geared to Drupal or my own decisions about current best practices for inclusive design. By contributing back in this way I can very much continue to benefit from improvements to this concept as well as get ideas from others about ways I can extend it further. In the mean time, you can watch the main Git repository, as well as my fork.

Note that it's quite simple to add a validation block that only shows up for editors which can be an easy reminder to review pages after they are published.