Accessible Checkboxes Using Drupal's Form API

Question

Im trying to get a set of checkboxes produced via Drupal's form api to pass the WCAG AA accessibility standards, the problem i am facing is with regard to labels and for attributes.

For example i am returning the following form definition via a hook_block_view(), i cant use drupal_get_form as normal as i dont want a form element wrapping the output which means i lose some of the processing that drupal_get_form does which is why i have to add in form_process_checkboxes and am missing some other functionality that gives the individual checkboxes their ID's(which is then used as the for attribute)

$form['tests_taken'] = array(
  '#type' => 'checkboxes',
  '#options' => drupal_map_assoc(array(t('SAT'), t('ACT'))),
  '#title' => t('What standardized tests did you take?'),
   '#attributes' => array(
     'name' => 'example-checkboxes[]'
   )
);


$form['tests_taken'] = form_process_checkboxes($form['tests_taken']);

dsm($form);

return $form;

This produces the following markup.

<div class="form-checkboxes"><div class="form-item form-type-checkbox">
    <input name="example-checkboxes[]" type="checkbox" value="SAT" class="form-checkbox"> 
<label class="option">SAT </label>
</div>
<div class="form-item form-type-checkbox">
    <input name="example-checkboxes[]" type="checkbox" value="ACT" class="form-checkbox"> 
<label class="option">ACT </label>
</div>
</div>

I need the markup to either have labels with 'for' attributes pointing to the input elements or wrap the input elements with the label tag.

Heres thebest ive managed to come up with so far which doenst seem very satisfying

$form['tests_taken'] = array(
    '#type' => 'checkboxes',
    '#options' => drupal_map_assoc(array(t('SAT'), t('ACT'))),
    '#title' => t('What standardized tests did you take?'),
    '#attributes' => array(
      'name' => 'example-checkboxes[]'
    )
  );

  $form['tests_taken'] = form_process_checkboxes($form['tests_taken']);

  foreach (element_children($form['tests_taken']) as $key) {
       $form['tests_taken'][$key]['#id'] = drupal_html_id('edit-' . $form['tests_taken'][$key]['#attributes']['name'] . '_' . $key);

  }

  dsm($form);
  return $form;

Which now produces this markup

<div class="form-checkboxes"><div class="form-item form-type-checkbox">
<input name="example-checkboxes[]" type="checkbox" id="edit-example-checkboxes-sat" value="SAT" class="form-checkbox"> 
<label class="option" for="edit-example-checkboxes-sat">SAT </label>
</div>
<div class="form-item form-type-checkbox">
<input name="example-checkboxes[]" type="checkbox" id="edit-example-checkboxes-act" value="ACT" class="form-checkbox"> 
<label class="option" for="edit-example-checkboxes-act">ACT </label>
</div>
</div>

Anyone know of a cleaner way of doing this?

Answer 1

Try changing your code to the following, no need for the call to form_process_checkboxes.

function my_module_block_view($delta='') {
  $block = array();
  switch ($delta) {
    case 'myform':
    $block['content'] = drupal_get_form('mymodule_form');
    break;
  }
  return $block;
}

function mymodule_form() {

  $form = array();
  $form['tests_taken'] = array(
    '#type' => 'checkboxes',
    '#options' => drupal_map_assoc(array(t('SAT'), t('ACT'))),
    '#title' => t('What standardized tests did you take?'),
    '#attributes' => array(
      'name' => 'example-checkboxes[]'
    )
  );

  dsm($form);

  return $form;

}

Answer 2

You could use hook_theme_registry_alter to override the theme function theme_form_element_label:

function mymodule_theme_registry_alter(&$theme_registry) {

    $theme_registry['form_element_label']['theme path'] = drupal_get_path('module', 'mymodule');
    $theme_registry['form_element_label']['function'] = 'mymodule_form_element_label';

}

Then just copy the implementation of theme_form_element_label from /include/form.inc and add a for element to the attributes:

function mymodule_form_element_label($variables) {

    $element = $variables['element'];
    // This is also used in the installer, pre-database setup.
    $t = get_t();

    // If title and required marker are both empty, output no label.
    if ((!isset($element['#title']) || $element['#title'] === '') && empty($element['#required'])) {
        return '';
    }

    // If the element is required, a required marker is appended to the label.
    $required = !empty($element['#required']) ? theme('form_required_marker', array('element' => $element)) : '';

    $title = filter_xss_admin($element['#title']);

    $attributes = array();
    // ADD A FOR ATTRIBUTE TO THE LABEL AND SET IT TO THE ELEMENT ID
    $attributes['for'] = $element['#id'];
    // Style the label as class option to display inline with the element.
    if ($element['#title_display'] == 'after') {
        $attributes['class'] = 'option';
    }
    // Show label only to screen readers to avoid disruption in visual flows.
    elseif ($element['#title_display'] == 'invisible') {
        $attributes['class'] = 'element-invisible';
    }

    if (!empty($element['#id'])) {
        $attributes['for'] = $element['#id'];
    }

    // The leading whitespace helps visually separate fields from inline labels.
    return ' <label' . drupal_attributes($attributes) . '>' . $t('!title !required', array('!title' => $title, '!required' => $required)) . "</label>\n";

}

This would add a for attribute to EVERY form element that has a label. If you only wanted to add it to checkboxes then you could add a check to the value of $element['#type'] e.g:

if($element['#type'] == 'checkboxes') {
    $attributes['for'] = $element['#id'];
}

Answer 3

I believe this is documented in Drupal's Form API Reference.

Format a set of checkboxes. #options is an associative array, where the key is the #return_value of the checkbox and the value is displayed.

You should be able to set the labels corresponding to each checkbox in the #options array. The array can be of the format:

array(
  'submitted_value1' => t('Label 1'),
  'submitted_value2' => t('Label 2'),
);