Making Drupal more accessible

wrappers, but also the issues with labels and elements being absent or in the wrong place, missing ARIA roles and attributes, etc. As we aim to deliver all our projects to WCAG2.0 AA standards at least, these issues arise on all our build projects, and historically there has been a tendency to facilitate these corrections by using the power of the theming layer.

It would be helpful however if we only had to fix these things only once, rather than fixing them over and over again for every project.

Luckily we are maintaining a Sandbox Drupal version which we use as a base for all our Drupal build projects. This contains all the modules we use on every build project as well as our very own module, along with install profiles to enable these modules.

As we use this for all our projects we should be able to resolve these front-end issues once in code, and enjoy the benefits for as long as we use D7.

So what was the challenged we faced? Let’s use the breadcrumb as an example.

You would think that something as simple as the humble breadcrumb would not pose much of a problem when it comes to accessibility, but this wasn’t the case. By default the HTML for the breadcrumb consists of:

You are here

To make the breadcrumb more accessible, the HTML for it should look more like the following:

To make matters more complicated, not only could the HTML do with updating, it is also hard coded into the theme_breadcrumb function in includes/theme.inc, which is part of Drupal core.

function theme_breadcrumb($variables) {
  $breadcrumb = $variables['breadcrumb'];

  if (!empty($breadcrumb)) {
    // Provide a navigational heading to give context for breadcrumb links to    
    // screen-reader users. Make the heading invisible with .element-invisible.
    $output = '

‘ . t(‘You are here’) . ‘

‘; $output .= ‘

‘; return $output; } }

As we all know, Rule 1 of Drupal development says “DO NOT HACK CORE!!”, hence we’re not just going to change it in the core files, no matter how trivial that might be.

Which leaves us with a interesting challenge; How to alter the breadcrumb to match what we need, and move the HTML from the core into a template, so it can easily amended by a front-end developer if need be. This is where Drupal’s hook system comes into play. There is a large number of exposed hooks, and a large part of our jobs as Drupal developers is tracking down the right hook to use for what we’re trying to achieve…

There are hooks available at various levels, such as hook_menu_breadcrumb_alter() which allows you to alter the elements in the breadcrumb, but unfortunately not the HTML used for theming it. For this we need to go even lower down, to the core theming layer of Drupal itself. This exposes a hook named hook_theme_registry_alter(), which like it would suggest, allows you to alter the registry in which all the theme functions are contained.

So this allows us to do something like this in our own module:

function nomensa_theme_registry_alter(&$theme_registry) {

    foreach ($theme_registry as $key => $element) {
      if ( 'theme_breadcrumb' == $theme_registry[$key]['function']) {
        $theme_registry[$key]['function'] = 'nomensa_theme_breadcrumb;
      }
    } 
}

This will change the theme registry to use our function for theming the breadcrumb, rather than the core function. Now in our own module, we can alter the HTML:

function nomensa_theme_breadcrumb($variables) {
 
  $breadcrumb = $variables['breadcrumb'];

  if (!empty($breadcrumb)) {
   
    $output = '

‘; return $output; } }

This will now output the desired HTML, but the markup is still in the module. The next step is to create a template file, and make the function use that.
To do this we create a file called breadcrumb.tpl.php which goes in a template/ directory inside our module, which contains the markup:

And then it is just a question of amending our new theming function to use this template:

function nomensa_theme_breadcrumb($variables) {
 
  $breadcrumb = $variables['breadcrumb'];

  if (!empty($breadcrumb)) {
   
    $template_file = drupal_get_path('module', 'nomensa').'/templates/breadcrumb.tpl.php';

    return theme_render_template($template_file, $variables);
  }
}

We use the same mechanism for other elements, such as menu, button, messages, input, etc. To faciliate this we rewrote the hook_theme_registry_alter implementation as follows:

function nomensa_theme_registry_alter(&$theme_registry) {

  // For each of the registry entries, check if there is a 
  // function in the nomensa module with the same name, and use that instead
  foreach ($theme_registry as $key => $element) {

    if (function_exists('nomensa_theme_'.$key) 
       && $theme_registry[$key]['function'] != 'nomensa_theme_'.$key) {
      $theme_registry[$key]['function'] = 'nomensa_theme_'.$key;
    }
  }

}

This will now simply check whether there’s a function with a prefix of nomensa_theme_ for any entry in the registry, and use that instead. So we can now just create nomensa_theme_breadcrumb, nomensa_theme_menu_tree, etc and it will just work. And using the mechanisms detailed above we can extract all the HTML into a template, which means we can alter it to suit our requirements.

Mission accomplished!