Return to 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_clean_css_identifier($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="example-checkboxes--SAT" value="SAT" class="form-checkbox"> 
<label class="option" for="example-checkboxes--SAT">SAT </label>
</div>
<div class="form-item form-type-checkbox">
<input name="example-checkboxes[]" type="checkbox" id="example-checkboxes--ACT" value="ACT" class="form-checkbox"> 
<label class="option" for="example-checkboxes--ACT">ACT </label>
</div>
</div>

Anyone know of a cleaner way of doing this?

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?

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()

$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_clean_css_identifier($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="example-checkboxes--SAT" value="SAT" class="form-checkbox"> 
<label class="option" for="example-checkboxes--SAT">SAT </label>
</div>
<div class="form-item form-type-checkbox">
<input name="example-checkboxes[]" type="checkbox" id="example-checkboxes--ACT" value="ACT" class="form-checkbox"> 
<label class="option" for="example-checkboxes--ACT">ACT </label>
</div>
</div>

Anyone know of a cleaner way of doing this?

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_clean_css_identifier($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="example-checkboxes--SAT" value="SAT" class="form-checkbox"> 
<label class="option" for="example-checkboxes--SAT">SAT </label>
</div>
<div class="form-item form-type-checkbox">
<input name="example-checkboxes[]" type="checkbox" id="example-checkboxes--ACT" value="ACT" class="form-checkbox"> 
<label class="option" for="example-checkboxes--ACT">ACT </label>
</div>
</div>

Anyone know of a cleaner way of doing this?

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()

$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.

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()

$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_clean_css_identifier($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="example-checkboxes--SAT" value="SAT" class="form-checkbox"> 
<label class="option" for="example-checkboxes--SAT">SAT </label>
</div>
<div class="form-item form-type-checkbox">
<input name="example-checkboxes[]" type="checkbox" id="example-checkboxes--ACT" value="ACT" class="form-checkbox"> 
<label class="option" for="example-checkboxes--ACT">ACT </label>
</div>
</div>

Anyone know of a cleaner way of doing this?